Effet de style mettre un texte en gras et|ou en italique...
Les bordures en CSS3
CSS3 cours tutorialDans ce chapitre, vous apprendrez les propriétés de bordures suivantes :
border-radius
box-shadow
border-image
Prise en charge des navigateurs
|
Propriété |
Appui de navigateur |
||||
|---|---|---|---|---|---|
|
border-radius |
|
|
|
|
|
|
box-shadow |
|
|
|
|
|
|
border-image |
|
|
|
|
|
Comme vous le montre le tableau les propriétés border-radius et box-shadow sont pris en charge par tous les principaux navigateurs.
Pour la propriété border-image ; elle est prise en charge par Firefox, Chrome et Safari, Opera nécessite le préfixe - o -, Safari 5 et les versions plus anciennes, il faut le préfixe - webkit – et Internet Explorer ne la prend pas en charge.
CSS3 Comment ajouter des coins arrondis aux éléments
L’ajout des coins arrondis en CSS2 était une tache délicate. Nous avons dû utiliser des images différentes pour chaque coin.
Dans CSS3, il est facile de créer des coins arrondis.
Dans CSS3, c’est la propriété border-radius, qui est utilisée pour créer des coins arrondis :
Tester l’exemple ci après pour voir comment ajouter des coins arrondis aux éléments
Exemple Définir les coins arrondis d’un div
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>les coins arrondis avec border-radius</title>
<style>
div
{
padding:10px 40px;
background:#ccc;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>La propriété border-radius vous permet d'ajouter des coins arrondis aux élément html comme ce div</div>
</body>
</html>
La propriété border-radius est un raccourci pour définir plusieurs propriétés "border-radius" en un seul endroit. En d'autres termes, la propriété border-radius est un moyen efficace d'ajouter des coins arrondis à vos bordures.
La propriété border-radius définit dans l’ordre les propriété
border-top-left-radius, border-top-right-radius, border-bottom-left-radius et border-bottom-right-radius.
Les propriétés
border-top-left-radius, border-top-right-radius, border-bottom-left-radius et border-bottom-right-radius permetent de définir les coins gauche,droit en haut et en bas chacun à part voici un exemple :
Exemple définir les coins arrondis haut gauche et bas droit d’un div
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>les coins arrondis avec border-radius</title>
<style>
div
{
padding:10px 40px;
background:#ccc;
width:300px;
border:2px solid #000;
border-top-left-radius:25px;
border-bottom-right-radius:25px;
}
</style>
</head>
<body>
<div>La propriété border-top-left-radius définit le coin arrondis haut gauche.<br>
La propriété border-bottom-right-radius définit le coin arrondis bas droit</div>
</body>
</html>
CSS3 Box-Shadow
Dans CSS3, la propriété box-shadow est utilisée pour ajouter une ombre porté aux boîtes :
La propriété box-shadow est une des propriétés introduites dans CSS3 pour permettre aux développeurs d'ajouter des effets d'ombre aux éléments HTML.
La propriété box-shadow est utilisée pour attacher une ou plusieurs ombres à un élément HTML.
Vous pouvez créer des ombres portées sur n'importe quel élément HTML. Vous pouvez même leur donner un effet de « floue » (également connu sous le nom "flou gaussien").
Vous pouvez spécifier quelle couleur l'ombre devrait avoir et de combien qu'il est décalé de sa boîte (c'est-à-dire dans quelle mesure il devrait tomber en bas/à l'extérieur de l'élément HTML auquel l'ombre est appliqué).
Syntaxe :
box-shadow: horizontal-offset vertical-offset flou spread-distance color [inset]
horizontal-offset
La première valeur détermine le décalage horizontal de l'ombre. C'est une valeur de longueur. Par exemple, 10px ou 1em. Les valeurs négatives sont autorisées. Si une valeur négative est fournie, le décalage se traduira par l'ombre portée qui est dessiné à gauche de la boîte. Si c'est une valeur positive, il sera tiré vers la droite.
vertical-offset
La deuxième valeur détermine le décalage vertical de l'ombre. C'est une valeur de longueur. Par exemple, 10px ou 1em. Les valeurs négatives sont autorisées. Si une valeur négative est fournie, le décalage se traduira par l'ombre tracée au-dessus de la zone. Si c'est une valeur positive, il va être dessiné en dessous.
flou
La troisième valeur détermine l'effet de flou gaussien (le cas échéant). Si la valeur est zéro, le bord de l'ombre sera fort. Plus la valeur est élevée, plus le flous de l'ombre sera fort. Les valeurs négatives ne sont pas autorisées pour un flou gaussien.
spread-distance
La quatrième valeur détermine la taille de l'ombre. L’ajout d'une valeur positive ici augmentera la taille de l'ombre - il étendra dans toutes les directions. Une valeur négative diminue la taille (il se contractera).
Couleur
La cinquième valeur détermine la couleur de l'ombre. Par exemple, steelblue, #FF4500 ou rgba(0,0,0,0.3) sont tous valides couleurs. Si cette valeur n'est pas fournie, l'agent utilisateur du navigateur/déterminera la couleur.
inset
Ce mot clé (facultatif) spécifie que l'ombre s'ajouteront à l'intérieur de l'élément, ce qui en fait une « ombre interne ». Cela peut donner l'élément l'apparence étant « couper » de la toile/page (par opposition à une "ombre extérieure", dans lequel l'élément semble être en vol stationnaire au-dessus de la page). Si le mot clé du inset est omis, l'ombre portée sera une "ombre extérieure".
Exemple Ajouter une ombre à un div
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>les coins arrondis avec border-radius</title>
<style>
div
{
padding:10px 40px;
background:#d99999;
width:300px;
border:2px solid #000;
border-radius:25px;
box-shadow: 10px 10px 5px #666666;
}
</style>
</head>
<body>
<div>Voici une boite avec les coins arrondis et une ombre portée</div>
</body>
</html>
La propriété box-shadow accepte une liste séparée par des virgules des ombres, chacun spécifié par des valeurs de longueur de 2 à 4, une couleur en option et un mot-clé facultatif inset . Les longueurs omises auront la valeur 0 ; si les couleurs sont omises elle seront choisies par le navigateur .
CSS3 Border-Image
Avec la propriété border-image de CSS3, vous pouvez utiliser une image pour créer une bordure à partir de cette image:
La propriété border-image permet de spécifier une image comme une frontière !
L'image d'origine utilisé pour créer la frontière ci-dessus :
Pour télécharger cette image click droit enregistrer l’image sous.
Exemple Utiliser une image pour créer une bordure autour d'un élément div :
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>border-image</title>
<style>
div
{
border:15px solid transparent;
width:250px;
padding:10px 20px;
margin:50px;
}
#round
{
-webkit-border-image:url(images/border.gif) 30 30 round; /* Safari 5 et moins */
-o-border-image:url(images/border.gif) 30 30 round; /* Opera */
border-image:url(images/border.gif) 30 30 round;
}
#stretch
{
-webkit-border-image:url(images/border.gif) 30 30 stretch; /* Safari 5 et moins */
-o-border-image:url(images/border.gif) 30 30 stretch; /* Opera */
border-image:url(images/border.gif) 30 30 stretch;
}
</style>
</head>
<body>
<div id="round">Voici une boite avec border-image round</div>
<div id="stretch">Voici une boite avec border-image stretch</div>
</body>
</html>
Par carabde 10 mars 2014