Descriere:In acest tutorial o sa va arat cum sa faceti colturile rotunjite la IE!
Download:
Autor:
Sursa (Link-ul oficial): Propria parere:Nu l-am incercat.
Tutorialul:
Pentru a crea colturi si margini rotunjite in Mozilla Firefox, Opera, Google Chrome si Safari puteti folosi proprietati CSS:
Cod: Selectaţi tot
Selector {
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
}• DD_roundies este o biblioteca Javascript (autor: Drew Diller), care face crearea de colturi rotunjite in HTML mai usoara, cu accent pe Internet Explorer.
In primul rand, descarcati arhiva Javascript cu fisierul DD_roundies, de aici -> Download, extrageti fisierul "DD_roundies.js" si copiati-l pe server unde e site-ul dv.
Includeti-l in documentul HTML, adaugand in sectiunea <head> urmatorul cod:
<script type="text/javascript" src="DD_roundies.js"></script>
In corpul documentului HTML adaugati un alt cod de script JS, si apelati functia DD_roundies.addRule().
Iata un exemplu:
Cod: Selectaţi tot
<script src="DD_roundies.js" type="text/javascript"></script>
<script type="text/javascript">
/* doar IE */
DD_roundies.addRule('.selector', '10px');
/* raze diferite, doar IE */
DD_roundies.addRule('#id_selector', '10px 4px');
/* "toate" browser-ele */
DD_roundies.addRule('.alt_selector', '8px', true);
</script>'10px' - defineste o raza de 10px pentru toate colturile
'8px 5px' - defineste o raza de 8px pt. colturile stanga-sus, dreapta-jos, iar 5px pentru celelalte.
'12px 8px 5px' - 12px pt. coltul stanga-sus, 8px in coltul dreapta-sus, 5px la cel din dreapta-jos, si 8px stanga-jos.
'12px 8px 5px 0' - 12px pt. coltul stanga-sus, 8px in coltul dreapta-sus, 5px la cel din dreapta-jos, si 0px stanga-jos
- Examplu:
Cod: Selectaţi tot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Colturi rotunjite</title>
<style type="text/css"><!--
/* adauga colturi rotunjite pentrua #id si .cli, pt.: Mozilla Firefox, Opera, Google chrome */
#idd, .cli {
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
}
/* definire si alte stiluri CSS la #id si .cli */
#idd {
width:300px;
height:100px;
border:2px solid blue;
}
.cli {
margin:2px auto;
width:250px;
background-color:#daedfe;
padding:2px;
}
--></style>
<script type="text/javascript" src="DD_roundies.js"></script>
</head>
<body>
<div id="idd">
Cursuri si tutoriale gratuite<br />
http://www.marplo.net - Web Development.
</div>
<br />
<ul>
<li class="cli">Curs PHP MySQL</li>
<li class="cli">Cursuri HTML CSS</li>
<li class="cli">JavaScript si AJAX</li>
</ul>
<script type="text/javascript">
// seteaza colturi rotunjite pt. Internet Explorer (IE 6, 7, 8)
DD_roundies.addRule('#idd', '10px'); // pt. tag-ul cu id="idd"
DD_roundies.addRule('.cli', '10px'); // pt. elementele cu class="cli"
</script>
</body>
</html>