Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Box shadow

ś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;
}

„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”

–– Stephen King, Stukostrachy.

Trzeci parametr powoduje, że cień stał się rozmyty. Określono także kolor – cień ma niebieską barwę.

div {
	box-shadow:10px 10px 8px blue;
}

„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”

–– Albert Einstein.

W kolejnym przykładzie cień został skierowany do wewnątrz elementu (parametr inset).

div {
	box-shadow:5px 5px 8px grey inset;
}

„Doświadczenie prowadzi szkołę, w której lekcje są bardzo drogie”

–– przysłowie hinduskie.

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;
}

„Człowiek jest uczniem, cierpienie jest jego nauczycielem”

–– Alfred de Musset.

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;
}

„Człowiek uczy się przez całe życie, z wyjątkiem lat szkolnych”

–– Gabriel Laub.
Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły