Colturi rotunjite cu css, colturi rotunde
Css3 – Tutoriale css

Cu css3, (pentru ca si limbajul css are variante), putem adauga colturi rotunde la orice element fara sa folosim imagini. Din pacate directivele care raspund pentru colturile rotunjite nu sunt interpretate de majoritatea versiunilor a Internet Explorer-ului, nici chiar de variantele mai noi. Sa speram ca in viitor acest lucru se va shimba, si va avea si IE suport. Problema este ca indiferent daca IE-ul nou va avea suport pentru colturile rotunde, majoritatea oamenilor folosesc Windows-uri fara licenta, si nu vor putea sa faca upgrade. Deci, repet, aceste directive trebuie folosite daca credeti ca majoritatea vizitatorilor a siteului respectiv vor veni din alte browsere, sau creati un design special pentru IE. Haideti sa vedem codul.

<html>
<head>
<title>Colturi rotunde css3</title>
<style type="text/css">
#rotund {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

background-color:#7AB8E9;
width:490px;
height:60px;
}
</style>
</head>
<body>
<div id="rotund"></div>
</body>
</html>

Acest cod de mai sus va rezulta intr-un div cu colturi rotunjite
Trebuie vizualizat cu Firefox, Safari sau G-Chrome

Explicatia codului css de mai sus

Poate ca va intrebati, de ce am folosit 3 directive, pentru a pune colturi rotunjite la fel pentru fiecare colt. Explicatia este simpla. Fiecare browser intelege ca trebuie adaugat un colt rotunjit, printr-o alta directiva.
-webkit-border-radius: 15px; – este scris pentru browserul Safari, browserul default in Macintosh.
-moz-border-radius: – este directiva folosita pentru Firefox si alte browsere care folosesc acelasi engine, majoritatea browserelor de pe Linux.
border-radius: – este directiva css3 pentru Google Chrome si teoretic si pentru IE, unde de obicei nu functioneaza din pacate. Este posibil si adaugarea colturilor diferite la un singur obiect, adica fiecare colt sa fie rotunjit altfel.

Generator cod css – Colturi rotunde

Cum se foloseste utilitarul de mai sus? – Prima data in orice camp daca scrieti un numar, toate colturile se vor seta la unghiul respectiv, si se va genera codul. Jos puteti selecta pentru care browsere doriti codul css. Daca vreti colturi customizate separat, adica colturi cu diferite proprietati atunci setati la fiecare colt unghiul diferit – IMPORTANT! – Un colt customizat separat, se seteaza scriind intr-un alt camp decat primul camp in care am setat prima data toate colturile.

Lasă un răspuns

(*)


*