Easy-Micro


LANGAGE CSS3
Bordures CSS3

La propriété bordure en CSS3

border-radius

Exemple de radian (coins arrondis):
div
{
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 */

box-shadow

Exemple d'ombrage :
div
{
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 */

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

Pour aller plus loin...



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Vendredi 18 janvier 2019 - Semaine 03 - Sainte Prisca (Demain: Saint Marius)
Aujourd'hui, c'est l'anniversaire de Philippe Starck (1949-70 ans), créateur et décorateur d'intérieur français. Autre 18 janvier: 2016 - Décès de Glenn Frey le chanteur fondateur du groupe californien Eagles.
Haut de page Easy-Micro