O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Zaokrąglone narożniki, czyli o tle część 3

Specyfikacja CSS zawiera różne wytyczne odnośnie tego jakie cechy i w jaki sposób możemy opisywać w arkuszach stylów. Dzisiaj zajmę się zaokrąglonymi narożnikami czyli czymś co nie istniało w starszych specyfikacjach CSS a co od dawna przeglądarki potrafią zastosować.

border-radius

Zaokrąglone narożniki, mimo iż związane z ramkami, wyświetlają się niezależnie od nich. Można więc zaokrąglać narożniki elementów nie posiadających ramek. Dlatego też border-radius nie jest związany z cechą border i nie dodaje się go do skróconego opisu ramek. Jest natomiast ściśle związany z tłem i w tym sensie ramki jako część tła są cechą towarzyszącą border-radius. Ujmując to jeszcze prościej aby można było zaokrąglać narożniki elementu musi on posiadać tło albo ramki (mogą być obie rzeczy może być tylko jedna ale ta jedna MUSI być koniecznie).

Border-radius mimo iż jest cechą specyfikacji CSS3 modułu tła i ramek, który to moduł nie jest jeszcze oficjalną rekomendacją i ma aktualnie (listopad 2011) status rekomendacji kandydującej (następny etap to rekomendacja proponowana a wyżej jest już tylko oficjalna rekomendacja W3C) to jednak prace nad zaokrąglaniem narożników trwają od tak dawna, że najnowsze wersje przeglądarek przestały już nawet używać prefiksów. Do tematu prefiksów jeszcze wrócę zacząć wypadałoby jednak od najprostszych wyjaśnień.

Aktualnie obowiązującą jest CSS2.1 i elementy w niej opisane są w pełni do zastosowania w projektowaniu własnego szablonu. Prace nad CSS3 przebiegają od bardzo dawna i są podzielone na moduły. Pozwoli to ogłosić zakończenie prac nad jedną z części nawet jeżeli pozostałe jeszcze nie są gotowe. Dodatkowo ewentualne zmiany można będzie przygotowywać dla poszczególnych modułów osobno.

CSS: moduł tła i ramek poziom 3

Zaokrąglenie narożnika border-radius

Właściwość odpowiadająca za zaokrąglone rogi. Aby uzyskać jakikolwiek efekt, należy elementowi który chcemy zaokrąglić nadać tło albo obramowanie. Musi wizualnie istnieć coś co będziemy zaokrąglać.

img {
 background:#f7f3ec;
 border:1px solid #ede4d5;
 border-radius:10px;
}

stylowy favicon

W przypadku mojego stylowego bloga i archiwum tam umieszczonego wygląd pojedynczego za elementu odpowiedzialne są między innymi ciemne tło, jaśniejsza przerywana linia ramki i zaokrąglenie wielkości 4px. Bardzo prosty styl a efekt całkiem oryginalny. Dokładny zapis wyglądu tła pojedynczego elementu archiwum wygląda tak:

#tresc-poboczna #archiwum li {
 background: #2f251c url(/resource/skm_bg_2f251c.jpg) center repeat;
 border: #584636 1px dashed;
 border-radius: 4px;
}

Wartości. Wielkość zaokrąglenia możemy podawać w dowolnych jednostkach. Mogą to być piksele, firety czy nawet centymetry. Pozwala to dokładnie dostosować wielkość zaokrąglenia do uprzednio opisanych cech związanych z tłem czyli background border.

img {
 border-radius:10px;
}

img {
 border-radius:10ex;
}

Procenty. Specjalną wartością będą procenty. O ile pozostałe, także względne jednostki odnoszą się do innych elementów i na ich podstawie ustalają zaokrąglenie to tyle procenty swoją wielkość odnoszą do wielkości elementu z zaokrąglonymi narożnikami. Poniżej dodałam zaokrąglone narożniki zarówno do ilustracji jak i do pola z kodem CSS. Ilustracja jest kwadratowa a pole z kodem podłużnie prostokątne. Ta sama wartość właściwości a efekt zaokrąglenia zupełnie różny.

stylowy favicon img {
 border-radius:50%;
}

Wartość procentowa zaokrąglenia pozwala na uzyskanie idealnie zaokrąglonego elementu przypominającego przycisk i właśnie w takich przypadkach najlepiej się sprawdzi ale wykorzystanie jest zupełnie dowolne.

nazwa właściwości border-radius
border-top-left-radius, border-top-right-radius,
border-bottom-right-radius, border-bottom-left-radius
znaczenie zaokrąglenie narożnika
wartość wartość absolutna bądź procenty
wartość domyślna 0
można stosować do wszystkich elementów posiadających tło bądź ramkę (wyjątek stanowią komórki tabeli gdy ich ramki są połączone (border-collapse:collapse)
dziedziczenie nie

Zaokrąglenie pojedynczego narożnika border-*-*-radius

Zaokrąglać możemy każdy narożnik osobno.

img {
 border-top-left-radius: 5px;
 border-top-right-radius: 30px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 20px;
}

Taka różnorodność jest zazwyczaj zupełnie zbędna ale możliwość opisania pojedynczego narożnika jest bardzo przydatna. Pozwala tworzyć oryginalne rozwiązanie.

img {
border-radius: 20px;
border-top-left-radius: 0;
}

Taki wygląd można opisać też inaczej, border-radius jest do pewnego stopnia typowym zapisem zbiorowym. Powyższy kod można zapisać zbiorowo i będzie on wtedy wyglądał tak (chociaż ostatnie 20px nie jest już niezbędne):

img {
border-radius: 0 20px 20px 20px;
}

Wpisując jedną wartość mówimy przeglądarce, że wszystkie rogi mają tak samo wyglądać. Wpisując cztery nakazujemy jej opisywanie narożników wg klucza, który w CSS mówi, że opisywanie zaczynamy od lewego górnego rogu. Czyli pierwsza wartość to górny-lewy, druga górny-prawy, trzecia dolny-prawy a czwarta dolny-lewy. Jeżeli wpiszemy tylko trzy wartości to ostatnią, dolny-lewy przeglądarka dopowie sobie i zrobi symetrycznie takie samo zaokrąglenie jak w przypadku górnego-prawego. Gdy przy właściwości są tylko dwie wartości kolejność jest ta sama a przeglądarka dopowiada sobie naprzeciwległe narożniki.

border-radius: 10px;

Różne zaokrąglenie pojedynczego narożnika border-*-*-radius

Kolejnym tematem związanym z zaokrąglaniem narożników jest różne zaokrąglenie pojedynczego narożnika. O ile do tej pory opisywałam całkiem proste rozwiązania o tyle teraz dochodzimy do bardziej kłopotliwych. Skoro mamy narożnik oznacza to, że łączą się w nim dwie linie pozioma i pionowa i CSS umożliwia nam opisanie parametrów dla każdej z nich osobno. Tym razem wizualizacja wydaje się być niezbędna ale wbrew mojemu zawiłemu wyjaśnieniu rzecz jest całkiem prosta.

border-radius: 80px 50px;

W przypadku określania położenia niejako wg osi współrzędnych zawsze najpierw podajemy położenie w poziomie (oś X) a potem w pionie (oś Y), dokładnie w tej samej kolejności określa się np położenie tła (background-position). W powyższym przykładzie górna linia (która ułożona jest poziomo) zaczyna zakrzywiać się na 80px a lewa (ułożona pionowo) już na 50px. Nie tyle chodzi tu o odstęp od krawędzi ale o długość zakrzywienia.

img {
border-radius:20px;
border-top-left-radius:80px 50px;
}

W powyższym przykładzie zaokrągliłam wszystkie narożniki ale tylko jeden w tak specyficzny sposób. Pora na kilka przykładów na żywo.

img {
 border-width:15px;
 border-radius:30px;
 border-top-right-radius:50px 30px;
 border-bottom-right-radius:50px 30px;
}


img {
 border-top-left-radius:80px 15px;
 border-top-right-radius:80px 15px;
}


img {
 border-width:5px;
 border-style:dashed;
 border-top-right-radius:50px;
 border-bottom-right-radius:50px 20px;
}


Różne zaokrąglenie pojedynczego narożnika, zapis skrócony border-radius

Tutaj dochodzimy do najbardziej kłopotliwej części. Zazwyczaj zapis skrócony to nazwa cechy pozbawiona określenia o którą część opisywanego elementu nam chodzi a wartość wpisujemy dokładnie tak samo jak w przypadku pojedynczej części. Tutaj nie będzie tak łatwo. Pojedynczo zapisalibyśmy wygląd narożników w ten sposób.

img {
 border-top-left-radius: 20px 60px;
 border-top-right-radius: 40px 10px;
 border-bottom-right-radius: 80px 60px;
 border-bottom-left-radius: 40px 10px;
}

przykład

W postaci jednolitej i skróconej zaokrąglenia poziome od pionowych należy oddzielić ukośnikiem. Powyższy kod zapisany przy jednej właściwości wyglądać będzie tak:

img {
 border-radius: 20px 40px 80px 40px / 60px 10px 60px 10px;
}


W związku z tym, że niektóre wartości się powtarzają możemy zapis jeszcze bardziej skrócić:

img {
 border-radius: 20px 40px 80px / 60px 10px;
}


Podając zbiorczo dwa parametry dla jednego narożnika niezbędne jest rozdzielenie ich ukośnikiem, nawet jeżeli podajemy tylko dwie wartości: dla linii poziomych i dla pionowych.

img {
 border-color:crimson;
 border-radius: 80px / 20px;
}


Bez tej jednej kreseczki otrzymujemy coś zupełnie innego

img {
 border-color:crimson;
 border-radius: 80px 20px;
}



Pod żadnym pozorem nie polecam takiej różnorodności zaokrągleń ale dodając nieco harmonii i porządku można swobodnie stosować te rozwiązania. Oczywiście przeglądarki mogą na takie kody różnie reagować. Przykładowo Internet Explorer obsługuje zaokrąglone narożniki od wersji 9, Mozilla Firefox 8 niezbyt ładnie zaokrągla ramki robione przerywaną linią (fragment zaokrąglenia zrobiony jest linią ciągłą). Przeglądarki na silniku webkit (Chrome i Safari) zaokrąglając rogi ilustracji nie zaokrąglają dopełnienia, tylko je ścinają. Safari w wersji 5.0.2 nie zaokrągla narożników gdy wartość zaokrąglenia podana jest w procentach. Różnice w interpretacji specyfikacji zawsze są. W przypadku nowych rzeczy wydają się być nieco bardziej widoczne.

Jeżeli zależałoby ci bardzo na zaokrąglonych narożnikach a bez nich szablon uznałbyś za niewart uwagi to do border-radius należy w dalszym ciągu podchodzić z bardzo dużą ostrożnością. W zasadzie często jest tak, że zanim specyfikacja nie uzyska statusu rekomendacji aby korzystać z nowych cech trzeba używać prefiksów. Im bardziej zaawansowane są prace nad daną cechą tym większe jednak prawdopodobieństwo, że tego prefiksu można się bezpiecznie pozbyć. Nie zawsze ale jednak bardzo często. Wszak moduł tła i ramek, w którym border-radius jest opisany w dalszym ciągu jest rekomendacją kandydującą.

Prefiksy

Sposobem na starsze wersje przeglądarek, takim magicznym mykiem są właśnie prefiksy. Są to przedsłowa które wskazują na konkretna przeglądarkę/silnik i pozwalają jej projektantom i programistom pracować nad wyglądem danej cechy w czasie gdy fundacja W3C pracuje jeszcze nad specyfikacją. To jest fajny myk bo pozwala wyprzedzić teraźniejszość  dotknąć przyszłości, z drugiej strony wymaga to sporo dodatkowego kodu i często takie prefiksowanie mnie irytuje.

Dodając kody z prefiksami należy pamiętać aby dodać je przed własciwym kodem zgodnym z przyszłą specyfikacją. Pozwoli to, gdy właściwość będzie już dobrze zaimplementowana, zastąpić definicję kodu z prefiksem tą właściwą. Informacje dotyczące dostępności podaję za MDN.

-moz-border-radius silnik Gecko, przeglądarka Mozilla Firefox

Najprostsze zaokrąglenia dostępne już były w Firefox 1, nawet także określona za pomocą procentów choć początkowo rozwiązanie zastosowane w Firefoksie nie było zgodne z zaleceniami. Można było natomiast określać zaokrąglenia osobno dla każdego narożnika. Od wersji 3.5 doszły zaokrąglenia elpityczne (różne parametry dla zaokrągleń linii poziomych i pionowych). Od wersji Firefox 4 można już nie używać prefiksu (korzystając z prefiksu w Firefoksie nieco inaczej zapisywało się właściwości dla poszczególnych narożników).

img {
 border:5px dashed crimson;
 -moz-border-radius: 80px / 20px;
}


-webkit-border-radius silnik Webkit, przeglądarka Google Chrome

Zaokrąglenia wpisane z prefiksem dostępne są już od wersji 0.2 można je wyrażać w procentach i to osobno dla każdego z czterech rogów. Od wersji 4.0 nie trzeba używać prefiksu i można tworzyć zaokrąglenia eliptyczne. Aby w różny sposób zaokrąglić narożniki w starszych wersjach, wykorzystujących prefiks, konieczne jest ich osobne zapisanie ze względu na brak obsługi oddzielenia ukośnikiem.

img {
border:5px dashed crimson;
-webkit-border-top-left-radius:80px 20px;
-webkit-border-top-right-radius:80px 20px;
-webkit-border-bottom-right-radius:80px 20px;
-webkit-border-bottom-left-radius:80px 20px;
}


silnik Trident, przeglądarka Internet Explorer

Bardzo długi czas przeglądarka ta nie obsługiwała zaokrągleń w ogóle. Od wersji 9.0 robi to w wersji pozbawionej prefiksu i zgodnej ze specyfikacją, czyli procenty, osobne opisy dla każdego z czterech rogów i zaokrąglenia eliptyczne.

img {
border:5px dashed crimson;
border-radius: 80px / 20px;
}


silnik Presto, przeglądarka Opera

Od wersji 10.5 Opera obsługuje zaokrąglone narożniki zarówno dla wszystkich czterech rogów osobno jak i osobno dla linii poziomych i pionowych (zaokrąglenia eliptyczne). Zaokrąglenia procentowe zostały dodane dopiero w wersji 11.5

img {
border:5px dashed crimson;
border-radius: 80px / 20px;
}


-webkit-border-radius silnik Webkit, przeglądarka Safari

Z prefiksem Safari obsługuje zaokrąglenia już od wersji 3.0 jednak tylko w najprostszej formie. Można określać zaokrąglenia elpityczne (inne wartości dla linii poziomych i pionowych) ale podobnie jak w przypadku Chrome, korzystając z prefiksu trzeba opisać każdy narożnik osobno. Od wersji 5.0 można zrezygnować z prefiksu a od wersji 5.1 można uzywać wartości procentowych.

img {
border:5px dashed crimson;
-webkit-border-top-left-radius:80px 20px;
-webkit-border-top-right-radius:80px 20px;
-webkit-border-bottom-right-radius:80px 20px;
-webkit-border-bottom-left-radius:80px 20px;
}



Na dzisiaj to aż nadto informacji i przykładów. Można to było oczywiście przedstawić w znacznie krótszy sposób, chciałam jednak opisać i pokazać wszystkie możliwości zapisu. Nie zmienia to jednak faktu, że do zrobienia zaokrąglonych narożników wystarczy bardzo niewielki i prosty kod. Nawet jeżeli dodamy fragmenty z prefiksami dla starszych wersji przeglądarek to kod chociaż nieco większy w dalszym ciągu będzie prosty. Mam nadzieję, że notka mimo swej nieracjonalnej objętości przyda się.

Na koniec odsyłam do podstawowego źródła wiedzy czyli W3C:CSS Backgrounds and Borders Module Level 3 (CR). Półtora roku temu Irytek krótko i treściwie opisała zaokrąglone narożniki. Wpis dalej aktualny, zmieniło się tylko to, że prefiksy dla innych przeglądarek nie są już niezbędne.

Wszystkie lekcje dotyczące cech CSS można znaleźć pod tagiem właściwości CSS. Jeżeli interesują cię tylko właściwości tła to zapraszam do tagu cechy tła. Lekcje są szczegółowe i zawierają wiele różnych przykładów.

  1. Co jest czym w CSS czyli budowa stylu
  2. Określamy tło, część 1
  3. Ramka jako dodatek do tła, część 2
  4. Zaokrąglone narożniki, czyli o tle część 3
  5. Cień dla elementu, czyli o tle po raz kolejny (część 4)
poniedziałek, 09 stycznia 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: Gaijin, *.215.195.97-internet.zabrze.debacom.pl
2012/01/11 11:00:00
Dzięki za artykuł. Usunąłem border-radius dla firefoxa opery itp
Mam tak:
border: 1px solid black;
border-radius: 10px 0 0 10px;
Działa we wszystkich przeglądarkach i przechodzi teraz przez validator CSS3 i dzięki temu mam 100% zgodności.
-
kate_mac
2012/01/11 13:34:18
@Gaijin
Również wydaje mi się, że na tym etapie nie ma potrzeby bawić się prefiksami. Wszystkie aktualne przeglądarki dopuszczają zaokrąglanie narożników. Problemem będą te nieaktualizowane. Czasami przeglądając statystyki zadziwia mnie obecność sporej liczby wejść przez wyjątkowo nieaktualną przeglądarkę. To się oczywiście stale zmienia. Na szczęście. CSS3 daje bardzo duże możliwości a zaokrąglenie narożników to zaledwie drobny szczególik i to niezbyt rewolucyjny.
-
karolinarydzinska
2012/01/12 20:03:44
Czy jest możliwość zamówienia u Ciebie szablonu?? Pozdrawiam
-
kate_mac
2012/01/14 13:47:02
@karolinarydzinska
Oczywiście, zapraszam do kontaktu mailowego: szablonykatemac@gmail.com (ewentualnie na gazetową pocztę pod tym loginem)
-
karolinarydzinska
2012/01/16 13:49:13
Wysłałam maila na podany adres :)
-
Gość: , *.dynamic.chello.pl
2012/02/02 11:32:42
Witaj, czy mój mail na poczte ,,gazetową" doszedł? Z tej drugiej jak wysyłam wraca do mnie :( pozdrawiam
-
vanilia81
2012/02/03 18:57:56
o maila pytała Vanilia 81 :)
-
kate_mac
2012/02/04 18:28:30
@vanilia81
hmm nie jestem pewna, owszem przyszedł do mnie 23 godziny temu mail z adresu nie gazetowego podpisany Aga Sz. jeżeli to Ty to tak dostałam Twojego maila; odpisze na niego przy najbliższej okazji jednak zawiera on sporo pytań na które proste tak czy nie nie wystarczy za odpowiedz więc przygotowanie maila chwilkę potrwa i nie jestem pewna czy wyślę go dzisiaj czy po weekendzie

@karolinarydzinska
odpisałam
-
vanilia81
2012/02/05 22:11:29
Tak Kate to ja ;) najważniejsze, że doszedł, nie chce Ci głowy zawracać odpisz jak znajdziesz chwilkę. Będę zobowiązana ;)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...