
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
:hover
u 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-shadow
bě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ů.
Související články



Různá šířka <input type=number>
s min
/max
Proč má <input type=number>
různou výchozí šířku v závislosti na min
/max
atributech.

Poskakování stránky kvůli posuvníku
Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.