Artykuł

sie 24 2011
0

Cienie i zaokrąglenia w CSS3

Webmasterzy praktycznie od zawsze próbowali polepszyć warstwę wizualną swoich witryn, dzięki czemu strony stawały się bardziej atrakcyjniejsze dla potencjalnych odbiorców. Dotychczas większość tricków, takich jak tytułowe cienie i zaokrąglenia realizowano za pomocą programów graficznych. Co mniej sprawni graficznie webmasterzy (lub Ci, którzy niemili pod ręką żadnego grafika), musieli obejść się smakiem. Sytuacja jednak się zmieniła w ostatnim czasie za sprawą CSS3, który elementy tego typu ma zapisane w swojej specyfikacji.

Wprowadzenie

CSS3, nie jest jednak pierwszą przymiarką do programowej obsługi cieni i zaokrągleń. Wcześniej swoich sił w tym wymiarze, próbowali twórcy silników Gecko (Mozilla) i WebKit (m.in. Chrome, Safari). Efekty w tych przeglądarkach, możliwe były dzięki zastosowaniu specjalnych przedrostków przy nazwach właściwości, a były to:

  • -moz - dla silnika Gecko
  • -webkit

W ten sposób powstawały właściwości np.:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;

Które pozwalały na obsługę zaokrąglonych krawędzi.

Jeśli spojrzymy na to z dzisiejszej perspektywy, to takie rozwiązanie ma praktycznie same wady. Co prawda osiągamy zamierzony efekt, ale:

  • Działa on tylko na wybranej rodzinie przeglądarek (czasem nawet na jednej przeglądarce)
  • Tworzony przez nas kod staje się chaotyczny, przez różne dziwne właściwości
  • Jeśli chcemy uzyskać ten sam efekt na wszystkich przeglądarkach to i tak musimy postarać się o rozwiązanie zastępcze

Użycie CSS3 w dzisiejszych czasach, powoli rozwiązuje problem. Co prawda wciąż na rynku istnieją np. starsze wersje Internet Explorera, ale na naszym polskim rynku jest już to coraz mniejszy procent i jeśli (jak już to wielokrotnie podkreślałem) nie tworzysz strony dla korporacji, to możesz spróbować się pokusić o nowe rozwiązania.

Okrągłe krawędzie - border-radius

Przykład zastosowania okrągłych krawędzi - właśnie przy użyciu border-radius możecie znaleźć na stronie głównej Alt Control Delete (chodzi o przyciski wykorzystane przy stronicowaniu). Generalnie składnia jest następująca:

border-radius: value;

Gdzie słowo value należy zastąpić odpowiednią liczbą wyrażoną w pikselach/punktach/jednostce em/procentach.

div{
	border-radius: 15px;
	border: 1px solid #000;
}

Tak wykonany zapis, będzie się odnosić do wszystkich krawędzi wybranego elementu. Pamiętajmy również, że aby uzyskać efekt zaokrąglenia, konieczne jest ustalenie przynajmniej jedno pikselowej grubości krawędzi, przy pomocy właściwości border.

Jeśli chcemy zastosować różne zaokrąglenia dla każdego rogu, to możemy skorzystać z następującej konstrukcji:

div{
	border-radius: 10px 15px 20px 25px;
	border: 1px solid #000;
}

Tak zapisany kod działa zgodnie ze wskazówkami zegara, czyli najpierw lewy górny róg, później: prawy górny róg, prawy dolny róg i lewy dolny róg. Kod ten jest skróconą wersją zapisu:

div{
	border-top-left-radius: 10px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 25px;
	border: 1px solid #000;
}

Można również zastosować formę skróconą, dwuelementową:

div{
	border-radius: 10px 20px;
	border: 1px solid #000;
}

Pierwsza wartość dotyczy lewego górnego i prawego dolnego rogu, druga dwóch pozostałych.

Wsparcie przeglądarek: IE9+, Firefox 4+, Chrome, Safari 5+ i Opera

W3Schools: Border-radius

Cienie - box-shadow

Drugą z atrakcji, którą chciałem Wam dziś zaprezentować, są cienie. Cienie są również obecne na Alt Control Delete i powinniście je dostrzec przy szarej belce nagłówka i stopki.

Aby skorzystać z cieni, musimy użyć właściwości box-shadow:

div{
	box-shadow: h-shadow v-shadow blur[opcja] spread[opcja] 
        color[opcja] inset[opcja];
}

Przyjrzyjmy się bliżej poszczególnym elementom:

  • h-shadow - pozioma pozycja cienia, możliwe wartości ujemne oraz 0
  • v-shadow - pionowa pozycja cienia - użycie j/w
  • blur - opcjonalna wartość rozmazania wyrażona w standardowych jednostkach
  • spread - opcjonalny rozmiar cienia, wyrażony w standardowych jednostkach
  • color - opcjonalny kolor cienia
  • inset - przełącznik pomiędzy cieniem wewnętrznym/zewnętrznym

Przykładowe użycie:

div{
	box-shadow: 0 0 5px #999999;
}

Wsparcie przeglądarek: IE9+, Firefox 4, Chrome i Opera

W3Schools: Box-shadow

Data ostatniej modyfikacji: 28.11.2011, 18:34.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus