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.

road 2672049 1920 Efektowny cień dla czcionki, zdjęcia lub dowolnego znacznika
4.8/5 - (5 votes)

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="https://www.creamsoft.com/wp-content/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="https://www.creamsoft.com/wp-content/uploads/2011/08/header_bg2.jpg"/>

<br /><br />
 
Obrazek bez cienia:<br />
<img class="noshadow" src="https://www.creamsoft.com/wp-content/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 🙂

1 komentarz

  1. MaklerFX

    Efekty cieniowania umiejętnie używane na pewno polepszają jakość strony.

Skomentujesz?

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.