wtorek,
CSS: Cień elementu
Cienie w CSS mogą być dodawane do elementów za pomocą właściwości box-shadow dla cieni blokowych i text-shadow dla cieni tekstu. Te właściwości pozwalają znacząco wpłynąć na wygląd i czytelność elementów na stronie.
1. Box Shadow
Właściwość box-shadow służy do dodawania cienia do elementów blokowych, takich jak div, button itp.
Składnia
box-shadow: h-offset v-offset blur spread color;
- h-offset (poziomy przesunięcie): określa poziome przesunięcie cienia.
- v-offset (pionowe przesunięcie): określa pionowe przesunięcie cienia.
- blur (rozmycie): określa stopień rozmycia cienia.
- spread (rozprzestrzenianie): określa, jak bardzo cień się rozprzestrzenia.
- color (kolor): określa kolor cienia.
Przykłady
Podstawowy cień
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
Efekt działania stylu.
Cień z rozmyciem:
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.5);
Efekt działania stylu.
Cień wewnętrzny
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
Efekt działania stylu.
2. Text Shadow
Właściwość text-shadow służy do dodawania cienia do tekstu.
Składnia
text-shadow: h-offset v-offset blur color;
- h-offset (poziomy przesunięcie): określa poziome przesunięcie cienia tekstu.
- v-offset (pionowe przesunięcie): określa pionowe przesunięcie cienia tekstu.
- blur (rozmycie): określa stopień rozmycia cienia tekstu.
- color (kolor): określa kolor cienia tekstu.
Przykłady
Podstawowy cień tekstu
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
Efekt działania stylu.
Cień tekstu z większym rozmyciem
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
Efekt działania stylu.
Wielokolorowy cień tekstu
text-shadow: 1px 1px red, 2px 2px blue, 3px 3px green;
Efekt działania stylu.
