Cieniowanie tekstu
Może się zdarzyć, że tekst będący na grafice może być słabo czytelny. Dodając mu cień, możemy zwiększyć jego czytelność “odcinając” go wizualnie cieniem od tła. Ustawienie cienia dla tekstu wykonuje się za pomocą właściwości w takiej konstrukcji zapisu:Wymienione wartości mają następujące znaczenie:
- X – odpowiada za przesunięcie cienia w osi poziomej (w prawo),
- Y – odpowiada za przesunięcie cienia w osi pionowej (w dół),
- blur (rozmycie) – określa stopień rozmycia cienia (parametr dodatkowy)
- color – ustawia kolor cienia za pomocą zapisu hexadecymalnego, rgb bądź nazwą koloru.
Poniżej dodaję przykład w który zastosuję powyższą właściwość:
eager-https-662dl - CodeSandbox
eager-https-662dl by danielminschinski
Cieniowanie elementów
Taki sam cień możemy nadawać elementom blokowym w HTML. Mamy możliwość w ten sposób nadać efekt przestrzenności. Prawie tak samo jak cieniowanie tekstu, konstrukcja właściwości cienia dla elementu wygląda następująco:affectionate-beaver-mliod
affectionate-beaver-mliod by danielminschinski
Cień głównego elementu
Dobrą praktyką przy projektowaniu stron jest nadanie cienia głównemu elementowi. Elementy cieniowane są z każdej strony. Przesunięcie X oraz Y sprawia, że widzimy cień zazwyczaj na dole i po prawej stronie elementu.
Natomiast rozmycie działa w każdą stronę, więc użycie wartości wysokiej dla trzeciego parametru da nam efekt poświaty z każdej strony.
Posługując się naszym przykładem dodałem do kontenera właściwość cienia. Sprawdź efekt:
condescending-water-joqky
condescending-water-joqky by danielminschinski
Przeźroczystość elementów
Na koniec dzisiejszego materiału dodaję zagadnienie o przezroczystości. Dodajemy ją za pomocą właściwości opacity. Może ona przyjmować wartość od 0 do 1 (0 oznacza całkowitą przezroczystość). Możemy zmieniać ją za pomocą wartości po przecinku, np.Minusem tej właściwości jest to, że nadaję ona przeźroczystość także elementom potomnym. Jeśli chcemy aby tło napisu miało przeźroczystość, a napis nie? Można ustawić z wartością koloru rgb(0, 0, 0, 0.5) gdzie pierwsze trze parametry po przecinkach określają kolor (tu: czarny), a ostatni przeźroczystość. Tak więc zobacz efekt przeźroczystości nagłówka na poniższym przykładzie:cool-pasteur-i2zu6
cool-pasteur-i2zu6 by danielminschinski
Fajne tempo z materiałami co nie❓ Trzy posty w tygodniu do dobry wynik💪 Przynajmniej ja tak uważam😜
W następnym poście opiszę trochę o pseudoklasach, tak więc z góry zapraszam😉
Do następnego❕
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA