Efektowny cień dla czcionki, zdjęcia lub dowolnego znacznika

CSS3 i HTML 5 oferują własności umożliwiające proste dodawanie atrakcyjnych efektów specjalnych do elementów umieszczanych na stronie WWW. Jednym z takich często używanych ostatnio efektów jest cień. Oto jak prosto skorzystać z tego tricku.

Dodanie cienia do elementu wymaga określenia kilku parametrów stylu. Styl taki dla przejrzystości najlepiej umieścić w osobnym arkuszu stylów jako klasę, do której można się odwołać z kodu HTML w dowolnym miejscu lub miejscach. Oto przykładowy kod:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.shadow {
    -webkit-box-shadow: 0 3px 5px #333;
    -moz-box-shadow: 0 3px 5px #333;
    box-shadow: 0 3px 5px #333;
    padding: 5px;
}
</style>
</head>
<body>

<span class="shadow">BANNER Z CIENIEM</span>

</body>
</html>

Ten sposób dodawania cienia można wykorzystać również do obrazków czy innych elementów, np. poniższy kod stosuje cień do wszystkich obrazków, jakie będą znajdować się na stronie (jak widać nie trzeba wówczas podawać nazwy klasy):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img {
    -webkit-box-shadow: 0 3px 5px #333;
    -moz-box-shadow: 0 3px 5px #333;
    box-shadow: 0 3px 5px #333;
    padding: 5px;
}
</style>
</head>
<body>

<img src="/blog/uploads/2011/08/header_bg2.jpg"/>

</body>
</html>

A co jeśli jakiś obrazek chcielibyśmy wyświetlić bez tego efektu w tym samym dokumencie? Wystarczy dodać klasę niwelującą efekt i zastosować ją na wybranym obrazku:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img {
    -webkit-box-shadow: 0 3px 5px #333;
    -moz-box-shadow: 0 3px 5px #333;
    box-shadow: 0 3px 5px #333;
    padding: 5px;
}
img.noshadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
</style>
</head>
<body>
 
Obrazek z cieniem:<br />
<img src="/blog/uploads/2011/08/header_bg2.jpg"/>

<br /><br />
 
Obrazek bez cienia:<br />
<img class="noshadow" src="/blog/uploads/2011/08/header_bg2.jpg"/>
 
</body>
</html>

Jak widać prostym sposobem można uzyskać ciekawe efekty. Zachęcam do poeksperymentowania z wartościami znajdującymi się w kodzie stylu CSS. Zmiana tych parametrów pozwala na uzyskanie całkowicie odmiennych efektów.

A co jeśli chcielibyśmy nadać efekt cienia tylko dla tekstu, bez prostokąta bloku, w którym jest zawarty? Do tego również służy własność CSS3 o nazwie text-shadow. Oto przykład, który pokazuje efekt ukrycia tekstu poprzez zamazanie jego treści rozmyciem.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
.blur {
    color: transparent;
    text-shadow: 0 0 10px rgba(0,0,0,0.9);
}
</style>
</head>
<body>

<h1>Ten tekst jest <span class="blur">ukryty</span> ale pewnie potrafisz go odczytać...</h1>

</body>
</html>

Wszystkie opisane tu efekty pomoże Ci wprowadzić do swojego kodu nasz program do tworzenia stron WWW i aplikacji Pajączek, który za pewne juz znasz :-)