Comment concevoir avec des formes CSS: une introduction

La base de chaque site Web est de subdiviser la page en éléments plus petits qui ont du contenu. Le gros problème avec cela pour les concepteurs est que le contenu est toujours un rectangle. Les écrans sont de forme rectangulaire et toute subdivision de ceux-ci sera un rectangle. Dans ce didacticiel, nous allons examiner comment aller au-delà des formes rectangulaires en utilisant la propriété CSS clip-path et la rotation pour rendre la conception plus intéressante. Pour d'autres façons de rendre vos créations plus intéressantes, consultez nos exemples de Animation CSS . Si tout cela semble trop de travail, essayez un top Générateur de site Web au lieu. Mais quels que soient les besoins de votre site, vous devez obtenir le bon hébergement Web pour vous.

La forme la plus simple pour commencer est un cercle ou un ovale. Si vous avez un rectangle et que vous définissez tout le rayon de la bordure à plus de 50%, vous aurez un ovale, et si vous commencez par un carré, parce que tous les côtés ont la même longueur, vous obtiendrez un cercle. C'est quelque chose que vous avez probablement déjà fait auparavant, mais c'est une technique souvent sous-utilisée dans la conception des pages.

Une solution plus complexe consiste à créer un triangle en utilisant le chemin de clip CSS pour réduire la partie visible d'un div. Un triangle est une forme assez simple à créer car il ne comporte que trois points, mais si vous souhaitez créer des formes plus complexes, un éditeur de chemin de clip visuel sera nécessaire.



Ce didacticiel vous montrera comment ajouter tous ces éléments ensemble, y compris les dégradés et les rectangles rotatifs, pour créer un design plus unique. Ajoutez des dégradés CSS et une conception géométrique complexe peut être créée via CSS.

01. Commencer

Ouvrez le début dossier dans votre éditeur de code IDE et commencez à éditer le index.html page. Pour commencer le didacticiel, un simple lien vers les polices de caractères Google Fonts sera nécessaire afin que lorsque du texte est inclus plus tard, les polices appropriées puissent être ajoutées à la page.

02. Ancrer les formes ensemble

Dans le corps balise sur la page ajouter le contenu suivant. Le la forme contient La balise div sera utilisée pour contenir toutes les différentes formes qui sont produites, et cela sera fait pour remplir la fenêtre du navigateur. La première forme à créer sera un simple cercle, qui ancrera les autres images ensemble.

03. Faites la page

Passez maintenant à la CSS dossier et ouvrez le formes.css déposer. Le corps et le HTML sont simplement définis pour remplir le navigateur avec la bonne famille de polices, configurée pour la majorité du texte qui sera ajouté vers la fin du didacticiel en guise de touche finale.

body, html { margin: 0; padding: 0; width: 100%; height: 100vh; overflow-x: hidden; font-family: 'Lato', sans-serif; text-transform: uppercase; }

04. Contenir les formes

Scène de montagne sur un écran d

Commencez avec votre image de fond en place

La règle CSS suivante est pour le div avec l'ID de shape_contain . Ceci est configuré pour remplir le navigateur avec tout débordement caché. Le translate3d est de s'assurer que le contenu est accéléré par le matériel. Une grande bordure est ajoutée avant deux images d'arrière-plan. L'une est une image régulière tandis que celle ci-dessus est un dégradé semi-transparent de couleur aqua.

#shape_contain { box-sizing: border-box; width: 100%; height: 100vh; overflow: hidden; transform: translate3d(0, 0, 0); border: 20px solid rgb(255, 254, 244); background: linear-gradient(0deg, rgba (7, 47, 46, 0.8) 0%, rgba(255, 252, 226, 0.5) 100%), url(../images/mountain.jpg) no-repeat center center; background-size: cover; }

05. Commencez par un cercle

Fond de montagne avec cercle translucide bleu

Les cercles sont la forme la plus simple à créer

La première forme géométrique qui sera créée est l'une des formes les plus simples. Un cercle peut être fait de n'importe quel carré div en ajoutant un rayon de bordure de cinquante% . Le cercle est semi-transparent, avec une ombre douce ajoutée sur le bord de celui-ci.

#circle { width: 80vh; height: 80vh; border-radius: 50%; background: rgba(136, 239, 231, 0.3); position: absolute; top: 7vh; left: 50%; transform: translate3d(-50%, 0, 0); box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.3); }

06. Essayez un triangle

La forme suivante sera légèrement plus complexe car il s'agit d'un triangle. Il est relativement simple de créer en utilisant le chemin de clip CSS qui permet de créer une forme de polygone. Ajoutez ce div dans le shape_contain div.

07. Appliquer le triangle

Triangle avec femme recadrée

Un filtre modifie légèrement la teinte

Ici le clip-path est créé pour que le CSS crée le triangle. La forme est simplement trois points. L'image d'arrière-plan est ajoutée et un filtre est ajouté ici afin que la teinte puisse être légèrement décalée, ce qui donne à l'image une légère teinte rose accentuée par le contraste.

#tri1 { clip-path: polygon(0 0, 100% 0, 50% 100%); width: 100vh; height: 88vh; background: url(../images/girl3.jpg) no-repeat center center; background-size: cover; position: absolute; top: 10vh; left: 50%; transform: translate3d(-50%, 0, 0); filter: hue-rotate(310deg) contrast(140%); opacity: 0.8; }

08. Aller plus complexe

Capture d

Cet outil vous permet de créer des formes plus complexes

La prochaine forme à créer sera un triangle avec un trou au milieu. Cela semble relativement simple, mais le polygone de l’élément doit être une ligne continue, il est donc plus complexe à créer. Si vous devez créer une forme similaire, utilisez Créateur de chemins de clip de Bennett Feely pour créer la forme.

09. Empilez les formes

La forme ici est plus complexe car elle a été créée visuellement dans le lien mentionné précédemment. L'image des nuages ​​est placée dans la forme, puis la teinte est ajustée pour la rendre un peu plus jaune. Chaque forme est positionnée de manière absolue, au centre de la division environnante, et empilée l'une sur l'autre.

#tri2 { clip-path: polygon(50% 0, 0% 100%, 9% 100%, 50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%, 100% 100%, 50% 0); width: 80vh; height: 70vh; background: url(../images/clouds.jpg) no-repeat center center; background-size: cover; position: absolute; top: 1vh; left: 50%; transform: translate3d(-50%, 0, 0); filter: hue-rotate(90deg) contrast(140%); opacity: 0.7;}

10. Essayez de redimensionner le navigateur

Le triangle suivant doit être ajouté dans le shape_contain div. Si vous cochez le navigateur, vous verrez que vous pouvez redimensionner le navigateur et les formes se redimensionneront parfaitement, car elles sont basées sur des pourcentages. Le conteneur est défini avec la hauteur de la fenêtre de sorte qu'il s'adapte toujours à l'écran.

11. Donnez du style

Plus de triangles superposés au design

Le triangle final a un trou au centre

Le triangle final utilise la même forme que le précédent avec le trou au centre. Cette fois, il n'a qu'une simple nuance de turquoise plutôt qu'une image. La transparence est réglée bas pour pouvoir voir à travers ce triangle vers l'autre contenu ci-dessous.

#tri3 { clip-path: polygon(50% 0, 0% 100%, 9% 100%, 50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%, 100% 100%, 50% 0); width: 80vh; height: 70vh; background: rgba(0, 113, 110, 0.2); position: absolute; top: 20vh; left: 50%; transform: translate3d(-50%, 0, 0); }

12. Créez une bande inclinée

Conception avec bande rose inclinée ajoutée

Mélangez la bande inclinée en utilisant un dégradé semi-transparent

La forme suivante est une forme div angulaire. Ce sera placé entre le triangle un et deux dans le shape_contain balise div. Mélangez-le dans la page en utilisant un dégradé semi-transparent sur l'écran. Ceux-ci seront également évolutifs vers des écrans de différentes tailles.

13.Faire les angles

Capture d

L'ID définit la position de la forme

Le déshabiller class définit le dégradé d'arrière-plan. Ceci est fait à l'aide de l'éditeur de dégradés en ligne Gradient CSS . L'ID définit ensuite la position de cette forme de gradient inclinée particulière. Il est placé au centre, puis légèrement décalé afin de conserver un placement cohérent sur différents moniteurs.

.strip { position: absolute; background: linear-gradient(0deg, rgba(164, 0, 217, 0) 0%, rgba(164, 0, 217, 0.3) 35%, rgba(255, 67, 134, 0.3) 65%, rgba(255, 67, 134, 0) 100%); } #strip1 { width: 20vh; height: 120vh; left: 50%; transform: translate3d(-175%, -15%, 0) rotateZ(30deg); }

14. Essayez plus d'angles de dégradé

Deux autres balises div sont maintenant ajoutées qui contiennent la classe de déshabiller . L'ID leur permettra d'être placés dans différentes positions sur l'écran. Celles-ci sont utilisées comme des formes répétitives qui renforcent l'esthétique globale de la scène, tout en ajoutant une touche de couleur.

15. Positionnez l'angle

Conception finale, avec des formes CSS en couches sur un fond photographique

Les derniers ajouts aident à équilibrer la conception

Les deux formes de gradient d'angle de bande sont positionnées de chaque côté du contenu principal de l'écran. L'un est placé vers le bas à gauche et l'autre vers le haut à droite de manière à équilibrer l'écran. Redimensionnez le navigateur pour voir ces éléments rester en place sur l'écran et mettre à l'échelle pour s'adapter.

#strip2 { width: 5vh; height: 90vh; left: 50%; transform: translate3d(60vh, -15%, 0) rotateZ(30deg); } #strip3 { width: 5vh; height: 90vh; left: 50%; transform: translate3d(-70vh, 25%, 0) rotateZ(30deg); }

16. Ajoutez du contenu textuel

Cette page ne contient pas une énorme quantité de contenu textuel, mais les div ici contiennent tout le contenu de page restant à placer à l'écran. Les div doivent être ajoutés avant la balise div de fermeture du shape_contain panneau. Ces éléments de texte seront divisés en différents coins.

Go beyond the rectangle Responsive shape layouts Web Designers
CSS Toolkit 2019 CSS Shapes

17. Faire pivoter le texte

Le div du côté gauche est positionné absolument sur le côté gauche de l'écran, et il est tourné autour de 90 degrés dans le sens inverse des aiguilles d'une montre afin qu'il s'adapte sur le côté. L'origine de la transformation est légèrement déplacée pour rapprocher le texte du bord de l'écran.

#leftside { position: absolute; left: 20px; top: 70%; transform-origin: 10% 0%; transform: rotate(-90deg); }

18. Positionnez le texte de droite

Le texte de droite est très similaire au texte de gauche, sauf qu’il est positionné à partir du côté droit de l’écran. La rotation doit être poussée dans le sens des aiguilles d'une montre pour que le texte se trouve mieux et se lise plus facilement à droite de l'écran.

#rightside { position: absolute; right: 20px; top: 70%; transform-origin: 90% 0%; transform: rotate(90deg); }

19. Styliser le texte

Le texte du coin supérieur gauche est maintenant stylisé. Les deux premiers mots sont laissés à leur taille par défaut, tandis que les mots restants sont agrandis et positionnés sur la ligne suivante vers le bas afin de fournir une certaine hiérarchie au texte. Cela restera dans le coin supérieur gauche lors de tout redimensionnement.

#topLeft { position: absolute; left: 40px; top: 40px; width: 180px; text-align: center; } #topLeft span { font-size: 1.8em; }

20. Définissez le texte de droite

Le texte du coin supérieur droit est maintenant défini. Ceci est placé à l'intérieur d'un cercle rond noir, avec le texte placé en blanc contre le cercle. Cela utilise la méthode de hauteur de ligne pour aligner le texte au centre, en utilisant la hauteur de ligne identique à la hauteur div.

#topRight { position: absolute; right: 35px; top: 25px; line-height: 100px; font-size: 1.4em; width: 100px; height: 100px; background: #000; color: #fff; text-align: center; border-radius: 50%; }

21. Définissez le texte du titre

Conception finale affichée dans une fenêtre de navigateur de taille mobile

Le dernier texte à définir est le titre principal

Le tout dernier texte à définir est le titre principal au centre de l'écran. La police de caractères est modifiée pour cela et elle reçoit une couleur semi-transparente rose clair afin qu'elle se fond avec la couleur de surbrillance de cette conception de page. Enregistrez la page et actualisez votre navigateur pour voir le résultat final. Vous souhaitez enregistrer ou partager une copie de la page? Exportez-le au format PDF et enregistrez-le dans stockage en ligne .

#headline { position: absolute; width: 100%; z-index: 200; padding-top: 65vh; font-family: 'Arvo', serif; text-align: center; color: rgba(233, 173, 255, 0.8); font-size: 8vw; text-shadow: 0px 3px 50px rgba(0, 0, 0, 0.5); }

Cet article a été initialement publié dans le magazine de conception Web créative Concepteur Web . Acheter numéro 284 ou s'abonner .

Lire la suite: