Text-stroke

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.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

CSS animace

CSS vlastnost animation

Animování prvků na stránce pomocí čistého CSS s využitím @keyframes.

Column – obsah ve sloupcích

Vícesloupcový text a column

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

CSS flex

Flexboxy

Flexibilní stylování boxů je jednoduší a schopnější alternativa k obtékání (float), ale zatím hudba budoucnosti…

Komentáře