Moderní tvorba webových aplikací

O webu

Hover efekty s text-shadow

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

4 minuty

Podobně jako lze k :hover efektům využít stíny boxu (box-shadow), dost podobně se dá použít i stín písmatext-shadow (funguje od IE 10).

Symbolický zápis vlastnosti text-shadow je obdobný jako u box-shadow:

element {
  text-shadow: vodorovné svislé umístění rozmazání barva;
}

Pokud vynulujeme rozmazání, vznikne tak v podstatě duplikát původního textu, který může díky transition plynule přilétat nebo odlétat.

Shora

Samostatná živá ukázka

Zdola

Zleva

Z více stran najednou

Stínů textu může být více. Přiletět tedy může zároveň stín shora i zdola nebo třeba 4 stíny ze všech stran.

Ukázka

Všechny strany

Ukázka

Související články

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

12 minut

Možnosti stylování <iframe>

Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.

10 minut

Zvýraznění aktivní sekce při rolování

Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.

5 minut

CSS funkce random()

Jak v CSS generovat náhodné hodnoty pomocí random() a kdy ji použít.

6 minut

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