Comment créer une forme de coeur avec CSS
CSS3 améliore la faisabilité de ce que nous pouvons créer sur des sites Web en utilisant simplement HTML et CSS. Vous pouvez trouver des exemples étonnants que nous avons déjà présentés. Mais n'ayons pas une longueur d'avance sur nous-mêmes, une conception compliquée nécessitera des codes pouvant vous donner mal à la tête..
Au lieu de cela, nous allons créer quelque chose de simple pour vous aider d'abord comprendre les formes et le positionnement avec CSS, avant de s'aventurer dans des conceptions plus avancées. Puisque la Saint-Valentin approche à grands pas, créons une forme de cœur en utilisant HTML et CSS.
Les bases
Fondamentalement, nous pouvons créer une nouvelle forme en joignant une ou plusieurs formes de base, telles que des rectangles et des cercles. Si nous examinons une forme de coeur, nous pouvons constater qu’elle est composée de deux cercles et un rectangle combinés. Les éléments HTML sont essentiellement un carré ou un rectangle. Grâce au rayon de bordure CSS3, nous pouvons facilement transformer un rectangle en cercle.
Commencez par ajouter un Ensuite, nous en faisons un carré en spécifiant la largeur et la hauteur de manière égale. Choisissez une couleur de fond que vous aimez. Ensuite, nous ferons les cercles. Plutôt que d'ajouter de nouveaux éléments, nous utiliserons les pseudo-éléments, Avec le carré, nous aurons un résultat comme celui-ci: Après cela, nous créons le deuxième cercle avec le pseudo-élément Les résultats sont les suivants: Nous pouvons combiner ces deux styles en regroupant les sélecteurs de pseudo-éléments comme suit: Ta-da! Nous avons une forme de coeur, même si elle n’est pas encore dans la bonne direction. Pour le redresser, nous allons utiliser CSS3 Transformation. La transformation peut être donnée aux principaux éléments de la forme; ici, cela signifie le carré. Une fois transformé, le pseudo-élément changera automatiquement de position après l'élément principal.. Ici nous allons faire tourner le coeur pour qu’il soit vu “permanent”. Et voici à quoi ressemble notre coeur maintenant. Le code complet de la forme de coeur ci-dessus est le suivant, en HTML: Et sur notre CSS, ce sera comme ça: Notez que nous définissons maintenant le canal alpha du Maintenant que nous avons une forme de coeur parfaite, nous pouvons remplace le fond par une autre couleur (par exemple rose ou rouge) avec facilité. Le seul inconvénient ici est que nous Impossible d'ajouter une bordure à la forme due aux éléments empilés. L'ajout d'une ligne de bordure rendra le cœur bizarre. Avec CSS3, créer une forme comme une forme de coeur est maintenant facilement faisable. La propriété border-radius nous permet de faire des éléments ou même un pseudo-élément dans un cercle. Avec la transformation CSS3, nous pouvons faire pivoter ou déplacer les coordonnées de l'objet avec facilité. Vous n'êtes limité que par votre créativité et votre imagination!
.forme de coeur position: relative; largeur: 200px; hauteur: 200px; couleur de fond: rgba (250, 184, 66, 0,8);
:avant et :après. Nous avons d'abord réglé le :avant pseudo-éléments comme notre premier cercle. Nous en faisons un carré de taille égale sur la largeur et la hauteur, comme nous l’avons fait avec la div. Nous le transformons ensuite en cercle en lui donnant un rayon de 50% et le plaçons à gauche du carré.. .forme de coeur: avant position: absolue; en bas: 0px; à gauche: -100px; largeur: 200px; hauteur: 200px; content: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; rayon-bord: 50%; couleur de fond: rgba (250,184,66 , 0,8);
:après avec les mêmes styles que le premier cercle que nous avons créé. Ensuite, nous le positionnons également au sommet de la place. .forme de coeur: après position: absolue; en haut: -100px; à droite: 0px; largeur: 200px; hauteur: 200px; content: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; rayon-bord: 50%; couleur de fond: rgba (250,184,66 , 0,8);
.en forme de coeur: avant, en forme de coeur: après position: absolue; largeur: 200px; hauteur: 200px; content: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; rayon-bord: 50%; couleur de fond: rgba (250,184,66 , 0.8);. Forme de coeur: avant en bas: 0px; À gauche: -100px;. Forme de coeur: après en haut: -100px; À droite: 0px;
.forme de coeur -webkit-transform: rotation (45deg); -moz-transform: rotation (45deg); -ms-transform: rotation (45deg); -o-transformer: faire pivoter (45deg); transformer: faire pivoter (45 °);
Le résultat:
.forme de coeur position: relative; largeur: 200px; hauteur: 200px; -webkit-transform: rotation (45deg); -moz-transform: rotation (45deg); -ms-transform: rotation (45deg); -o-transformer: faire pivoter (45deg); transformer: faire pivoter (45 °); couleur de fond: rgba (250,184,66, 1); .cœur-forme: avant, .cœur-forme: après position: absolu; largeur: 200px; hauteur: 200px; content: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; rayon-bord: 50%; couleur de fond: rgba (250,184,66 , 1);. Forme de coeur: avant en bas: 0px; à gauche: -100px;. Forme de coeur: après en haut: -100px; à droite: 0px;
rgba (250,184,66, 1) en arrière-plan 1 enlever la transparence. Voilà à quoi ressemble notre cœur.
Conclusion
