Text Effects (efekty textu) - Český CSS3 manuál

HTML a CSS Manuál Text a písmo Text Effects (efekty textu) - Český CSS3 manuál

CSS3 obsahuje několik nových vlastností pro text.

CSS3 Stínování textu (text-shadow)

Určíme horizontální a vertíkální polohu stínu, poloměr rozmazání a barvu.

Ukázka použití efektu stínu.

h1
{
        text-shadow: 5px 5px 5px #FF0000;
}

Efekt ohně:

text-shadow: 0 0 4px white, 0 -2px 4px #ff3, 2px -5px 6px #fd3, -2px -7px 11px #f80, 2px -13px 15px #f20;

CSS3 Zalamování slov (word-wrapping)

Pokud je slovo delší než šířka elementu, ve kterém je umístěno, slovo se zalomí.

p
{
        word-wrap: break-word;
}

CSS3 Přetečení textu (text-overflow)

Pokud je text delší než rozměry elementu, ve kterém je umístěn. Pomocí této vlastnosti defingujeme co se s ním má stát.

Můžeme použít hodnot ellipsis a clip. Ellipsis přídá tři tečky a clip text usekne.

div.mujdiv
{
        text-overflow: ellipsis;
}

CSS3 Zalamování slov (word-break)

Určuje kde se může slovo zalomit. Hodnota hyphenate udává zalomení pouze u pomlčky, hodnota break-all může slovo zalomit kdekoliv.

p.mujparagraf
{
        word-break: hyphenate;
}

 

  Aktivity (1)

Manuál pro vás napsal David Jančík [sczdavos]
Avatar
Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.

Miniatura
Všechny články v sekci
Text a písmo - CSS vlastnosti

 

 

Komentáře

Avatar
Pavel-Z
Člen
Avatar
Pavel-Z:

Ahoj, ten kód na efekt ohně je fakt dobrý, díky!!

 
Odpovědět  +3 27.5.2014 16:45
Avatar
Nevik Qsuluqod:

<style>
h1{
text-shadow: 0 0 4px white, 0 -2px 4px #ff3, 2px -5px 6px #fd3, -2px -7px 11px #f80, 2px -13px 15px #f20;}
</style>
<h1>ten ohen je fakt super</h1>

Odpovědět 15.9.2015 20:02
Je těžké naučit se HTML, všude ho učí špatně, a co itnetwork? TO JE BIBLE
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.