Traduction
Tutoriel CSS - sommaire
Tutoriel CSS3 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Grâce à CSS, les boites (ou images) peuvent prendre des formes diverses via la propriété border-radius.
Les boites (et images) peuvent être aussi ombrées avec la propriété box-shadow (ou via un filtre).
De jolies bordures basées sur des images peuvent être réalisées avec les propriétés préfixées border-image-
(ou le raccourci border-image).
Ci-dessus un cercle, une ellipse, une "patate" et une image centrée et avec des coins arrondis.
Le CSS correspondant :
Définition de la classe "etrange" : {margin : 10px auto; background : lime;}
Définition de la classe "centre" : {display : block ; margin : 10px auto ; width : 60%;}
Grâce à la propriété CSS border-radius on peut produire des boîtes avec des angles arrondis mais aussi des cercles et des ellipses, etc.
Comme vous pouvez le constater à la lecture du code, la propriété border-radius peut aussi s'appliquer à une image de type "block".
Notez que les valeurs de la propriété border-radius sont exprimées ici tantôt en pixels, tantôt en pourcentages.
Radius veut dire rayon. Donc dans le cadre de cette propriété vous devez préciser le rayon de l'arc de cercle qui arrondit l'angle.
Observez bien le code CSS de cette page. Vous constatez que la propriété border-radius admet plusieurs syntaxes.
Pour dessiner un cercle il suffit de créer un carré (largeur = hauteur) et demander que les angles soient arrondis avec un rayon égal à la moitié du côté du carré. Donc la première syntaxe de cette propriété est : border-radius : côté carré / 2.
Pour dessiner une ellipse il suffit de créer un rectangle et demander que les angles soient arrondis avec un rayon horizontal égal à la moitié de la largeur et un rayon vertical égal à la moitié de la hauteur. Donc la syntaxe de la propriété est alors : border-radius : rh / rv. Avec rh : rayon horizontal et rv : rayon vertical.
Pour dessiner une "patate" il faut dessiner un rectangle et demander que les quatre angles aient des rayons différents.
La syntaxe de la propriété devient donc : border-radius : hg hd bd bg
Avec hg : rayon angle haut gauche, hd : rayon angle haut droit, bd : rayon angle bas droit et bg : rayon angle bas gauche.
Les boites et images avec des coins arrondis pour les deux derniers éléments.
Pour les deux premiers éléments l'ombre est projettée en bas à droite.
Pour les deux derniers éléments l'ombre est projettée en haut à gauche.
Boite ombrée
Boite ombrée et aux coins arrondis
Pour la propriété box-shadow de CSS il y a quatre paramètres à passer : offset horizontal, offset vertical, floutage, couleur de l'ombre.
Pour les deux premiers paramètres la valeur peut être négative afin d'inverser la projection de l'ombre (par défaut ombre en bas et à droite).
Pour le troisième paramètre, 0px correspond à l'absence de floutage.
Il existe une autre façon d'ombrer les boites et les images : utiliser un filtre CSS : propriété filter argumentée avec la fonction
drop-shadow().
Dans l'exemple ci-dessous, je vous montre que les deux solutions ne sont pas totalement identiques ...
Pour une image autorisant la transparence et avec la propriété box-shadow c'est la boite contenant l'image qui est ombrée alors qu'avec la fonction drop-shadow de filter, c'est l'image proprement dite (indépendamment du fond transparent) qui est ombrée.
Pour un format d'image n'autorisant pas la transparence, les deux méthodes donnent un rendu identique.
Avec des formats d'images autorisant la transparence (GIF & PNG & SVG) la fonction drop-shadow est très intéressante.
On peut construire une jolie bordure à partir d'une image.
Il faut utiliser les propriétés préfixées border-image- OU le raccourci border-image
border-image est une propriété raccourcie, qui permet de définir en une seule règle, les valeurs de toutes les propriétés relatives aux bordures-image qui sont :
Utilisation des différentes propriétés.
Pour définir les deux bordures j'utilise la même source.
Je code avec les propriétés préfixées (et non pas avec le raccourci).
Pour la propriété "border-image-width" il faut précisér l'unité alors que pour "border-image-slice" c'est inutile ; c'est forcément
des pixels.
Dans la définition de la première bordure, la valeur de border-image-slice à 20 est donc trop faible.
L'image qui servira à construire la bordure est divisée en 9 parties : une pour chacun des quatre coins, une pour chacun des quatre bords et
une pour le centre. Les neuf parties ne sont pas forcément de dimensions identiques.
Le plus souvent une seul valeur qui précise la découpe à partir des 4 bords.
Attention il faut alors utiliser aussi le raccourci border
L'image source fait 81 par 81.
Elle va être découpée(slicée) de 27px à partir des angles.
Les 9 zones obtenues font chacune 27 par 27 pixels.
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Donc les zones (1) (3) (7) (9) on récupère les losanges orange.
Et les zones (2) (4) (6) (8) les losanges jaunes.
Les zones (1) (3) (7) (9) servent à construire les coins de la bordure. Les zones (2) (4) (6) (8) servent à construire les côtés.
Les morceaux d'images découpés correspondant aux zones (2) (4) (6) (8)
sont soit étirés soit répétés selon les valeurs de repeat .
Le raccourci border-image doit comprendre au moins trois arguments : source slice repeat.
Pour "repeat" il est possible d'indiquer deux valeurs (une pour les côtés horizontaux de la bordure et une autre pour les côtés verticaux).
Trois boites bordurées à partir de la même image.