Latest web development tutorials

Effets de texte CSS3

Effets de texte CSS3

texte CSS3 contient plusieurs nouvelles fonctionnalités.

Dans ce chapitre, vous apprendrez le texte suivant attribue:

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • mot-break

support du navigateur

属性
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

Le CSS3 texte d'ombre

En CSS3, propriété text-shadow applique au texte ombres.

ombre texte effet!

Vous spécifiez l'ombre horizontale, l'ombre verticale, la couleur, le flou de distance et les ombres:

OperaSafariChromeFirefoxInternet Explorer

Exemples

Ajouter une ombre sur le titre:

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

Essayez »

propriété box-shadow CSS3

En CSS3 propriété CSS3 box-shadow applique à l'ombre boîte

Exemples

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

Essayez »

Ensuite, ajouter de la couleur à l'ombre

Exemples

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

Essayez »

Ensuite, ajouter une ombre à un effet de flou

Exemples

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

Essayez »

Vous pouvez également ajouter un effet d'ombre dans deux :: befor et :: after pseudo-éléments

Exemples

# Boxshadow {
position: relative;
b ox-ombre: 1px 2px 4px rgba (0, 0, 0, .5);
pa dding: 10px;
bac kground: blanc;
}
#boxshadow img {
largeur: 100%;
border: 1px solid # 8a4419;
border-style: encart;
}
#b oxshadow :: après {
contenu: '';
position: absolute;
z-index: 1; / * hide ombre derrière l'image * /
box-shadow: 0 15px 20px rgba (0, 0, 0, 0,3);
largeur: 70%;
gauche: 15%; / * moitié du solde de 30% * /
hauteur: 100px;
bottom: 0;
}

Essayez »

Un cas particulier est l'utilisation de l'effet de la carte d'ombre

Exemples

div.card {
largeur: 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;
}
}

Texte Cartes >> Picture Card >>

CSS3 propriété Débordement de texte

attribut CSS3 de débordement de texte indique comment les utilisateurs doivent afficher le contenu de trop-plein

Exemples

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

p.test2 {
white-space: nowrap;
largeur: 200px;
border: 1px solid # 000000;
overflow: hidden;
text-overflow: ellipsis;
}

Essayez »

CSS3 newline

Si un mot est trop long pour tenir dans une zone qui se prolonge à l'extérieur:

CSS3, la propriété vous permet d'englober l'habillage du texte obligatoire - même si cela signifie le fractionnement dans le milieu d'un mot:

le code CSS est la suivante:

OperaSafariChromeFirefoxInternet Explorer

Exemples

Permet à long habillage du texte:

p {word-wrap:break-word;}

Essayez »

CSS3 Parole de rupture

CSS3 Parole rupture attribut pour spécifier des règles de ligne de rupture:

le code CSS est la suivante:

Exemples

p.test1 {
mot-break: garder tous;
}

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

Essayez »

Les nouveaux attributs de texte

propriété description CSS
pendaison-ponctuation Les dispositions de caractère de ponctuation est situé en dehors du cadre. 3
ponctuation-trim Que les dispositions du caractères de ponctuation élagage. 3
text-align-last Réglage de la façon d'aligner la dernière ligne ou immédiatement avant la ligne pour forcer un saut de ligne. 3
texte désaccentuation Les éléments clés de l'application à une balise de texte et la clé tag premier plan. 3
text-justify Quand une méthode d'alignement prédéterminée lorsque text-align est réglé sur «justifier» l'utilisation. 3
text-contour Spécification du contour du texte. 3
text-overflow Dispositions applicables lorsque les choses se produisent lorsque le texte déborde l'élément contenant. 3
text-shadow Ajouter une ombre au texte. 3
text-wrap Les dispositions du texte d'enveloppe de règle. 3
mot-break texte CJK des dispositions des règles de non-ligne de rupture. 3
word-wrap Il permet à long divisé et le mot indivisible wrap à la ligne suivante. 3