#24. Przezroczystość i cieniowanie

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.
Przykład zastosowania właściwości:

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 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!