CSS3Bordures CSS3
La propriété bordure en CSS3
border-radius
Exemple de radian (coins arrondis):
div
{
border:2px solid;
border-radius:25px;
}
{
border:2px solid;
border-radius:25px;
}
Attention, pour certain navigateur, des propriétées spécifique doivent être rajouter au code CSS3 ci-dessus :
-webkit-border-radius:25px; /* Chrome et Safari */
-moz-border-radius:25px; /* Mozilla - Firefox */
-ms-border-radius:25px; /* IE */
-moz-border-radius:25px; /* Mozilla - Firefox */
-ms-border-radius:25px; /* IE */
box-shadow
Exemple d'ombrage :
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
Syntaxe :
box-shadow : offset-x offset-y blur-radius color;
Explication:
- offset-x et offset-Y
Ce sont les deux valeurs de longueur pour définir le décalage de l'ombre. offset-x définit la distance horizontale. Les valeurs négatives placent l'ombre à gauche de l'élément. offset-y définit la distance verticale. Les valeurs négatives placent l'ombre au-dessus de l'élément. Si les deux valeurs sont à 0, l'ombre est placée derrière l'élément. - blur-radius
Modifie le flou de l'ombre portée. Une valeur plus grande augmente le flou de l'ombre portée.
Attention, pour certain navigateur, le code doit être spécifique :
-webkit-box-shadow: 10px 10px 5px #888888; /* Chrome et Safari */
-moz-box-shadow: 10px 10px 5px #888888; /* Mozilla - Firefox */
-ms-box-shadow: 10px 10px 5px #888888; /* IE */
-moz-box-shadow: 10px 10px 5px #888888; /* Mozilla - Firefox */
-ms-box-shadow: 10px 10px 5px #888888; /* IE */
A comparer avec les effets d'ombre sur du texte dans un canvas HML5
border-image
Littéralement : image de contour. offre une méthode pour ajouter des contours décoratifs à n'importe quel élément.Exemple de contour :
.moncontour
{
border-image-source: url(images/contour.png);
border-image-width: 20px;
border-image-slice: 40;
}
Voici l'image que j'utilise :
La propriété
border-image est un raccourci qui permet de déclarer :- border-image-source
La source de l'image de contour est constituée de l'URL. - border-image-slice
La propriété border-image-slice définit jusqu'à quatre longueurs permettant d'indiquer la distance à partir de chaque coin de l'image, afin de couper ou trancher notre image de contour. - border-image-width
La propriété border-image-width donne la largeur du contour de l'élément. - border-image-outset
La propriété border-image-outset indique de combien la zone de l'image de contour peut s'étendre au-delà de l'espace de contour sur les quatre côtés. - border-image-repeat
La propriété border-image-repeat vous permet de préciser de quelle façon les parties de l'image hors coins (c'est-à-dire les côtés et le milieu) sont répétées ou mises à l'échelle. Valeur : round, repeat ou stretch.
La syntaxe du raccourci border-image doit être :
border-image: source slice width outset repeat
