CSS3 contine caracteristici care permit crearea de colturi rotunjite, umbre la chenare si folosirea unei imagini pentru aspectul bordurii.
border-radius
permite crearea cu usurinta a colturilor rotunjite in designul elementelor, fara a fi nevoie de imagini sau mai multe tag-uri <div>.<style> #id1 { width:300px; height:120px; border:2px solid blue; border-radius:28px; text-align:center; } </style> <div id="id1"> Curs CSS - marplo.net</div>
<style> #id1 { width:300px; height:120px; background-color:#bbfeda; border:2px solid blue; border-top-left-radius:20px; border-bottom-right-radius:38px; text-align:center; } </style> <div id="id1"> Curs CSS - marplo.net</div>
box-shadow
se foloseste pentru a adauga umbre la chenare. Este recunoscuta in IE9+, Firefox 4, Chrome, si Opera.elm { box-shadow: X_offset Y_offset blur marime culoare inset; }- elm - este elementul HTML la care se aplica aceasta proprietate.
<style> #id1 { width:300px; height:120px; background-color:#bbfeda; box-shadow: 11px 11px 5px #7878da; -webkit-box-shadow: 11px 11px 5px #7878da; /* Safari si Chrome */ } </style> <div id="id1"> CSS3 box-shadow, www.coursesweb.net/css/</div>
border-image
se poate folosi o imagine pentru aspectul bordurii.elm { border-image: url_img slice width outset repeat; }- url_img - adresa si numele imaginii folosita pt. bordura.
- Ca sa functioneze, este necesar sa adaugati si proprietatea: border
cu valoarea "transparent" la culoare.
- border-image e recunoscut in Internet Explorer 11+.
<style> #id1 { width:200px; height:120px; border: 12px solid transparent; border-image:url('css/border_image.png') 30 30 round; } #id2 { width:200px; height:120px; border: 15px solid transparent; border-image:url('css/border_image.png') 30 30 stretch; } </style> <div id="id1"> CSS3 border-image, with round</div><br> <div id="id2"> CSS3 border-image, with stretch</div>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
h3 { padding: 2px 0.2em; }
// preia primul Div cu class="cls", si afiseaza continutul var elm = document.querySelector("div.cls"); alert(elm.innerHTML);
if(isset($_POST["field"])) { echo $_POST["field"]; }
We speak english. - Noi vorbim engleza.
Nosotros hablamos español. - Noi vorbim spaniola.