Hover efekty s 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?

1. Stín se nastaví jako vnitřní (inset).

   box-shadow: inset …;

2. Vynulují se všechny hodnoty (vodorovná posice, svislá posice, rozmazání, velikost).

3. 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;

4. Plynulou změnu box-shadow během 300 milisekund (0,3 vteřiny) zajistí transition.

   transition: box-shadow .3s;

Vodorovné přebarvení

Samostatná ukázka

Svislé přebarvení

Shora

Zdola

Jenom trochu

Samostatná ukázka

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ů.