Zaokrąglanie rogów w CSS3


19 grudnia 2011 / Michał Kortas


Nowości jakie przyniosło nam stopniowe rozpowszechnianie kaskadowych arkuszy stylów w wersji 3 (CSS3) są jak najbardziej „na plus”. W kilku kolejnych artykułach będę omawiać większość zmian, które zostały wprowadzone. Na pierwszy ogień idą zaokrąglenia rogów. Bez wątpienia nadają każdemu projektowi powiew delikatności. Dotychczas uzależnieni byliśmy jedynie od graficznych ozdobników. Nowe style pozwolą nas wyręczyć. Odtąd nie będziemy musieli, w przypadku zmian strony, edytować grafiki, użytej w jej przygotowaniu. Wystarczy krótka linijka kodu wprowadzona do arkusza.

Ponieważ, na chwilę obecną, konsorcjum W3C nie wprowadziło jeszcze oficjalnej specyfikacji, musimy posłużyć się odpowiednikami dla różnego typu przeglądarek – Webkit, oraz Firefox.

Aby zaokrąglić rogi danego elementu, wpiszmy kolejno, w postaci dla silnika Webkit (Safari, Chrome); oraz dla rodziny Firefox’a następujący ciąg znaków:

Pojedyncza wartość odnosi się do wszystkich rogów elementu.

Dwie wartości formatują rogi parami – dolny prawy i górny lewy, oraz dolny lewy i górny prawy.

Trzy wartości odnoszą się do górnego lewego, dolnego lewego i górnego prawego (ta sama wartość), oraz dolnego prawego.

Cztery wartości odnoszą się do każdego rogu – górny lewy, górny prawy, dolny prawy, dolny lewy.

Aby użyć zaokrąglenia eliptycznego, należy zastosować poniższe reguły, gdzie potrzebne nam będą 2 promienie. W standardowej deklaracji oddzielamy je ukośnikiem (/).



Jedna odpowiedź do “Zaokrąglanie rogów w CSS3”

  1. Malak pisze:

    Kocham was. pomagacie mi strasznie <3

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.