Andrian - blog, noutăţi, pc&it, media, divertisment, fun
|
![]() |
-
-
Categorie - Tutoriale 11.01.2010 - 04:03
Cu ajutorul proprietăţii Border Radius în CSS3 se pot crea casete cu colţuri rotunjite fără a avea nevoie de nici o imagine, totul se face din CSS.
Proprietatea Border Radius funcţioneaza pentru versiunile superioare de browsere: Firefox 3.0, Safari 3.1, si Chrome.
Internet Explorer este exclus, ar fi trebuit implementat si in Opera 10 dar am constatat ca nu merge deocamdata.
Nici in Chrome nu merg decât primele 2 exemple.Începem prin a crea HTML-ul pentru un BOX:
<div id="box"></div>
Si css-ul aferent:
#box { width:400px; height:100px; background-color:#91C8FF; }
De unde rezultă o casetă normală cu colţuri drepte:
Un Border Radius se poate concepe în mai multe feluri adăugând în CSS o singură linie, în funcţie de ce dorim să obţinem. De fapt doua linii, una pentru Firefox si alta care este de fapt acelasi lucru pentru Safari si Chrome. E necesar deoarece CSS3 nu este inca un standard.
Mai jos urmează 7 exemple care sper să vă convingă de utilitatea proprietăţii Border Radius.#box { -moz-border-radius: 20px; } /*pt Firefox*/ #box { -webkit-border-radius: 20px; } /*pt Safari si Chrome*/
#box { -moz-border-radius:20px 40px; } /*pt Firefox*/ #box { -webkit-border-radius:20px 40px; } /*pt Safari si Chrome*/
#box { -moz-border-radius:20px 40px 5px; } /*pt Firefox*/ #box { -webkit-border-radius:20px 40px 5px; } /*pt Safari si Chrome*/
#box { -moz-border-radius:10px 20px 30px 40px; } /*pt Firefox*/ #box { -webkit-border-radius:10px 20px 30px 40px; } /*pt Safari si Chrome*/
#box { -moz-border-radius-topright: 30px; } /*pt Firefox*/ #box { -webkit-border-radius-topright: 30px; } /*pt Safari si Chrome*/
#box { -moz-border-radius-topleft: 30px; } /*pt Firefox*/ #box { -webkit-border-radius-topleft: 30px; } /*pt Safari si Chrome*/
#box { -moz-border-radius: 30px / 15px; } /*pt Firefox*/ #box { -webkit-border-radius: 30px / 15px; } /*pt Safari si Chrome*/
La ce se poate folosi o asemenea casetă?
La multe, mai jos un exemplu.
Si css-ul complet utilizat pentru a printa ce se vede.#box { width:400px; height:100px; background-color:#91C8FF; -moz-border-radius: 20px; -webkit-border-radius: 20px; line-height:1.2em; padding:10px; border:3px solid #0000FF; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis lobortis tempor. Nam porta quam at dui. Aenean tincidunt ultrices ultrices. Aliquam magna enim, rhoncus quis pretium sit amet, consectetur sit amet felis. Pellentesque congue tortor nec eros eleifend ac auctor consectetur adipiscing elit odio blandit.
Tutorial este tradus şi adaptat după: bloggingcss.comAm testat functionalitatea Border Radius in Firefox 3.5.6, Chrome last vers, Netscape.
În browserele la care nu funcţionează, la toate exemplele de mai sus de casete cu colţuri rotunjite, colţurile se văd drepte la 90 grade.
Eventual vă rog lăsaţi un comentariu pentru alte tipuri de browsere, sisteme de operare, pentru e se cunoaşte cu exactitate problema. Teoretic ar trebui să meargă şi pe Safari/MAC dar n-am MAC, n-am cum sa ştiu.
Etichete: html, tutorial, Webdesign
Dacă ţi-a plăcut, trimite mai departe:
-
Alte articole interesante
Loading...
-

Web conections
Reclamă
Categorii
Alte articole
Smooth upgrade la WordPress 2.7... ??
Se pare că da, e posibil şi asta. În articolul de mai jos pov...ZUNE HD
Zune hd 16 Zune HD 16 ofera spatiu pentru max 4.000 melodii, sau 5 ore de HD vi...Windows 7 cracked!
N-a trecut nici o săptămână de la începerea producţie de serie Windows 7 şi a ap...Youtube va spune adio IE6
Youtube.com anunţă vizitatorii care accesează site-ul cu IE6 că va sista în curâ...
Comentarii recente
- Imi plac la nebunie motoarele, dar mi-e frica de d...
- @yooo - absolut toate detaliile sunt descrise aman...
- Daaaa m-am convins.....si eu am primit unul din pl...
- Salut all...am si eu o intrebare...cum fac sa moni...
- @Dyeve - si mie imi place vintage-ul, o lume facin...
- Awwww! Ce mistoace sunt! Benefice sau nu aceste re...
- @Versuri - se spune Hayabusa, aia le da clasa la t...
- Le-am mai vazut:)).Caterinci pe acolo.
Blogroll
-
Achilianu
-
Andain
-
Andi
-
BadPisi
-
Bancuri 2010
-
Bancuri Tari
-
Blogatu
-
Blogu' lu' Cipy
-
Cipri blog
-
Containere metalice
-
Cristian Manafu
-
Dispecer Blogosfera
-
Dyeve
-
Filme Noi
-
Filme Online
-
Generatoare electrice
-
Goldies
-
InCuvinte
-
Îngheţată
-
Mihai Gaspar
-
Needitat
-
Niggerul
-
Ordinary Stuff
-
Paulierco
-
Poze Haioase
-
Radio Come4Me
-
Realitatea Online
-
Roxy's blog
-
Sabotorul
-
Seriale Online
-
Tony Adax's Blog
-
yo9fah