Pobawmy się cieniem - efekty dla tekstu za pomocą cienia

sobota, 2 czerwca 2018

Jakiś czas nie pojawiały się instrukcje, dlatego dzisiaj mam dla Was przygotowanego gotowca na efekty związane z tekstem za pomocą cienia tzw. box-shadow.

Box-shadow nie tylko może posłużyć nam do dodania tradycyjnego cienia do tekstu, ale dzięki niemu możemy utworzyć takie efekty jak np. efekt neonu czy uwypuklenia.

1. Efekt neon

selektor { font-family: Open Sans; font-size: 20px; color: white; text-shadow: 1px 1px 2px black, 0 0 25px #1af2f2, 0 0 5px #073763; }

Efekt:

Excepteur sint occaecat cupidatat non proident

2. Efekt wypuklenia

selektor { text-align: center; font-family: Open Sans; font-size: 20px; text-transform: uppercase; color: #fff; text-shadow: 0px 2px 3px #999; }

Efekt:

Excepteur sint occaecat cupidatat non proident

3. Efekt tradycyjny

selektor { text-align: center; font-family: Open Sans; font-size: 20px; text-transform: uppercase; color: #707070; text-shadow: 4px 4px 0px #eee, 4px 4px 0px #707070; }

Efekt:

Excepteur sint occaecat cupidatat non proident

4. Efekt 3D 

Excepteur sint occaecat cupidatat non proident

selektor { font-size: 20px; font-family: Open Sans; text-shadow: 1px 2px 0px #bbb, 3px 2px 0px #1af2f2, 4px 2px 0px #000; }

5. Efekt cień + kolor

Efekt:

Excepteur sint occaecat cupidatat non proident

selektor {padding: 10px color: #000; text-shadow: 1px 1px 0px #f282a8, 3px 3px #DDD9F3; margin-bottom:10px; font-family: Lato; font-size: 19px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700;}

Wszystkie wartości są zmienne.
Selektor - wpisujemy selektor dla elementu, który chcemy zmienić, np. dla tytułu wpisu.

Jeśli spodobał Ci się wpis, przekaż go dalej :)