Moderní tvorba webových aplikací

O webu

Text-stroke

CSS vlastnost text-stroke vytváří okraj písmen podobně jako vlastnost border u boxů.

2 minuty

Vysvětlení vlastností color a text-stroke

Použití

Využití vlastnosti text-stroke se nabízí v podobě vytváření zajímavějších stylů písma bez používání obrázků.

element {
  -webkit-text-stroke: 5px red;
}

První hodnota je tloušťka rámečku, druhá hodnota potom barva. Zápis se tedy liší oproti borderu absencí volby stylu čáry (solid, dotted, double a podobně). Možná se této možnosti dočkáme v budoucnu.

Popora

Momentálně funguje pouze ve Webkitu (Chrome 31+ a nová Opera 20+), a to jen s CSS prefixem -webkit-.

Text s barevným okrajem.

Samostatná ukázka (v podporovaných prohlížečích se zobrazí cca to samé co na obrázku výše).

Aby se efekt rozumně projevil, je zapotřebí celkem velké písmo, zhruba 40 pixelů a víc.

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