Spisie treści
To jedna z najbardziej oczekiwanych cech nowego standardu CSS3 i że w połączeniu z HTML5 udaje się przyciągnąć wiele spojrzeń, odwołujemy się do Cień Pudełka kto pozwala nam umieszczać cienie na polach w naszym dokumencie HTML, generując w ten sposób efekt, jakby unosił się na stronie.Element Box Shadow musi składać się z następujących elementów:
box-shadow: hoffset voffset rozmycie rozmycie koloru wstawka
Tam, gdzie każdy z jego atrybutów pełni funkcję, przyjrzyjmy się szczegółowo każdemu z nich:
- Przesunięcie: Jest to przesunięcie poziome, które jest wartością długości. Wartość dodatnia zastępuje Cień Pudełka po prawej natomiast wartość ujemna przesuwa Cień Pudełka w lewo.
- Przesunięcie pionowe: Jest to przesunięcie pionowe, które jest wartością długości. Wartość dodatnia przesuwa cień pudełka poniżej pola elementu, a wartość ujemna przesuwa cień pola powyżej pola elementu.
- Plama: (Opcjonalnie) Określa promień definicji cienia, który jest wartością długości. Im wyższa wartość, tym bardziej rozmazana jest krawędź pudełka przedmiotu. Dla domyślnej wartości 0, granica cienia wygląda na w pełni zdefiniowaną.
- Szerzyć się: (Opcjonalnie) Określ promień rozproszenia cienia, jest to miara długości. Wartość dodatnia powoduje, że cień rozszerza się we wszystkich kierunkach pola zawierającego element, a wartość ujemna powoduje kurczenie się cienia elementu zawierającego.
- Kolor: (Opcjonalnie) Jest to kolor cienia. Jeśli zostanie pominięty, przeglądarka zdecyduje o kolorze.
- Wstawka: (Opcjonalnie) Sprawia, że cień jest rzucany wewnątrz ramki elementu, do którego został zastosowany.
Gdy znamy już atrybuty, szybko przejdźmy do przykładu kodu, aby zastosować w praktyce to, czego się nauczyliśmy.
PrzykładIstnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.
Jak widzimy, możemy zastosować Cień Pudełka W CSS wewnątrz tagu style ten kod generuje następujący wynik:
PrzykładIstnieje wiele różnych rodzajów owoców - tylko ponad 500 odmian bananów. Zanim dodamy niezliczone rodzaje jabłek, pomarańczy i innych dobrze znanych owoców, stajemy przed tysiącami wyborów.
Zobaczmy teraz, jak wyświetlają się oba cienie w naszym elemencie:
