Na stronie używamy cookies. Korzystanie z witryny oznacza zgodę na ich wykorzystywanie. Szczegóły znajdziesz w Polityce Prywatności.

Nie możesz znaleść dodatku który chciałbyś umieścić na swojej stronie lub blogu? Napisz do nas - postaramy się przygotować taki dodatek i poinformujemy Cię o tym na maila:

Dodatki
Liczniki
Pogoda

Jak dodać cienie w CSS?

CSS pozwala nadać cień różnym elementom na stronie internetowej.

Dodanie cienia dla tekstu

np. p { text-shadow: poziom pion }

Wartości poziom i pion określają własności cienia i muszą być podane obowiązkowo:
poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)

Opcjonalnie można również ustawić:
rozmycie - promień efektu rozmycia
kolor - kolor bazowy efektu

Przy ustawianiu wartości poziom, pion oraz rozmycie używa się jednostek długości.

Można ustawić więcej niż jeden efekt - efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania i nałożone na siebie.

Dodanie cienia obramowaniu

np. h1{ box-shadow: inset poziom pion } - cień wewnątrz elementu
h1{ box-shadow: outset poziom pion } - cień na zewnątrz elementu

Podobnie jak przy ustawianiu cienia przy tekście tuaj również wartości poziom i pion są obowiązkowe. Opcjonalnie można ustawiać rozmycie, kolor i rozprzestrzenienie. Ten ostatni parametr to odległość na jaką cień ma wychodzić spod krawędzi elementu, a dla wartości ujemnych chować cień pod elementem.

Aby wstawić cień można również użyć filtru
np. h1 { filter: DropShadow(Color=kolor, OffX=x, OffY=y, Positive=typ) }

kolor-kolor cienia
x-liczba pikseli o które ma zostać przesunięty cień w poziomie (wartości dodatnie przesuwają w prawo, ujemne - w lewo)
y-liczba pikseli o które zostanie przesunięty cień w pionie (wartości dodatnie przesuwają w dół, ujemne - w górę)
typ-sposób tworzenia cienia (1 - cień będzie tworzony z kolorów elementu, które nie są przezroczyste, 0 - cień będzie tworzony z koloru przezroczystego. Domyślnie jest 1.)

Za pomocą filtru można ustawić również rozmyty cień
h1 { filter: Shadow(Color=kolor, Direction=kierunek) }

Kierunek cienia w stopniach (zgodnie z ruchem wskazówek zegara względem pionu):
0 - góra
45 - góra, prawo
90 - prawo
135 - dół, prawo
180 - dół
225 - dół, lewo (domyślny)
270 - lewo
315 - góra, lewo

Ocena:
2.5
Twoja ocena:
Więcej w tej kategorii

Powiadomienia o nowych dodatkach