O webu
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)

Hover efekt na Twitteru

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