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ł.
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.
Przeglądarka Opera jest jedną z nielicznych, która obsługuje wspomnianą funkcjonalność. Mozilla Firefox, Galeon i Netscape - browsery oparte o silnik Gecko, umożliwiają uzyskanie zbliżonych efektów przy pomocy wewnętrznej funkcji -moz-border-radius (mozilla border-radius). CSS3 w przeglądarce Internet Explorer zadebiutuje dopiero w wersji 8.
Przekonajmy się zatem, jak te wszystkie metody połączyć w jedną, działającą ze wszystkimi przeglądarkami.
#1: Gecko
-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
W chwili obecnej zdecydowana mniejszość przeglądarek internetowych poprawnie interpretuje w całości CSS3. Jednak dla tych, co chcą zobaczyć jak to wszystko będzie wyglądało:
border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
border-radius:6px 5px;
- 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
#3: iCab w Macu
-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
-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
-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
border-radius:6px 5px;
-khtml-border-radius:6px;
-icab-border-radius:6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
Jak widzicie trochę tego jest, wynika to z różnorodności rynku przeglądarek. Zaczekamy na selektor border-radius dostępny w CSS3, wówczas tymczasowe rozszerzenia nie będą miały racji bytu.
Zaokrąglanie rogów wykonane za pomocą CSS nie jest poprawnie interpretowane przez przeglądarkę Internet Explorer (wersja starsza niż 9).
Podobne porady
- 100+ skrótów klawiaturowych w Windows
- Nowy układ graficzny w wyszukiwarce Google
- Zamiana znaków Z i Y na klawiaturze
Komentarze (8)
-
@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? ;-)
-
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.
-
Wielka szkoda że firefox jak narazie obsługuje maksymalnie CSS3, inne przeglądarki nie dają rady :(
-
Comandeer pisze:
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
-
@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.
-
Siery pisze:
Mam problem z tym "Gecko". Gdzie umieścić taki atrybut?
Reklama
Przeglądaj porady
Najpopularniejsze
Prosty skrypt galerii zdjęć z efektem Highslide
124 komentarzy
Prosty formularz kontaktowy w PHP
26 komentarzy
Zaokrąglanie rogów bez użycia grafik
8 komentarzy
Ostatnie komentarze
Mateusz: Ok dodam moje pytanie jako zdjęcie bo co dod... Prosty skrypt galerii zdjęć z efe...
Tagi
Linux Ubuntu ajax cms skróty Internet Explorer formatowanie tekstu formularze internet Mozilla Firefox Google ustawienia systemowe mikroblog system operacyjny strona internetowa skrypty
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.