Que pouvez-vous créer avec des formes CSS? Après tout, vous pouvez ajouter une variété de formes de base à votre feuille de style CSS en utilisant simplement un peu de codage CSS3. Pourquoi ne pas voir comment vous pouvez les utiliser sur votre site?
Les formes CSS ajoutent de l’intérêt aux pages Web. Les navigateurs devenant de plus en plus compatibles, ils peuvent réduire le nombre d’images volumineuses et inutiles qui occupent de l’espace sur votre site Web. Changer les couleurs et ajuster les formes ne pourrait pas être plus simple: Ajustez un peu le CSS et regardez votre design prendre forme.
Sommaire
Formes de base
Passons en revue quelques formes simples pour commencer. Ils sont tous assez faciles à utiliser, mais ajouteront tout de même un grand intérêt visuel à votre site. Le CSS est prêt pour vous – il vous suffit de le copier et de le modifier pour l’adapter à vos besoins.
Carrés
Les carrés sont sans doute la forme la plus facile à créer en CSS :
.square {
width: 100px;
height: 100px;
background: gray;
}
Si vous préférez plutôt un rectangle, ajustez simplement la largeur et la hauteur d’un rectangle horizontal ou vertical.
Cercle
Personnellement, j’aime ajouter une classe de cercle à une image. C’est une alternative rafraîchissante aux images carrées et rectangulaires habituelles auxquelles nous sommes si habitués sur Internet.
.circle {
width: 100px;
height: 100px;
background: red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
Si vous préférez, le rayon de la bordure peut également être la moitié de la mesure de la largeur et de la hauteur. Par exemple, étant donné que la largeur et la hauteur sont de 100 pixels, nous pourrions également indiquer le rayon de la bordure à 50 pixels.
Triangle
N’oublions pas notre ami à trois faces. Le triangle diffère du carré et du cercle en ce sens que nous devons inclure des déclarations de bordure pour la gauche, la droite et le bas. Notez que la largeur et la hauteur sont définies sur 0. Les bordures font tout le travail ici. La gauche et la droite sont transparentes tandis que le bas est défini sur 100px.
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gray;
}
Comparons un triangle qui pointe vers le haut à un qui pointe vers le bas. La plupart des propriétés et des valeurs sont les mêmes dans les deux exemples de triangle. La seule exception est la bordure supérieure. Nous n’avions pas besoin d’une bordure supérieure pour le .triangle-up classe, et pour la .triangle-down classe, nous n’avons pas besoin d’une bordure inférieure.
.triangle-down {
width: 0;
height: 0;
border-top: 100px solid gray;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
Formes complexes
Maintenant que nous avons couvert les bases, essayons de travailler sur des formes plus complexes, comme les rhomboïdes, les étoiles et les bulles.
Rhomboïde
Vous devrez peut-être repenser à la géométrie 101, mais un rhomboïde est simplement un parallélogramme dont les côtés adjacents sont inégaux et dont les angles ne sont pas des angles droits. En d’autres termes, un rectangle oblique.
Le 20deg fait référence à l’inclinaison autour de l’axe des x (l’horizontale, si Géométrie 101 est trop éloignée). Une marge gauche de 25 est spécifiée pour permettre une marge de manœuvre. Si la forme est trop à gauche, il est possible qu’elle soit coupée. Cela garantit que la forme entière est incluse.
.rhomboid {
width: 250px;
height: 150px;
background-color: gray;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
margin-left: 25px;
}
Étoile
Créer une étoile est le moyen idéal pour illustrer vos compétences en matière de CSS ! Gardez à l’esprit notre triangle du début de cet article. Une étoile assemble essentiellement trois de ces triangles. J’illustre cela avec trois couleurs différentes.
En regardant le code ci-dessous, le .star-five classe est violet, qui est la partie gauche de l’étoile. La rotation est ce qui met cela en place. La :before le pseudo-élément est ce qui donne à l’étoile la pièce rouge sur le dessus. La :after le pseudo-élément est la partie verte de l’étoile. Il est réglé pour compléter parfaitement la forme.
.star-five {
margin: 50px 0;
position: relative;
display: block;
color: purple;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid purple;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
} .star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
content: '';
} .star-five:after {
position: absolute;
display: block;
color: green;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid green;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
Bulles
Vous voulez ajouter une boîte de dialogue à votre projet ? Parfois, une bulle de dialogue classique est exactement ce dont vous avez besoin. Encore une fois, la magie opère avec le pseudo élément.
.speech-bubble {
width: 120px;
height: 80px;
background: gray;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
} .speech-bubble:before {
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid gray;
border-bottom: 13px solid transparent;
content: '';
}
Conclusion
Des carrés aux bulles, CSS3 permet de créer toutes sortes de formes dans le navigateur. Une fois que vous avez appris les bases, vous pouvez utiliser ces concepts pour créer vos propres formes uniques. Comment votre projet prendra-t-il forme?
