Hover efekty s text-shadow
Zajímavé :hover efekty s využitím CSS vlastnosti text-shadow.
Podobně jako lze k :hover efektům využít stíny boxu (box-shadow), dost podobně se dá použít i stín písma – text-shadow (funguje od IE 10).
Symbolický zápis vlastnosti text-shadow je obdobný jako u box-shadow:
element {
text-shadow: vodorovné svislé umístění rozmazání barva;
}Pokud vynulujeme rozmazání, vznikne tak v podstatě duplikát původního textu, který může díky transition plynule přilétat nebo odlétat.
Shora
Zdola
Zleva
Z více stran najednou
Stínů textu může být více. Přiletět tedy může zároveň stín shora i zdola nebo třeba 4 stíny ze všech stran.
Všechny strany
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.