Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

11. CSS3: Zaokrąglanie rogów

11. CSS3: Zaokrąglanie rogów

Autor: Adam Stępień Opublikowano: 24 sierpnia 2011 Odsłon: 17 420

CSS 3 wprowadza wiele ciekawych funkcji i nowości, które bardzo ułatwiają pracę twórcom witryn www. Choć specyfikacja wielu modułów nadal jest w trakcie opracowywania, producenci liczących się na rynku przeglądarek zaimplementowali większość z nich. Internet Explorer 8 był zgodny ze specyfikacją CSS 2.1, natomiast Internet Explorer 9 obsługuje prawie wszystkie funkcje CSS 3. W tym artykule skupimy się na najbardziej oczekiwanej funkcji opisanej w module CSS Backgrounds and Borders Module Level 3, a mianowicie na zaokrąglaniu rogów.

Zaokrągladnie rogów

Do zaokrąglenia obramowania na rogach służy właściwość border-radius. Wypróbujmy ją w najprostszej postaci:

Zaokrąglanie rogów

<!DOCTYPE html>
<html>

<head>
<title>Zaokrąglanie rogów</title>
<style type="text/css">
#test
{
border-radius:20px;
border: 5px #5F9BD1 solid;
width:200px;
height:100px;
background-color: #D6E3EF;
}
</style>
</head>

<body>
<div id="test" />
</body>

</html>

Najprostsza forma zaokrąglenia rogów polega na podaniu jednej wartości border-radius. Wówczas zaokrąglenie każdego rogu obramowania elementu będzie takie samo. Wartość możemy podać jako długość promienia okręgu, który zaokrągli róg. Alternatywnie można podać wartość procentową. Wtedy będzie to wartość względna do wysokości lub długości elementu.

Zaokrąglanie rogów - wyjaśnienie

Zmodyfikujmy teraz nieco kształt każdego rogu z osobna. Lewy górny róg będzie opisany największym okręgiem (promień 100 piksli), prawy dolny róg umiarkowanym (50 piksli), a lewy dolny będzie minimalnie zaokrąglony (10 piksli promień). Prawego górnego rogu natomiast nie będziemy zaokrąglać wcale.

Zaokrąglanie rogów z osobna

<!DOCTYPE html>
<html>

<head>
<title>Zaokrąglanie rogów</title>
<style type="text/css">
#test
{
border-top-left-radius: 100px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 10px;
border: 5px #5F9BD1 solid;
width:200px;
height:130px;
background-color: #D6E3EF;
padding-top:50px;
padding-right:30px;
font-size:20px;
text-align:right;
}
</style>
</head>

<body>
<div id="test">Tekst w divie. Zastosowane różne zaokrąglenia rogów.</div>
</body>

</html>

Zamiast korzystać z czterech właściwości przeznaczonych kolejno dla lewego górnego, prawego górnego, lewego dolnego i prawego dolnego rogu, można użyć skrótu w postaci czterowartościowej wartości border-radius. Ten sam efekt można uzyskać wpisując tylko jedną linię kodu:

border-radius:100px 0 50px 10px;

Do tej pory do wyznaczania kształtu rogu słyżył nam okrąg o zadanym promieniu. Teraz poznamy możliwość zaokrąglania rogów w CSS3, używając elipsy. W tym wypadku nie wystarczy podać jedną wartość promienia, tylko dwie: dla szerokości i wysokości.

Składnia nie jest wcale taka skomplikowana. Podajemy cztery wartości promienia elipsy wzdłuż osi X, wstawiamy tzw, slash "/" i podajemy cztery wartości promienia elipsy wzdłuż osi Y.

border-radius:40px 40px 80px 80px/20px 20px 40px 40px;

Zaokrąglanie rogów - rozszerzenie

 

A oto pełny kod:

<!DOCTYPE html>
<html>

<head>
<title>Zaokrąglanie rogów</title>
<style type="text/css">
#test
{border-radius:40px 40px 80px 80px/20px 20px 40px 40px;
border: 5px #5F9BD1 solid;
width:200px;
height:100px;
background-color: #D6E3EF;
}
</style>
</head>

<body>
<div id="test" />
</body>

</html>

 

Na koniec ważna uwaga dla tych, którzy od dawna śledzą nowości w CSS3. Zapewne nieobce są Wam prefiksy -moz, -webkit itd. Póki specyfikacja nie uzyskała statusu kandydata do rekomendacji, każdy producent implementuje funkcję po swojemu i czasem mogą powstać rozbieżności w uzyskiwanych efektach. Dlatego organizacja W3C - jako ciało standaryzujące - zalecała każdemu producentowi, tj. firmie Microsoft, fundacji Mozilla itd. dodawanie tych przedrostków. W rezultacie zamiast jednego border-radius do niedawna trzeba było pisać kilka linii kodu rozszerzonych o kolejne implementacje przeglądarek: -moz-border-radius, -webkit-border-radius itd. Obecnie nie ma już takiej potrzeby. Standardowa właściwość border-radius jest całkiem poprawnie wyświetlana w najnowszych przeglądarkach. Mowa tu o Internet Explorer 9, Firefox 5, Opera 11.50 i Chrome 13.

Zobacz również

Komentarze

CSS3 i HTML5 nie jest czymś nowym. Już kilka miesięcy temu próbowałem i tylko browser "Safari" właściwe interpretował CSS3. Nie jestem zaawansowanym WEB masterem. Mam swoją darmową stronkę z podobnym przykładami. Podobno "Google Chrome" też wyświetla prawidłowo w/w pliki html. Ja sobie narazie odpuściłem Zgadzam się, temat wart zainteresowania i oby jak najszybciej w każdej przeglądarce widać było to samo. Ma to zadanie spełnić HTML5. To też istotne dla mnie początkującego - z rocznym stażem. Nie trzeba będzie sprawdzać, przy pisaniu strony, w każdej przeglądarce. To tyle, na ile moja wiedza na ten temat pozwala mi przedstawić własną opinię. Mail: andrzej_gajda@wp.pl
Andrzej, 29 sierpnia 2011, 09:55

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.