Une boîte à coins arrondis, l’ancienne méthode
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Une boîte à coins arrondis, ancienne méthode</title>
<style>
.boite {width: 400px; background-color: #80FF80;}
.hg { float: left; background-image: url(hautgauche.gif); height: 20px; width: 20px; }
.hd { float: right; background-image: url(hautdroite.gif); height: 20px; width: 20px; }
.bg { float: left; background-image: url(basgauche.gif); height: 20px; width: 20px; }
.bd { float: right; background-image: url(basdroite.gif); height: 20px; width: 20px; }
.texte { margin: 20px 20px -20px 20px; }
</style>
</head>
<body>
<div class="boite">
<div class="hg"></div><div class="hd"></div>
<div class="texte">
Iam summus Pater architectus Deus hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat; aethereos globos aeternis animis vegetarat; excrementarias ac feculentas inferioris mundi partes omnigena animalium turba complerat.
</div>
<div class="bg"></div><div class="bd"></div>
</div>
</body>
</html>
Une boîte à coins arrondis, la méthode CSS3
Exemple 1
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Une boîte à coins arrondis en CSS3</title>
<style>
.arrondi
{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-ms-border-radius: 15px;
border: 1px solid black;
padding: 10px;
width: 250px;
background:cyan;
text-align: center;
}
</style>
</head>
<body>
<div class="arrondi">Boîte à bords arrondis en CSS3</div>
</body>
</html>Exemple 2
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Une boîte à coins arrondis en CSS3</title>
<style>
.arrondi
{
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-ms-border-radius: 15px;
border: 5px solid black;
padding: 10px;
width: 250px;
height:300px;
color: white;
font-size: 60px;
background: url("ecureuil.jpg") repeat;
text-align: center;
}
</style>
</head>
<body>
<div class="arrondi">Boîte à bords arrondis en CSS3</div>
</body>
</html>Exemple 3
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Une boîte à coins arrondis en CSS3</title>
<style>
.arrondi
{
-moz-border-radius: 50px 50px 200px 50px;
-webkit-border-radius: 50px 50px 200px 50px;
-khtml-border-radius: 50px 50px 200px 50px;
-ms-border-radius: 50px 50px 200px 50px;
border: 1px solid black;
}
</style>
</head>
<body>
<p class="arrondi">
<br>
Boîte à bords arrondis en CSS3
<br><br>
</p>
</body>
</html>
Une mise en page CSS3 avec arrondis
<!doctype html>
<html>
<head>
<meta charset=UTF-8" />
<title>Mise en page en arrondis</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav><aside>
<p>Contenu texte ajouté sur le côté avec la balise <aside></p>
</aside><article>
<header>
<h2>Titre de l'article</h2>
</header>
<p>Contenu principal de l'article, suivi d'une image.</p>
<img src="grenouille.jpg" width="300px" /><br>
<footer>
<a href="#">Afficher les commentaires</a>
</footer>
</article>
</body>
</html>style3.css
header, nav, article, section, footer, aside, img
{
display: block;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border: 1px solid black;
padding: 10px;
}header
{
background-color: red;
}nav
{
float:left;
width:20%;
background-color:yellow;
}article
{
background-color: #66FFFF;
width:80%;
}aside
{
float:right;
width:20%;
background-color:yellow;
}footer
{
clear:both;
background-color: #99FF66;
}
header, nav, article, section, footer, aside, img
{
display: block;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border: 1px solid black;
padding: 10px;
}
Ombre portée autour d’une image, ancienne technique
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Ombrage d'une image en CSS2</title>
<style>
.ombre
{
float:left;
background: url(back.gif) no-repeat bottom right;
}
.ombre img
{
display: block;
position: relative;
border: 1px solid #aaa;
margin: -5px 5px 5px -5px;
}
</style>
</head>
<body >
<div class="ombre">
<img src="animal.gif" />
</div>
</body>
</html>
Ombrage CSS3 sur un élément
Exemple 1
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Ombrage CSS3</title>
<style>
.ombrageCSS3
{
width: 230px;
box-shadow: 10px 10px 5px cyan;
-moz-box-shadow: 10px 10px 5px cyan;
-webkit-box-shadow: 10px 10px 5px cyan;
-khtml-box-shadow: 10px 10px 5px cyan;
}
</style>
</head>
<body>
<p class="ombrageCSS3">
Texte à l'intérieur de la balise <p>
</p>
</body>
</html>Exemple 2
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Ombrage CSS3</title>
<style>
.ombrageCSS3
{
width: 230px;
box-shadow: 10px 10px 5px #bbb;
-moz-box-shadow: 10px 10px 5px #bbb;
-webkit-box-shadow: 10px 10px 5px #bbb;
-khtml-box-shadow: 10px 10px 5px #bbb;
}
</style>
</head>
<body>
<img class="ombrageCSS3" src="ecureuil.jpg" width="400px" />
</body>
</html>
Ombrage de texte en CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Ombrage de texte en CSS3</title>
<style>
.otexte
{
font-size: 60px;
text-shadow: 4px 4px 4px grey;
}
</style>
</head>
<body>
<p class="otexte">Ce texte est ombré</p>
</body>
</html>
Ombrage de texte dans Internet Explorer
Exemple 1
<!DOCTYPE html">
<html>
<head>
<meta charset=UTF-8" />
<title>Ombrage de texte dans Internet Explorer</title>
<style>
body
{
background-color: #cc0;
}.texte-ombre
{
font-size: 100px;
}
.principal
{
position: absolute;
z-index: 2;
color: white;
top: 0;
left: 0;
}
.ombre
{
position: absolute;
z-index: 1;
color: black;
top: 0px;
left: 4px;
}
</style>
</head><body >
<p class="texte-ombre">
<span class = "principal">Ce texte est ombré</span>
<span class = "ombre">Ce texte est ombré</span>
</p>
</body>
</html>Exemple 2
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Ombrage de texte avec DropShadow()</title>
<style>
.dropshadow-texte
{
font-size:64px;
color:red;
zoom:1; /* déclenche le layout (concept du haslayout d’IE7 et inférieur), nécessaire pour le fonctionnement des filtres */
filter:DropShadow(color=#C0C0C0, offx=3, offy=3)
}
</style>
</head>
<body>
<p class="dropshadow-texte">Texte avec ombrage</p>
</body>
</html>
Effets sur du texte dans Internet Explorer
<!DOCTYPE html">
<html>
<head>
<meta charset=UTF-8" />
<title>Effets sur le texte</title>
<style>.fondu
{
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100);
Width:30em;
font-size:40px;
color: red;
font-weight: bold;
}.estompage
{
Filter: Blur(add=0, direction=90, strength=5);
Width:14cm;
font-size:40px;
color: red;
font-weight: bold;
}.bords-flambants
{
width: 100%;
font-size:40px;
color: blue;
filter: Glow(Color=#FF0000, Strength=10);
}.ondulations
{
width: 20cm;
font-size:40px;
color: red;
font-weight: bold;
filter: wave(add=0, freq=5, lightstrength=5, phase=220, strength=2);
}
</style>
</head><body >
<p class="fondu">Effet Fondu linéaire progressif</p>
<p class="estompage">Effet Estompage</p>
<p class="bords-flambants">Effet Bords flambants</p>
<p class="ondulations">Effet Ondulations</p>
</body>
</html>
Mise en page CSS3 avec arrondis et ombrages
<!doctype html>
<html>
<head>
<meta charset=UTF-8" />
<title>Mise en page en arrondis</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav><aside>
<p>Contenu texte ajouté sur le côté avec la balise <aside></p>
</aside><article>
<header>
<h2>Titre de l'article</h2>
</header>
<p>Contenu principal de l'article, suivi d'une image.</p>
<img src="grenouille.jpg" width="300px" /><br>
<footer>
<a href="#">Afficher les commentaires</a>
</footer>
</article>
</body>
</html>
style4.css
header, nav, article, section, footer, aside, img
{
display: block;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border: 1px solid black;
padding: 10px;
}header
{
background-color: red;
}nav
{
float:left;
width:20%;
background-color:yellow;
text-shadow: 4px 4px 4px grey;
}article
{
background-color: #66FFFF;
width:80%;
}aside
{
float:right;
width:20%;
background-color:yellow;
box-shadow: 5px 5px 5px grey;
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
}footer
{
clear:both;
background-color: #99FF66;
}img
{
box-shadow: 5px 5px 5px grey;
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
}
li
{
filter:DropShadow(color=#c0c0c0, offx=3, offy=3)
}
Bizarre, je navigue avec Firefox 13.0.1, navigateur sensé supporter une partie à tout le moins de HTML 5 et CSS 3, et pourtant aucun de vos “Tester le code” ne fonctionne sauf le “Box Shadow”. Est-ce à dire que CSS 3 n’est pas vraiment supporté? Ou est-ce votre code qui, pour une raison qui m’échappe, ne fonctionne pas?