CSS3, Comment créer des effets de texte

CSS3 contient plusieurs nouvelles fonctionnalités de texte.
Dans ce chapitre, vous apprendrez les propriétés de texte suivantes :
text-shadow
word-wrap

Somaire

CSS3 Effets de texte

CSS3 cours tutorial

Prise en charge des navigateurs

Propriété

Appui de navigateur

text-shadow

chrome

fire-fox

IE

opera

safari

word-wrap

chrome

fire-fox

IE

opera

safari

Internet Explorer 10, Firefox, Chrome, Safari et Opera prennent en charge la propriété text-shadow.
Tous les principaux navigateurs prennent en charge la propriété word-wrap.
Remarque : Internet Explorer 9 et versions antérieures, ne prend pas en charge la propriété text-shadow.


CSS3 Text-Shadow : appliquer une ombre portée à un texte

Dans CSS3, la propriété text-shadow applique une ombre au texte.
La propriété text-shadow définit un ou plusieurs effets d'ombre à appliquer au contenu texte de l'élément sélectionné. L’effets consistent en une couleur d'ombre, un rayon maximum de l'effet d'ombre et d’un décalage x / y du contenu de l’élément sélectionné. Plusieurs effets d »ombre  peuvent être appliqués à l'élément dans l'ordre spécifié dans la déclaration de la propriété.

Pour créer une ombre vous spécifiez le décalage horizontal de l'ombre, le décalage vertical, la distance du flou et la couleur de l'ombre :

Exemple

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Effet de texte</title>
<style>
	h1{text-shadow: 2px 2px 2px #FF0000;}
</style>
</head>
<body>
	<h1>TIEN VOICI UN TEXTE AVEC UNE OMBRE</h1>
</body>
</html>
 

CSS3 word-wrap comment gérer les débordements de contenus 

La propriété word-wrap spécifie si l'actuelle ligne du rendu doit être brisée si le contenu dépasse la limite de la zone du rendu spécifié pour un élément.
La propriété word-wrap ne devrait appliquer que si l'élément a un rendu visuel, est un élément inline avec la hauteur/largeur explicite, est en position absolue et/ou est un élément  block.
Si un mot est trop long pour tenir dans une zone, il  déborde à l'extérieur de l’élément :

Ce paragraphe contient un mot très long : anticonstitutionnelle. Le mot long va être cassé et renvoyé à la ligne suivante.
Le code CSS est comme suit :

Exemple Permettre à des mots longs être brisé et renvoyé sur la ligne suivante :

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Effet de texte</title>
<style> 
p.test
{
width:8em; 
border:1px solid #000000;
word-wrap:break-word;
}

</style>
</head>
<body>
<p class="test">Tien voici un texte avec le mot anticonstitutionnellement qui devrait être brisé.
</p>
</body>
</html>
 

Exemple créer Text-shadow avec une lueur néon

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
            <meta charset="UTF-8">
            <title>Effet de texte</title>
<style>
h1
{
text-shadow:0 0 3px #00ffff;
}
</style>
</head>
<body>

<h1>Text-shadow avec une lueur néon</h1>

</body>
</html>
 

Exemple Text-shadow appliqué à un texte en blanc

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
     <meta charset="UTF-8">
     <title>Effet de texte</title>
<style>
	h1
	{
	color:white;
	text-shadow:2px 2px 4px #000000;
	}
</style>
</head>
<body>

<h1>Text-shadow appliqué à un texte en blanc</h1>

</body>
</html>
 

Exemple Créer un texte en 3D avec text-shadow

Sélectionner le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Effet de texte</title>
<style>
	h2 {width:320px;
	    background:#ff4455;
	    padding:10px;
	  	margin: 0;
	  	font: bold 45px Arial, sans-serif;
	 	 color: #fff;
	   text-shadow:1px 1px 0 #ccc,
	               2px 2px 0 #c9c9c9,
	               3px 3px 0 #bbb,
	               4px 4px 0 #b9b9b9,
	               5px 5px 0 #aaa,
	               0 5px 15px rgba(0,0,0,.50);                        
	}
</style>
</head>
<body>
<h2> TEXTE EN 3 D</h2>
</body>
</html>
 
Par carabde 10 mars 2014

chapitre précédent sommaire chapitre suivant