Cuisine et Web

Recettes pour Cuisiniers ou Web Dev en herbes

float et shape-outside.

Rédigé par G.Cyrille Aucun commentaire 170 vue(s)
Classé dans : CSS, WebDev Mots clés : float, shape-outside, gif, png, SVG, gradient

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.

La même image flottante et reprise avec shape-outside reprenant l'image comme réference, permet de voir le texte s'afficher dans les parties transparentes 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.

Laisser un message.

Quelle est le dernier caractère du mot 01c36nmt ?