float et shape-outside.
Float et shape-outside
Si float a beaucoup été utilisé pour créer des colonnes, choses auxquelles il n'etait pas vraiment destiné à l'origine, il a aujourd'hui shape-outside qui complete joliement son utilité premiere. définition sur Mozilla.org.
float permet d'ancrer à gauche ou à droite un élement en le retirant du flux naturel de la page. les contenus des élements suivant vont couler autour . Cette boite ainsi ancré se delimite par un rectangle de taille adaptée au contenu. c'est ce que shape-outside permet de modifier.
Une mise à jour de l'article est en cours, ce sera un pré-requis pour appréhender l'article une grille d'hexagone imbriqués en CSS..
Un exemple:
Voici un exemple avec une image flottante, le texte coule autour de sa boite sans occuper les parties transparentes de l'image si il y en a.Infos
quelques exemples viendront expliquer et completer l'usage de shape-outside qui a une syntaxe similaire à clip-path. Ils peuvent être utilisés conjointement. shape-margin permet d'ajouter une marge autour de la forme.
Si une image avec une forme opaque sur un fond translucide(png,gif) peut-etre utilisée, il y a aussi les fichiers SVG.
À ces fichiers images, des fonds en gradient peuvent aussi être utilisés sur un SVG ils peuvent être injectés via shape-outside:url(); sur un pseudo flottant.
Exemples
Pour patienter, voici quelques exemples ou les codes HTML CSS sont disponibles.
Ce premier exemple utilise shape-outside avec un radial-gradient pour contenir le texte dans un cercle.
C'est ce que l'on attendrat de shape-inside mais qui ne fonctionne pas encore.
Voir le Pen shape-outside to draw a circle by gc-nomade (@gc-nomade) on CodePen.
Un autre exemple avec une forme rectangulaire en rotation, le texte coule sur les diagonales.
Voir le Pen shape-outside by gc-nomade (@gc-nomade) on CodePen.
Un mixe d'un cercle et d'une diagonale pour deux contenus se superposant avec chacun la même forme en mirroir , repoussant les contenus dans deux zones.
La forme est genéré par un svg ayant un gradient en fond , s'adaptant à la hauteur de l'element et un cercle d'une taille constante.
Voir le Pen Display:grid Vs absolute - inside : css shapes / shape outside. by gc-nomade (@gc-nomade) on CodePen.
CSS Shape n'est pas nouveau mais largement utilisable aujourd'hui, ses premieres spécifications ont vu le jour en Décembre 2011.