Zaokrąglanie rogów bez użycia grafik
HTML + CSS Aktualizacja: 22.07.2017

Zaokrąglanie rogów bez użycia grafik

Webmasterzy coraz częściej korzystają z opcji zaokrąglania rogów. Stosować ją można na różnych elementach, jednak najczęściej takie wartości nadaje się tabelom oraz divom. Zobaczmy, jak osiągnąć ciekawy efekt końcowy.

Na wstępie warto podkreślić, że istnieje - w pewnym sensie - "standardowa" metoda. Polega na utworzeniu w programie graficznym nowego dokumentu o wym. 10x10cm oraz zakreśleniu części koła. Następnie do elementu blokowego należy dodać wartość background, której wskazuje się adres nowo utworzonego pliku z obrazkiem.

Ta metoda posiada de facto jedną zasadniczą wadę, którą jest zabawa z obrazkami. Jedno obramowanie da się przeżyć ale co powiecie, gdy będziecie zmuszeni zrobić kilkadziesiąt innych, różnych od siebie zaokrągleń na odrębnych podstronach? W tym miejscu zaczną się schody, za którymi żaden znany mi webmaster nie będzie się uganiał.

Obecnie można korzystać spokojnie z CSS3 (podpunkt 2), przeglądarki obsługują to rozszerzenie.

Opis zastosowania border-radius

Druga metoda jest znacznie lepsza i polega na skorzystaniu z dobrodziejstw oferowanych przez Kaskadowe Arkusze Stylów. Warto wiedzieć, że do najnowszego CSS3 została dodana funkcjonalność border-radius. Umożliwia ona zaokrąglenie rogów we wskazanych elementach blokowych, za pomocą dodania do arkusza zaledwie jednej linijki kodu.

Przekonajmy się zatem, jak te wszystkie metody połączyć w jedną, działającą ze wszystkimi przeglądarkami.

1. Gecko

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum velit accumsan nulla. Praesent rutrum varius sem. Aenean pede libero, ornare hendrerit, porta at, porttitor nec, elit. Phasellus dolor elit, convallis elementum, fringilla et, ultricies sed, diam.
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius:6px;
  • -moz-border-radius-topleft - lewy górny róg
  • -moz-border-radius-topright - prawy górny róg
  • -moz-border-radius-bottomleft - lewy dolny róg
  • -moz-border-radius-bottomright - prawy dolny róg
  • -moz-border-radius - wszystkie rogi

-moz-border-radius nadaliśmy promień wynoszący 6px. No tak, użytkownicy innych przeglądarek niż Gecko mocną się zdziwią. Gdzie jest to niby zaokrąglenie? Parametr -moz jak już wcześniej napisałem został wymyślony przez Mozillę, także wyłącznie do jej produktów został przypisany.

2. CSS3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum velit accumsan nulla. Praesent rutrum varius sem. Aenean pede libero, ornare hendrerit, porta at, porttitor nec, elit. Phasellus dolor elit, convallis elementum, fringilla et, ultricies sed, diam.
border-top-left-radius:6px;
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
border-radius:6px 5px;
border-radius:6px;
  • border-top-left-radius - lewy górny róg
  • border-top-right-radius - prawy górny róg
  • border-bottom-left-radius - lewy dolny róg
  • border-bottom-right-radius - prawy dolny róg
  • border-radius: 6px 5px - wszystkie rogi: 6px na X, 5px na Y
  • border-radius: 6px - wszystkie rogi: 6px

3. iCab w Macu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum velit accumsan nulla. Praesent rutrum varius sem. Aenean pede libero, ornare hendrerit, porta at, porttitor nec, elit. Phasellus dolor elit, convallis elementum, fringilla et, ultricies sed, diam.
-icab-border-top-right-radius:6px;
-icab-border-top-left-radius:6px;
-icab-border-bottom-right-radius:6px;
-icab-border-bottom-left-radius:6px;
-icab-border-radius:6px;
  • -icab-border-top-left-radius - lewy górny róg
  • -icab-border-top-right-radius - prawy górny róg
  • -icab-border-bottom-left-radius - lewy dolny róg
  • -icab-border-bottom-right-radius - prawy dolny róg
  • -icab-border-radius - wszystkie rogi

4. Safari/WebKit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum velit accumsan nulla. Praesent rutrum varius sem. Aenean pede libero, ornare hendrerit, porta at, porttitor nec, elit. Phasellus dolor elit, convallis elementum, fringilla et, ultricies sed, diam.
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
-webkit-border-radius:6px;
  • -webkit-border-top-left-radius - lewy górny róg
  • -webkit-border-top-right-radius - prawy górny róg
  • -webkit-border-bottom-left-radius - lewy dolny róg
  • -webkit-border-bottom-right-radius - prawy dolny róg
  • -webkit-border-radius - wszystkie rogi

5. Konqueror w Linuksie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum velit accumsan nulla. Praesent rutrum varius sem. Aenean pede libero, ornare hendrerit, porta at, porttitor nec, elit. Phasellus dolor elit, convallis elementum, fringilla et, ultricies sed, diam.
-khtml-border-top-left-radius:6px;
-khtml-border-top-right-radius:6px;
-khtml-border-bottom-left-radius:6px;
-khtml-border-bottom-right-radius:6px;
-khtml-border-radius:6px;
  • -khtml-border-top-left-radius - lewy górny róg
  • -khtml-border-top-right-radius - prawy górny róg
  • -khtml-border-bottom-left-radius - lewy dolny róg
  • -khtml-border-bottom-right-radius - prawy dolny róg
  • -khtml-border-radius - wszystkie rogi

Podsumowanie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum velit accumsan nulla. Praesent rutrum varius sem. Aenean pede libero, ornare hendrerit, porta at, porttitor nec, elit. Phasellus dolor elit, convallis elementum, fringilla et, ultricies sed, diam.
-moz-border-radius:6px;
border-radius:6px 5px;
-khtml-border-radius:6px;
-icab-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
Zaokrąglanie rogów wykonane za pomocą CSS nie jest poprawnie interpretowane przez przeglądarkę Internet Explorer (wersja starsza niż 9).

Autor: . Tagi: , , , , , , . Źródło obrazek główny: Pixabay.

9
Dodaj komentarz

avatar
5 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
WojtekSieryComandeerJarekBartosz Stefanicki Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

najnowszy najstarszy oceniany
Wojtek
Gość

Przystępny i przydatny artykuł. Dobra robota

Siery
Gość
Siery

Mam problem z tym "Gecko". Gdzie umieścić taki atrybut?

Bartosz Stefanicki
Gość

Wstaw podany atrybut do arkusza stylów CSS.

Jarek
Gość

Wielka szkoda że firefox jak narazie obsługuje maksymalnie CSS3, inne przeglądarki nie dają rady :(

Comandeer
Gość
Comandeer

Nie powiedziałbym. Poszukaj se choćby obsługi transitions i transforms. Webkit obsługuje to już od jakiś 3 miesięcy, w FF będzie to dopiero od wersji 4.0

Bartosz Stefanicki
Gość

@Comandeer, Mozilla Firefox w wersji 4.0 pojawi się za około 2 miesiące więc nie ma potrzeby kombinowania z obsługą transitions i transforms.

CSS3
Gość

Poprawione, nawet nie wiedziałem, że się zmienił. Swoją drogą można przekierować stare adresy na nowe, robi się to w pliku .htaccess za pomocą modułu mod_rewrite. W przeciwnym razie stracisz wszystkie linki, które prowadziły do tej strony.

CSS3
Gość

Co to za propozycja wspólnego dla wszystkich przeglądarek rozszerzenia "-border"? (autor pisze o tym w podsumowaniu). Autor najwidoczniej nie wie, czym są -moz, -webkit, -icab, -khtml. To są przedrostki których używa się - w omawianym przypadku - tymczasowo i każda przeglądarka, włącznie z IE i Operą stosuje swoje oznaczenia. Przypadek o którym mowa dotyczy właściwości CSS3, które mogą być niestabilne, bo specyfikacja - w tym przypadku moduły których są częścią - nie uzyskały jeszcze statusu rekomendacji W3C. Finalnie wszystkie przedrostki znikną i będziemy pisali tak jak w specyfikacji.

Bartosz Stefanicki
Gość

@CSS3,
Poprawiałem ten artykuł i z rozpędu wstawiłem myślnik przed border-radius - dzięki, teraz się zgadza.

PS. Mógłbyś poprawić link do tego wpisu na swojej stronie? ;-)