Hover efekty s box-shadow
Zajímavé :hover efekty s využitím CSS vlastnosti box-shadow.
CSS vlastnost pro vytváření stínů box-shadow je popsána na samostatné stránce i s generátorem stínů.
Kromě klasických stínů jde použít box-shadow v kombinaci s transition i k zajímavým efektům po najetí myši (:hover).
Jak to funguje?
-
Stín se nastaví jako vnitřní (
inset).box-shadow: inset …; -
Vynulují se všechny hodnoty (vodorovná posice, svislá posice, rozmazání, velikost).
-
Při
:hoveru se svislá/vodorovná hodnota změní (kladně nebo záporně), čímž docílíme požadovaného efektu.box-shadow: inset 100px 0 0 0 #0D6AB7; -
Plynulou změnu
box-shadowběhem 300 milisekund (0,3 vteřiny) zajistítransition.transition: box-shadow .3s;
Vodorovné přebarvení
Svislé přebarvení
Shora
Zdola
Jenom trochu
Podobný :hover efekt je možné vidět na Twitteru, ale tam je to řešené změnou tloušťky spodního okraje (border-bottom-width)
Kromě slabší podpory pro box-shadow v prohlížečích (IE 9+) se zdá řešení používající stín výhodnější, protože se nemusí řešit ovlivnění okolních elementů.
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.