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.

Trzy miesiące temu na naszej stronie…

Artykuł: Intel Core i9

Intel Core i9

Artykuł: Święto Lotnictwa Polskiego

Święto Lotnictwa Polskiego

Artykuł: Utworzenie Marynarki Wojennej

Utworzenie Marynarki Wojennej

Artykuł: Dzień, w którym słońce zaszło w&nbsp;południe

Dzień, w którym słońce zaszło w południe

Artykuł: GeForce 300

GeForce 300

Artykuł: Sega Dreamcast

Sega Dreamcast

Artykuł: Jacob Ziv

Jacob Ziv

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły