Text-shadow (oraz box-shadow) to bardzo fajne efekty, które choć nie powinny być nadużywane, to w przypadku korzystania z nich z umiarem potrafią nadać świetny efekt rozświetlenia danego elementu. Poznajemy je!
Nasz h1 wygląda tak:
<h1>MY HEADING</h1>Nadajemy mu delikatny text-shadow na „dzień dobry” oraz mocniejszy na hovera:
h1 {
transition: all .5s;
color: #1e293b;
text-shadow: 1px 1px 1px rgba(30,41,59, 0.2);
font-family: Tahoma, sans-serif;
}
h1:hover {
color:#ef4444;
text-shadow: 2px 2px 2px rgba(239,68,68, 0.3);
}Różnica ogromna. Napis sprawia wrażenie rozświetlonego, zaś po najechaniu – jeszcze bardziej „błyszczy”, nie tylko kolor zmienia.
Teraz zabawmy się w box-shadow. Prosta nawigacja:
<ul>
<li><a href="">BUTTON 1</a></li>
<li><a href="">BUTTON 2</a></li>
<li><a href="">BUTTON 3</a></li>
</ul>Lista jako flex-rodzic:
ul {
list-style: none;
display: flex;
align-items: center;
}Elementy listy jako guziki pewien box-shadow posiadający, komponujący się z ich kolorem:
li {
text-transform: uppercase;
margin: 2px;
flex-shrink: 0;
background-color: #64748b;
border-color: #64748b;
color: #fff;
padding: 0.3rem 0.7rem;
border-radius: 5px;
box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
transition: all .5s;
}Klasyczny reset stylów linków:
li a {
text-decoration: none;
color: inherit;
letter-spacing: 0.7px;
}Teraz hover, który przez sam swój kolor rozświetla + box-shadow komponujący się z tym kolorem i jeszcze bardziej podkręcony, tak, aby rozświetlał, nie bijąc jednocześnie po oczach:
li:hover {
box-shadow: 0 4px 10px 0px rgba(148,163,184, 0.3);
background-color: #94a3b8;
border-color: #94a3b8;
}Dzięki transition na elemencie li efekt będzie płynny. Box-shadow i text-shadow to świetne dodatki do rozświetlania elementów na stronie, odpowiedniego budowania user-experience – pod warunkiem, że nie przesadzimy.
Musimy też pamiętać o tym, aby kolory były ze sobą skomponowane. W przypadku box i text-shadow najlepiej sprawdza się notacja rgba z dobrze dobraną alfą. Kolor box-shadow powinien odpowiadać kolorowi elementu.
Należy też pamiętać, że kolor efektu hover powinien być jaśniejszy od normalnego stanu zaś kolor box/text-shadow to jego wersja z dobrze dobraną alfą i offsetami w pikselach.
Krótko mówiąc, trzeba się tym pobawić, aczkolwiek cel tego jest taki, aby uzyskać subtelny, ale robiący wrażenie i różnicę efekt. Do wybierania kolorów polecam paletę Tailwinda, z którego można sobie kopiować ładnie powybierane kolory w ustandaryzowanych odcieniach.
O ile nie przepadam za frameworkami CSS (swoje ważą, niszczą separation of concerns i generalnie wydłużają html ponad miarę plus CSS warto znać i samemu umieć stosować) to paleta Tailwinda jest świetna.
Inne narzędzie warte uwagi to generator kolorów i odcieni frameworka Ionic. Czasami też z niego korzystam. Wrzucamy kolor, dostajemy kolor kontrastujący i kilka odcieni, w dodatku możemy sobie zmienne CSS przekopiować od razu.
