Comment utiliser des formes CSS dans votre conception Web

Les principes de mise en page - colonnes et rangées, angles et lignes - que nous utilisons aujourd'hui pour créer des sites Web sont largement influencés par leur patrimoine imprimé. Et bien que la mise en œuvre de la grille sur le Web soit de mieux en mieux perfectionnée, la mise en page Web en général reste délicate par rapport aux médias imprimés, en particulier en ce qui concerne le flux de contenu.

Les magazines et les journaux ont toujours apprécié les manières élégantes d'organiser la mise en page du contenu, comme enrouler le texte autour ou à l'intérieur de formes non rectangulaires.

Magazine polyvalent de GreenSocks

Voyons comment le module CSS Shapes nous permettra cette même liberté sur le Web..

Introduction rapide aux formes CSS

Les formes CSS permettent aux concepteurs Web de créer des mises en page plus abstraites et géométriques, au-delà des simples rectangles et carrés. La spécification nous fournit de nouvelles propriétés CSS qui incluent forme extérieure et marge de forme. La prise en charge du navigateur est raisonnable, bien que ces propriétés ne soient actuellement disponibles que dans Chrome, Opera et Safari. -webkit- préfixe, donc -webkit-forme-extérieur.

le forme extérieure Cette propriété entraînera un enroulement du contenu en ligne (à l'extérieur) en suivant la courbe de l'élément, plutôt que le modèle de boîte. Au départ, il y avait aussi forme intérieure pour envelopper le contenu dans un élément; le texte contenu dans un élément circulaire serait également moulé en forme de cercle. Cependant, la mise en œuvre a été reportée pour CSS Shapes Level 2..

De haut en bas: forme extérieure et forme intérieure en action.

le marge de forme propriété définit la marge autour de la forme qui utilise le forme extérieure.

Voyons quelques exemples.

Créer une forme

Le moyen le plus simple de connaître le fonctionnement de CSS Shapes consiste probablement à créer un cercle. Alors, voici un div (notre cercle), avec plusieurs paragraphes à côté de.

Lorem ipsum…

Voici quelques styles de base, y compris la largeur et la hauteur de notre cercle, le rayon de la frontière pour mettre en forme l'élément, et un float pour que le paragraphe s'enroule autour de l'élément.

.cercle largeur: 250px; hauteur: 250px; couleur de fond: # 40a977; rayon de bordure: 50%; float: gauche;

Comme nous le ferions sauf, les paragraphes sont maintenant enroulés autour de l'élément. Cependant, comme la propriété border-radius ne définit pas la forme réelle de l'élément, le saut de paragraphe ne forme pas la courbe circulaire..

Si nous inspectons l'élément via notre navigateur DevTools, nous trouverons que l'élément est en fait toujours une boîte. Ainsi, même si notre div a l’apparence d’un cercle, le rayon de la frontière n'a rien fait au réel forme de l'élément.

Notez le surlignage rectangulaire autour de l'élément.

Pour que notre paragraphe adhère à la forme circulaire, nous devons changer la réel forme d'élément à travers le forme extérieure propriété; dans ce cas, nous en ajouterons un avec le cercle() fonction passée en tant que valeur.

.cercle largeur: 250px; hauteur: 250px; couleur de fond: # 40a977; rayon de bordure: 50%; float: gauche; -webkit-shape-outside: circle (); forme-extérieur: cercle ();

Nos paragraphes s’enroulent parfaitement autour de la circonférence du cercle.

De plus, si nous inspectons maintenant l'élément via DevTools, nous verrons que l'élément est correctement rendu dans un cercle..

Remarquez le point culminant plus sombre.

Avec quelques marges, voyez comment cela pourrait améliorer une mise en page simple:

Personnaliser le cercle

le cercle() fonction prend un couple de valeurs pour définir le rayon et le coordonnée centrale respectivement: cercle (r en x y). Par défaut, la valeur du rayon est dérivée de la taille de l'élément. si l'élément est 300px large, par exemple, le rayon sera 150px (le rayon étant la moitié du diamètre du cercle).

De même, le X et y les coordonnées sont mesurées par rapport à la taille de l'élément et sont définies par défaut à 50% 50%; juste au centre de l'élément.

Le cercle est positionné au centre de l'élément.

Ces deux valeurs vous seront utiles lorsque vous souhaitez redimensionner la forme tout en conservant la taille réelle de l'élément ou déplacer la forme tout en conservant la position de l'élément. Dans l'exemple suivant, nous allons réduire le rayon du cercle à 60px et définissez la coordonnée centrale sur 30% 70%, qui devrait déplacer le cercle en bas à gauche de la boîte de l'élément.

Les paragraphes passent maintenant à travers la case de l'élément suivant la taille du cercle. Voir la démo.

Il convient de noter que lors de la modification du cercle, la coordonnée centrale et le rayon doivent être définis explicitement. l'ajout d'un seul d'entre eux est invalide.

cercle (60px à 30% 70%) // correct. cercle (60px) // invalide. cercle (à 30% 70%) // invalide.

Modèle de boîte de forme

Les formes CSS héritent de la même chose modèle de boîte principe en tant qu'élément, mais appliqué en dehors du champ de l'élément lui-même. Cela nous permet de définir séparément l'élément, par exemple, boîte à bordure tout en définissant la forme rembourrage. Changer la forme modèle de boîte, ajouter l'un des modèle de boîte mots clés, contenu-box, boîte à marge, boîte à bordure, ou rembourrage après la fonction.

.cercle largeur: 250px; hauteur: 250px; couleur de fond: # 40a977; rayon de bordure: 50%; float: gauche; rembourrage: 10px; bordure: 20px solide #ccc; marge: 30px; -webkit-shape-outside: cercle () padding-box; forme-extérieur: cercle () padding-box;

Le modèle de boîte par défaut de la forme est défini sur boîte à marge. Et dans l'exemple suivant, nous l'avons changé pour rembourrage indiquer au navigateur d’exclure la marge de l’élément lors de la détermination de la taille ou de l’étendue de la forme. Maintenant, nous devrions trouver le paragraphe passer à travers la frontière et toucher immédiatement le rembourrage de l'élément.

Le carré orange est la marge, le carré jaune est la bordure et le carré vert est le rembourrage,

Je recommande fortement de consulter notre cours gratuit sur les bases du modèle de boîte CSS pour en savoir plus sur son fonctionnement en détail..

Créer plus de formes

La spécification CSS Shapes comprend quelques fonctions de forme supplémentaires:

ellipse(): Comme son nom l’indique, cette fonction créera une forme d’ellipse. Nous pouvons configurer le rayon de l'ellipse et déplacer la coordonnée du centre de la forme. Mais contrairement au cercle() la fonction, la ellipse() fonction applique deux mesures de rayon, horizontal et vertical, donc ellipse (100px 180px à 10% 20%).
polygone(): Cette fonction nous permet de créer des formes plus complexes telles que des triangles, des hexagones, ainsi que des formes non géométriques. Utiliser un polygone n’est pas aussi simple que de créer un cercle, mais l’outil Convertisseur de chemins en polygones le rend un peu plus intuitif..

Emballer

Dans ce didacticiel, nous avons examiné l'application de base des formes CSS; nous avons créé une forme, personnalisé la taille, la position et le modèle de boîte. Au moment de la rédaction, plusieurs aspects de CSS Shapes sont encore très grossiers, ce qui explique probablement pourquoi nous ne le voyons pas utilisé largement pour l'instant..

Comme mentionné précédemment dans ce tutoriel, les formes CSS forme intérieure propriété, qui nous permet d’envelopper et de mettre en forme le contenu dans un élément, a été mise sur la glace.
La spécification CSS Shapes fournit une propriété distincte nommée forme-boîte pour définir le modèle de boîte de forme, bien qu'il semble actuellement inapplicable à aucun navigateur.
Safari nécessite la -webkit- préfixe, soulignant que cette fonctionnalité est expérimentale.

Néanmoins, malgré les progrès lents et les disparités entre les navigateurs, je suis impatient de voir CSS Shapes! Une fois que les principaux navigateurs l'ont compris, j'ai hâte de voir des mises en page vraiment créatives sur le Web.!

Création de sites web