HTML5 & CSS3

Zaokrąglanie rogów w CSS3

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:

div {
     border-radius: 10px;
    }

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

div {
     border-radius: 10px 5px;
    }

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

div {
     border-radius: 10px 5px 8px;
    }

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

div {
     border-radius: 10px 5px 8px 4px;
    }

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 (/).

div {
     border-radius: 10px/5px;
    }

Brak komentarzy

Napisz komentarz jako pierwszy!

Zostaw odpowiedź