Définit un contrôle d'entrée
CSS3 Effets de texte
CSS3 cours tutorialPrise en charge des navigateurs
|
Propriété |
Appui de navigateur |
||||
|---|---|---|---|---|---|
|
text-shadow |
|
|
|
|
|
|
word-wrap |
|
|
|
|
|
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
Exemple : Copier 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 :
Exemple : Copier 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
Exemple : Copier 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
Exemple : Copier 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
Exemple : Copier 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 chapitre suivant