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

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

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

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