Latest web development tutorials

Effetti di testo CSS3

Effetti di testo CSS3

testo CSS3 contiene diverse nuove funzionalità.

In questo capitolo imparerete attribuisce il seguente testo:

  • text-shadow
  • box-shadow
  • text-trabocco
  • word-wrap
  • word-break

Supporto per il browser

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

Il CSS3 testo ombra

In CSS3, la proprietà text-shadow si applica al testo ombre.

Testo ombra effetto!

Si specifica l'ombra orizzontale, l'ombra verticale, il colore, la distanza di sfocatura e le ombre:

OperaSafariChromeFirefoxInternet Explorer

Esempi

Aggiungere un'ombra al titolo:

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

Prova »

proprietà box-shadow CSS3

In CSS3 proprietà CSS3 box-shadow applica scatola di ombra

Esempi

div {
box-shadow: 10px 10px;
}

Prova »

Successivamente, aggiungere colore al l'ombra

Esempi

div {
box-shadow: 10px 10px grigio;
}

Prova »

Successivamente, aggiungere un'ombreggiatura a un effetto di sfocatura

Esempi

div {
box-shadow: 10px 10px 5px grigio;
}

Prova »

È inoltre possibile aggiungere un effetto ombra in due :: befor e :: after pseudo-elementi

Esempi

# Boxshadow {
position: relative;
B ox-ombra: 1px 2px 4px RGBA (0, 0, 0, .5);
pa ggiunta: 10px;
bac kground: bianco;
}
#boxshadow img {
width: 100%;
border: 1px solid # 8a4419;
border-style: inserto;
}
#b oxshadow :: dopo {
tenore: '';
position: absolute;
z-index: -1; / * nascondere ombra dietro immagine * /
box-shadow: 0 15px 20px rgba (0, 0, 0, 0.3);
width: 70%;
sinistra: 15%; / * una metà del restante 30% * /
altezza: 100px;
in basso: 0;
}

Prova »

Un caso particolare è l'uso di carta effetto ombra

Esempi

div.card {
width: 250px;
box-shadow: 0 4px 8px 0 RGBA (0, 0, 0, 0.2), 0 6px 20px 0 RGBA (0, 0, 0, 0,19);
text-align: center;
}
}

Testo Carte >> Picture Card >>

CSS3 proprietà Overflow Text

attributi CSS3 testo in eccesso specifica come gli utenti dovrebbero visualizzare il contenuto di overflow

Esempi

p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid # 000000;
overflow: hidden;
text-overflow: Clip;
}

p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid # 000000;
overflow: hidden;
text-overflow: puntini di sospensione;
}

Prova »

CSS3 newline

Se una parola è troppo lungo per rientrare in una zona che si estende verso l'esterno:

CSS3, la proprietà permette di avvolgere la disposizione del testo obbligatorio - anche se ciò significa la divisione nel mezzo di una parola:

codice CSS è il seguente:

OperaSafariChromeFirefoxInternet Explorer

Esempi

Consente lungo la disposizione del testo:

p {word-wrap:break-word;}

Prova »

CSS3 Word rottura

CSS3 Word rottura attributo per specificare regole linea di rottura:

codice CSS è il seguente:

Esempi

p.test1 {
word-break: keep-tutto;
}

p.test2 {
word-break: break-all;
}

Prova »

I nuovi attributi di testo

proprietà descrizione CSS
hanging-punteggiatura Disposizioni di carattere punteggiatura si trova al di fuori della cornice. 3
punteggiatura-trim Sia le disposizioni del caratteri di punteggiatura potatura. 3
text-align-last Impostare come allineare l'ultima riga o immediatamente prima linea per forzare un ritorno a capo. 3
text-enfasi Gli elementi chiave della domanda a un tag di testo e modifica chiave primo piano. 3
text-giustificare Quando un metodo di allineamento predeterminato quando text-align è impostato su "giustificare" l'uso. 3
text-outline Specifica del contorno del testo. 3
text-trabocco Disposizioni quando le cose accadono quando il testo overflow l'elemento che contiene. 3
text-shadow Aggiungere un'ombra al testo. 3
text-wrap Disposizioni del testo della regola involucro. 3
word-break il testo CJK delle disposizioni delle norme non-line-rottura. 3
word-wrap Permette lungo diviso e la parola indivisibile avvolgere alla riga successiva. 3