BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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;
}

 

Všechny články v sekci
Text a písmo - CSS vlastnosti
Článek pro vás napsal David Jančík
Avatar
Autor je vášnivý programátor. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.
Aktivity (1)

 

 

Komentáře

Avatar
Pavel-Z
Člen
Avatar
Pavel-Z:27.5.2014 16:45

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

 
Odpovědět
27.5.2014 16:45
Avatar
Nevik Qsuluqod:15.9.2015 20:02

<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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Josef Břečka:11. července 18:57

Zajímavé, co dokáže stínování a barvy. Díky za tip ;-)

Odpovědět
11. července 18:57
Prostě buďte happy :)
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 3 zpráv z 3.