środa,
Box shadow
Jedną z nowości w CSS3 był atrybut box-shadow. Dzięki niemu elementy blokowe mogą otrzymywać cień, co wnosi do projektu trzeci wymiar.
Kod HTML
Wszystkie przykłady mają taką samą strukturę kodu HTML.
<div>
<blockquote>
<p>„Człowiek jest uczniem, cierpienie jest jego nauczycielem”</p>
</blockquote>
<cite>–– Alfred de Musset.</cite>
</div>
Przykłady
Atrybut box-shadow może zawierać sześć parametrów. Pierwszy to przesunięcie cienia w poziomie, drugi definiuje odsunięcie w pionie. Mogą one przyjmować wartości ujemne. W poniższym przykładzie nie określono pozostałych parametrów, dlatego przeglądarka przyjęła wartości domyślne – brak rozmycia, czarny kolor cienia, brak skalowania, pozycja na zewnątrz elementu.
div {
box-shadow:10px 10px;
}–– Stephen King, Stukostrachy.„Czasami człowiek sądzi, że ujrzał już dno studni ludzkiej głupoty, ale spotyka kogoś, dzięki komu dowiaduje się, że ta studnia jednak nie ma dna”
Trzeci parametr powoduje, że cień stał się rozmyty. Określono także kolor – cień ma niebieską barwę.
div {
box-shadow:10px 10px 8px blue;
}–– Albert Einstein.„Najgorzej, gdy szkoła ucieka się do takich metod, jak zastraszanie, przemoc czy sztuczny autorytet. Metody te niszczą u uczniów naturalne odruchy, szczerość i wiarę w siebie, czyniąc z nich ludzi uległych”
W kolejnym przykładzie cień został skierowany do wewnątrz elementu (parametr inset).
div {
box-shadow:5px 5px 8px grey inset;
}–– przysłowie hinduskie.„Doświadczenie prowadzi szkołę, w której lekcje są bardzo drogie”
Możliwe jest jednoczesne tworzenie kilku cieni. Grupy wartości oddzielamy przecinkiem.
div {
box-shadow:
3px 3px 8px #aaa inset,
-3px -3px 8px #aaa inset,
10px 10px 10px #aaa,
20px 20px 20px #aaa;
}–– Alfred de Musset.„Człowiek jest uczniem, cierpienie jest jego nauczycielem”
W ostatnim przykładzie pojawił się parametr odpowiedzialny za skalowanie cienia.
div {
box-shadow:
0 -10px 0 -5px brown,
0 -20px 0 -10px orange,
0 -30px 0 -15px yellow;
}–– Gabriel Laub.„Człowiek uczy się przez całe życie, z wyjątkiem lat szkolnych”
