Moderní tvorba webových aplikací

O webu

Hover efekty s box-shadow

Zajímavé :hover efekty s využitím CSS vlastnosti box-shadow.

4 minuty

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

Související články

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

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.

3 minuty

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025