Fermer

septembre 4, 2018

Jetez un nouveau regard sur les formes CSS


À propos de l'auteur

Rachel Andrew est non seulement rédactrice en chef de Smashing Magazine, mais également développeur web, rédactrice et conférencière. Elle est l'auteur d'un certain nombre de livres, y compris…
Plus sur Rachel

Dans cet article, nous examinons les formes CSS et comment créer des formes non rectangulaires à l'aide d'images, de dégradés et de formes de base. Nous découvrons également comment les nouveaux outils de Firefox facilitent l'édition des formes.

CSS Shapes Level 1 est disponible depuis plusieurs années dans Chrome et Safari. Cependant, cette semaine, il est livré avec une version de production de Firefox avec Firefox 62, ainsi qu'un très bon ajout aux Firefox DevTools. aidez-nous à travailler avec les formes. Dans cet article, je vais examiner certaines des possibilités offertes par les formes CSS.

Que sont les formes CSS?

La spécification des formes CSS de niveau 1 définit trois nouvelles propriétés:

  • shape-dehors
  • shape-image-threshold
  • ] margin-shape

L'objet de cette spécification est de permettre au contenu de circuler autour d'une forme non rectangulaire, ce qui est assez inhabituel sur notre site web. Il existe différentes manières de créer des formes, que nous examinerons dans ce tutoriel. Nous examinerons également l'éditeur de chemin de forme, disponible dans Firefox, car il peut vous aider à comprendre facilement les formes de votre page et à les utiliser.

Dans la spécification actuelle, les formes ne peuvent être appliquées qu'à un élément flottant Ainsi, tout exemple de forme doit commencer par un élément flottant. Dans l'exemple ci-dessous, j'ai une image PNG avec un arrière-plan transparent dans lequel j'ai laissé l'image à gauche. Le texte qui suit l'image circule désormais autour de la droite et du bas de mon image.

Ce que je souhaiterais, c'est que mon contenu suive la forme de la partie opaque de l'image, plutôt que de suivre la ligne physique. fichier d'image. Pour ce faire, j'utilise la propriété shape-dehors la valeur étant l'URL de mon image. J'utilise le fichier image réel pour créer un chemin permettant au contenu de circuler.

Voir le stylo Formes brisées: image de Rachel Andrew ( @rachelandrew ) sur CodePen .

Notez que votre image doit être compatible avec CORS, donc hébergée sur le même serveur que le reste de votre contenu ou en envoyant les en-têtes appropriés si elle est hébergée sur un CDN. Navigateur DevTools vous indiquera généralement si votre image est bloquée à cause de CORS.

Cette méthode de création de formes utilise le canal alpha de l'image pour créer la forme, car nous avons une forme avec une zone entièrement transparente. besoin de passer l'URL de l'image à shape-outside et le chemin de la forme suit la ligne de la zone complètement opaque.

Création d'une marge

Pour repousser la ligne de texte de l'image, on peut utiliser la propriété margin-margin . Cela crée une marge entre la ligne de la forme et le contenu qui l'accompagne.

Voir le stylo Formes brisées: marge de forme de Rachel Andrew ( @rachelandrew ) le CodePen .

Utilisation du contenu généré pour notre forme

Dans le cas ci-dessus, l'image est affichée sur la page, puis le texte est courbé. Cependant, vous pouvez également utiliser une image comme chemin de la forme pour créer un effet de texte incurvé sans inclure l'image sur la page. Vous avez toujours besoin de quelque chose pour flotter, cependant, pour cela, nous pouvons utiliser le contenu généré.

Voir le stylo Formes brisées: contenu généré par Rachel Andrew ( @rachelandrew ) sur CodePen .

Dans cet exemple, nous avons inséré du contenu généré, le flotté à gauche, lui donnant une largeur et une hauteur, puis utilisé shape-outside avec notre image juste comme avant. Nous obtenons alors une ligne courbe contre l'espace, mais pas d'image visible.

Utiliser un dégradé pour notre forme

Un dégradé CSS est comme une image, ce qui signifie que nous pouvons utiliser un dégradé pour créer une forme faire des effets intéressants. Dans cet exemple suivant, j'ai créé un dégradé allant du bleu au transparent; votre dégradé devra avoir une zone transparente ou semi-transparente pour pouvoir utiliser des formes. Encore une fois, j'ai utilisé le contenu généré pour ajouter le dégradé et j'utilise ensuite le dégradé dans la valeur pour shape-dehors .

Une fois que le dégradé devient complètement transparent, la forme entre en jeu et le contenu court le long du bord du dégradé.

Voir le stylo Formes brisées: dégradés de Rachel Andrew ( @rachelandrew ) sur CodePen . ] Utilisation de shape-image-threshold Pour positionner du texte sur une image semi-opaque

Jusqu'à présent, nous avons envisagé d'utiliser une partie complètement transparente d'une image ou d'un dégradé pour créer notre forme. Cependant, la troisième propriété définie dans la spécification des formes CSS signifie que nous pouvons utiliser des images ou des dégradés avec des zones semi-opaques en définissant un seuil. Une valeur pour shape-image-threshold de 1 signifie complètement opaque tandis que 0 signifie totalement transparent.

Un dégradé comme notre exemple ci-dessus est un excellent moyen pour voir cela en action, nous pouvons modifier la valeur shape-image-threshold et déplacer la ligne le long de laquelle le texte tombe vers des zones plus opaques ou des zones plus transparentes. Cette propriété fonctionne exactement de la même manière avec une image comportant un canal alpha mais n’est pas totalement transparente.

Voir le stylo Formes brisées: forme-image-seuil de Rachel Andrew ( @ rachelandrew ) sur CodePen .

Cette méthode de création de formes à partir d'images et de dégradés est, je pense, la manière la plus simple de créer une forme. Vous pouvez créer une forme aussi complexe que vous le souhaitez, dans le confort d'une application graphique, puis l'utiliser pour définir la forme de votre page. Cela dit, il existe un autre moyen de créer nos formes, à savoir Formes de base .

Formes CSS avec formes de base

Les formes de base sont un ensemble de formes prédéfinies couvrant différents types de formes que vous pourriez vouloir créer. Pour utiliser une forme de base, vous utilisez la forme de base tapez comme valeur pour shape-outside . Ce type utilise la notation fonctionnelle, nous avons donc le nom de la forme suivi des parenthèses (à l'intérieur desquelles se trouvent certaines valeurs pour notre forme).

Les options que vous avez sont les suivantes:

  • inset ()
  • circle ()
  • ellipse ()
  • polygon ()

Nous allons examiner le type circle () car nous pouvons l'utiliser pour comprendre certaines choses utiles qui s'appliquent à toutes les formes. qui utilisent le type de forme de base. Nous examinerons également les nouveaux outils de Firefox pour inspecter ces formes.

Dans l'exemple ci-dessous, je crée les formes les plus simples: un cercle utilisant shape-outside: circle (50%) . J'utilise à nouveau le contenu généré, j'ai donné à la boîte une couleur d'arrière-plan et ajouté une marge, une bordure et un remplissage pour mettre en évidence certains des concepts d'utilisation des formes CSS. Vous pouvez voir dans l'exemple que le cercle est créé centré sur la boîte; C'est parce que j'ai donné au cercle une valeur de 50%. Cette valeur est la qui peut être une longueur ou un pourcentage. J'ai utilisé un pourcentage pour que le rayon soit la moitié de la taille de ma boîte.

Voir le stylo Formes fracassantes: forme-extérieur: cercle () par Rachel Andrew ( @rachelandrew ) sur CodePen .

Il est très utile d'examiner la forme créée à l'aide de l'éditeur de chemin de forme de Firefox. Vous pouvez inspecter la forme en cliquant sur le contenu généré, puis en cliquant sur l'icône représentant une petite forme près de la propriété shape-outside ;


 La ​​forme mise en évidence par une ligne
L'éditeur de trajectoire forme la forme du cercle ( Grand aperçu )

Vous pouvez voir comment le cercle s'étend jusqu'au bord de la marge de notre boîte. Cela est dû au fait que la boîte de référence initiale utilisée par notre forme est margin-box . Vous connaissez déjà quelque chose de boîtes de référence si vous avez déjà ajouté box-sizing: border-box à votre CSS. Lorsque vous cela effectuez, vous demandez à CSS d'utiliser la border-box et non la boîte de contenu par défaut comme taille des éléments. Dans Formes, nous pouvons également modifier la zone de référence utilisée. Après toute forme de base, ajoutez border-box pour utiliser la bordure pour définir la forme ou content-box pour utiliser le bord du contenu (à l'intérieur du remplissage). Par exemple:

 .content :: before {
    contenu: "";
    largeur: 150px;
    hauteur: 150px;
    marge: 20px;
    rembourrage: 20px;
    bordure: 10px solide # FC466B;
    background: gradient linéaire (90deg, # FC466B 0%, # 3F5EFB 100%);
    float: à gauche;
    cercle (50%) content-box;
}

Vous verrez que le cercle semble devenir beaucoup plus petit. Il utilise maintenant la largeur du contenu – dans ce cas, la largeur de la boîte à 150 pixels – plutôt que la zone de marge qui inclut le remplissage, la bordure et la marge.


 Un cercle plus petit est mis en évidence
boîte est le bord du contenu du carré que nous avons créé avec notre contenu généré ( Grand aperçu )

Inspection de votre élément dans Firefox Les DevTools vous montreront également les boîtes de référence afin que vous puissiez choisir celui qui vous donnera le meilleur résultat avec votre forme particulière.


 Faits saillants montrant la marge, la bordure et le remplissage
Firefox ( Grand aperçu )
La ​​valeur de la position

Une seconde valeur peut être transmise à circle () qui est une position; Si vous ne transmettez pas cette valeur, sa valeur par défaut est center . Cependant, vous pouvez utiliser cette valeur pour déplacer votre cercle. Dans l'exemple suivant, j'ai positionné le cercle en utilisant shape-outside (50% à 30%) ; cela change où le centre du cercle est positionné.

Voir le stylo Formes fracassantes: circle () avec la position de Rachel Andrew ( @rachelandrew ) sur CodePen .

clip-path

Il est utile de savoir que les mêmes valeurs peuvent être utilisées comme valeur pour chemin de clip . Cela signifie qu'après avoir créé une forme, vous pouvez découper l'image ou la couleur d'arrière-plan qui s'étend en dehors de la forme. Dans l'exemple ci-dessous, je vais le faire avec notre exemple de fond dégradé, de sorte que nous finissions avec un cercle dont le texte est courbé depuis notre boîte carrée.

Voir le stylo Smashing SHapes: circle () avec clip-path de Rachel Andrew ( @rachelandrew ) sur CodePen .

Tous les concepts ci-dessus peuvent être appliqués à nos autres formes de base. Voyons maintenant comment ils fonctionnent.

inset ()

La valeur inset () définit un rectangle. Cela peut ne pas sembler très utile, car un flottant est un rectangle, mais cette valeur signifie que vous pouvez insérer le contenu qui enveloppe votre forme. Il faut quatre valeurs pour top, right, bottom et left plus une valeur finale qui définit un rayon de bordure.

Dans l'exemple ci-dessous, j'utilise les valeurs pour insérer le contenu à droite et en bas de l'image flottante, plus l'ajout d'un rayon de bordure autour duquel mon contenu sera enveloppé à l'aide de shape-outside: encart (0 30px 100px 0 round 40px) . Vous pouvez voir comment le contenu est maintenant sur la couleur d'arrière-plan de la boîte:

Voir le stylo Formes brisées: encart () par Rachel Andrew ( @rachelandrew ) sur CodePen .

ellipse ()

Une ellipse est un cercle écrasé et nécessite donc deux rayons pour x et y (dans cet ordre). Vous pouvez ensuite pousser l'ellipse comme avec un cercle en utilisant la valeur de la position. Dans l'exemple ci-dessous, je crée une ellipse, puis j'utilise un chemin d'accès de clip avec les mêmes valeurs pour supprimer le contenu en dehors de ma forme.

Voir le stylo Formes brisées: ellipse () ( @rachelandrew ) sur CodePen .

Dans l'exemple ci-dessus, j'ai également utilisé marge de forme pour montrer comment utiliser cette propriété

polygon ()

La création de formes polygonales nous donne le plus de flexibilité, car nos formes peuvent être créées avec trois points ou plus. La valeur transmise au polygone doit être constituée de trois paires ou plus de valeurs représentant des coordonnées.

C'est ici que les outils Firefox deviennent vraiment utiles car nous pouvons les utiliser pour aider à créer notre polygone. Dans l'exemple ci-dessous, j'ai créé un polygone avec quatre points. Dans Firefox DevTools, vous pouvez double-cliquer sur une ligne pour créer un nouveau point et double-cliquer à nouveau pour la supprimer. Une fois que vous avez créé un polygone dont vous êtes satisfait, vous pouvez alors copier la valeur de DevTools pour votre code CSS.

Voir le stylo Formes brisées: polygone () par Rachel Andrew ( @rachelandrew ) sur CodePen .

Fallbacks

Lorsque les formes CSS sont appliquées à un float, dans de nombreux cas, le repli est que le contenu entourera un élément flottant (de la même manière que le contenu a toujours été enroulé autour des éléments flottants). Les navigateurs ignorent les propriétés qu'ils ne comprennent pas, donc s'ils ne comprennent pas les Formes, peu importe que la propriété à l'extérieur de existe.

Où que vous deviez faire attention dans n'importe quelle situation où le fait de ne pas avoir de formes pourrait signifier que le contenu recouvre une zone qui le rend difficile à lire. Vous utilisez peut-être par exemple des formes pour extraire du contenu d'une zone occupée d'une image d'arrière-plan, par exemple. Dans ce cas, vous devez d'abord vous assurer que votre contenu est utilisable par les personnes non-Shapes, puis utiliser les requêtes d'entité pour vérifier le support de shape-dehors et écraser ce CSS et appliquer la forme. Par exemple, vous pouvez utiliser une marge pour extraire le contenu des visiteurs non-Shapes et supprimer la marge à l'intérieur de votre requête.

 .content {
    marge à gauche: 120px;
}

@supports (shape-outside: circle ()) {
    .contenu {
        margin-left: 0;
        / * ajoute le reste de tes formes CSS ici * /
    }

}

Avec le support de Firefox, nous n'avons plus qu'un seul navigateur principal sans prise en charge de Shapes – Edge. Si vous voulez voir le support de Shapes à travers le forum, vous pouvez aller voter pour la fonctionnalité ici et voir si nous pouvons encourager l'implémentation de cette fonctionnalité dans Edge.

En savoir plus sur les formes CSS [19659066] Dans cet article, j'ai essayé de donner un aperçu rapide de certaines choses intéressantes possibles avec les formes CSS. Pour plus de détails sur chaque fonctionnalité, consultez les Guides to CSS Shapes sur MDN. Vous pouvez également lire un guide de l'éditeur de chemin de forme dans Firefox .

 Smashing Editorial (il)




Source link