Menu
Odwiedź profil
Zobacz posty
Prywatna wiadomość
Zobacz artykuły
zaokrąglone narożniki przy pomocy styli.
Właściwość border-radius pozwala web developerom na proste tworzenie zaokrąglonych narożników bez konieczności korzystania z obrazków czy kilku elementów div.
Najprostszy przykład wykorzystania border-radius przedstawiony jest poniżej:
W najnowszych przeglądarkach Firefox, Opera, Safari/Chrome oraz IE9 ten box powinien mieć zaokrąglone rogi.
Aby uzyskać taki efekt wystarczy zastosować
Kod:
#div {
border-radius: 20px;
}
Aby efekt był widoczny musimy oczywiście określić jakiś kolor tła lub obramowanie elementu, którego narożniki zaokrąglamy. Druga sprawa to tzw vendor extensions. Najczęściej producenci przeglądarek wprowadzają rozszerzenia implementując w swoim silniku obsługę właściwości, która wg W3C ma status working draft. Dzięki temu użytkownicy mogą testować i używać tych właściwości zanim uzyskają one status candidate recommendation. Poniżej prefiksy dla najczęściej stosowanych rozszerzeń
| -moz- | Mozilla (przeglądarki oparte na Gecko) |
| -o- | Opera |
| -webkit- | Safari (i inne przeglądarki oparte na WebKit) |
| -khtml- | Konqueror |
| -ms- | Microsoft (ten prefix jest raczej rzadko wykorzystywany przy okazji CSS3. IE dopiero w wersji 9 będzie obsługiwał część nowych styli) |
W przypadku border-radius rozszerzenia wyglądają następująco:
Kod:
-moz-border-radius -webkit-border-radius -khtml-border-radius
Kod:
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius
Kod:
border-radius:
Kod:
-moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft
Kod:
div {
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
border-top-left-radius: 20px;
border-top-left-radius: 20px 20px;
border-top-left-radius: 50px 20px;
border-top-left-radius: 20px 50px;
Jak widać border-radius użyte w odpowiedni sposób może nam bardzo pomóc. Niepotrzebne stają się dodatkowe obrazki czy elementy html a zmiany wyglądu sprowadzają się do podania nowych wartości zaokrąglenia. Szybko i skutecznie.
Dla osób które chcą poeksperymentować lub nie dają sobie rady z ręcznym określaniem wartości border-radius przygotowałem narzędzie, które mam nadzieję okaże się przydatne.
CSS3 Border-Radius Generator
Ostatnio na forum
Polecamy