OUJOOD.COM
Les propriétés CSS shape-outside: Définition
La propriété CSS shape-outside permet de définir la forme qui entoure un élément, créant ainsi une zone d'exclusion pour le contenu adjacent. Cela permet de détourer le contenu autour d'objets non rectangulaires, tels que des images ou des formes géométriques.
Syntaxe générale
La syntaxe générale de la propriété shape-outside est :
shape-outside: <shape>;
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
Valeurs possibles
- none: Pas de forme définie, le contenu n'est pas détourné.
- <shape-box>: Une forme définie par une boîte (par exemple, circle(), ellipse(), inset(), etc.).
- <basic-shape>: Une forme de base géométrique (par exemple, circle, ellipse, polygon, path, etc.).
- <image>: Une image utilisée pour définir la forme.
Exemples pratiques d'utilisation
Voici un exemple d'utilisation de la propriété shape-outside pour créer une zone d'exclusion autour d'un élément :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tutoriel Auto Hexagonal CSS shape-outside</title>
<style>
body{max-width:700px;
text-align:justify;}
.text-container {
width: 400px;
height: 300px;
shape-outside: circle(50%);
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<h1>Tutoriel Auto Hexagonal CSS shape-outside</h1>
<div class="text-container"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac tincidunt dui. Nullam lobortis, sapien sit amet placerat dignissim, enim nunc convallis lacus, id sollicitudin nisi ligula eu tellus. Duis vitae turpis non enim venenatis posuere. Nam eleifend felis eget neque condimentum, vel tempus metus pellentesque. Nulla facilisi. Suspendisse dapibus tellus vel consequat varius. Integer consequat lobortis elit, at volutpat est posuere non. Etiam cursus dolor at lorem condimentum posuere. Vestibulum fermentum risus eu ante sollicitudin, id cursus eros viverra. Nam maximus feugiat nisi, et hendrerit ante ullamcorper nec. Mauris gravida purus at mi aliquet, et facilisis odio aliquam. Nullam eleifend, diam sit amet efficitur eleifend, risus odio hendrerit sem, nec tincidunt tellus lectus at arcu.</p>
</body>
</html>
Voici le résultat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac tincidunt dui. Nullam lobortis, sapien sit amet placerat dignissim, enim nunc convallis lacus, id sollicitudin nisi ligula eu tellus. Duis vitae turpis non enim venenatis posuere. Nam eleifend felis eget neque condimentum, vel tempus metus pellentesque. Nulla facilisi. Suspendisse dapibus tellus vel consequat varius. Integer consequat lobortis elit, at volutpat est posuere non. Etiam cursus dolor at lorem condimentum posuere. Vestibulum fermentum risus eu ante sollicitudin, id cursus eros viverra. Nam maximus feugiat nisi, et hendrerit ante ullamcorper nec. Mauris gravida purus at mi aliquet, et facilisis odio aliquam. Nullam eleifend, diam sit amet efficitur eleifend, risus odio hendrerit sem, nec tincidunt tellus lectus at arcu. Sed continue
Astuces et conseils d'utilisation
- Assurez-vous que l'élément autour duquel vous définissez la forme possède une propriété de position (par exemple, float ou position: absolute;) pour que la propriété shape-outside puisse s'appliquer correctement.
- Utilisez des valeurs de forme appropriées telles que circle(), ellipse(), polygon() ou path() pour créer des formes personnalisées.
- Expérimentez avec des images pour définir des formes plus complexes en utilisant la valeur <image> de la propriété shape-outside.
- Utilisez des valeurs relatives pour la forme, telles que des pourcentages, pour qu'elle s'adapte à la taille de l'élément.
- Veillez à tester la compatibilité des navigateurs pour la propriété shape-outside, car certaines versions plus anciennes pourraient ne pas la prendre en charge.
Conclusion
La propriété CSS shape-outside est un outil puissant pour détourer le contenu autour d'éléments non rectangulaires, offrant ainsi des possibilités de mise en page créatives et attrayantes. En comprenant la syntaxe, les valeurs possibles et les astuces d'utilisation, vous pourrez exploiter pleinement cette fonctionnalité pour améliorer vos designs et créer des mises en page uniques.
Plus d'exemple pratique
ellipse()
Définir une forme elliptique autour d'un élément avec shape-outside.
.element {
shape-outside: ellipse(150px 300px at 50% 50%);
}
Dans cet exemple:
- 1. ".element" est un sélecteur CSS qui cible un élément spécifique au sein de votre page HTML. Vous pouvez remplacer ".element" par le sélecteur correspondant à l'élément que vous souhaitez styliser.
- 2. "shape-outside" est une propriété CSS qui permet de définir une forme qui enveloppe le contenu de l'élément et détermine la disposition du texte et des autres éléments adjacents à cette forme.
- 3. "ellipse(150px 300px at 50% 50%)" est une fonction de valeur pour la propriété "shape-outside". Elle définit une ellipse en spécifiant les dimensions de son rayon horizontal et vertical, ainsi que les coordonnées de son centre.
"150px" est la valeur du rayon horizontal de l'ellipse.
"300px" est la valeur du rayon vertical de l'ellipse.
"at 50% 50%" signifie que le centre de l'ellipse est positionné à 50% de la largeur et à 50% de la hauteur de l'élément. Cela place l'ellipse au milieu de l'élément.
url()
La valeur de la propriété "shape-outside" est définie comme une URL vers une image nommée "circle.png". Cette image sera utilisée pour créer une forme de détourage circulaire autour de l'élément.
.element {
shape-outside: url('circle.png');
}
Dans cet exemple, l'effet visuel résultant dépendra de la manière dont l'image "circle.png" est conçue. Par exemple, si l'image représente un cercle parfait avec un arrière-plan transparent, le contenu de l'élément sera affiché à l'intérieur de cette forme circulaire, tandis que le reste de la mise en page sera influencé par la forme de détourage.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 37 | 79 | 62 | 10.1 | 24 |