Comment j'ai créé une citrouille Pure CSS.

Joyeux Halloween, j'ai récemment réalisé cette citrouille 100 % CSS pour me plonger dans l'esprit effrayant de la saison et certaines personnes aimeraient savoir comment elle a été fabriquée.

Voir le stylo
Citrouille 100 % CSS par micfun123 (@micfun123)
sur CodePen.

Alors laissez-moi vous expliquer comment ça marche. Pour ceux d'entre vous qui veulent juste le code et ne veulent pas voir le processus, voici le CodePen .

Je n'ai jamais fait quelque chose de pareil auparavant, donc mon premier objectif était les 3 ovales orange.

J'ai donc commencé avec le HTML.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pumpkin</title>
    <link rel="stylesheet" href="pumpkin.css">


    <div>



<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>

<pre class="brush:php;toolbar:false">body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

Cela produit 3 ovales orange parfaits côte à côte. Que se passe-t-il ici ? Tout d’abord, nous centrons le div citrouille au centre de la page à l’aide de la balise body. Nous faisons cela avec les 3 premières lignes. Ensuite, nous utilisons la hauteur : 100vh ; Pour indiquer au code que la balise body occupe 100 % de l’écran. Sans cela, la balise body sera aussi grande que le contenu, ce qui signifie que les ovales seront centrés en haut de la page. Voici donc à quoi cela ressemble.

Ensuite, nous voulons que les cercles se chevauchent, cela peut être fait assez facilement en donnant aux ovales gauche et droit une marge négative.

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

Donc ici, nous déplaçons l'Ovel droit vers la gauche de 45 pixels et l'Ovel gauche vers la droite de 45 pixels. (Je ne vais pas ajouter de photo de cette étape car je n'ai toujours pas de moyen de gérer le stockage des photos)

Maintenant, passons à la partie la plus difficile (Certains, ok, beaucoup de Google ont été utilisés)

.stem {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
width: 30px;
height: 60px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}
.curve{
position: absolute;
top: -47px;
left: 43%;
transform: translateX(-50%); /* Center the stem horizontally with in the contanter */
transform: rotate(-15deg);
width: 30px;
height: 30px;
background-color: brown;
border-radius: 3px;
z-index: -1;
}

Donc width , height, border-radius et background-color sont assez explicites. Je vais donc sauter dessus. En commençant par la position : absolue ; cela supprime le div du flux du site Web. Au lieu de cela, il est basé sur le point d’ancrage le plus proche. position : absolue ; Peut être placé sur n’importe quel élément. Ensuite, pour centrer la tige horizontalement, nous utilisons left: 50% et transform: translateX(-50%); Cela a du sens quand on y pense, mais il faut y penser pour commencer à gauche : 50 % Centre le bord gauche de la tige dans la division citrouille. Je veux que le centre de la tige soit au centre de la citrouille. transformer : traduireX(-50 %); déplace la tige vers le côté gauche de la moitié de la taille de la tige. haut : -47px ; Fait à peu près ce que vous attendez. Il déplace le bord supérieur vers le haut de 47 px. z-index est une chose que j'ai trouvée récemment, essentiellement la hauteur de l'élément. Je veux que le z-index soit derrière la citrouille donc je lui donne un z-index : -1 alors que la citrouille a l'index par défaut de 0. Voici à quoi cela ressemble.

Enfin les yeux, la bouche et le fond. Commençons par les yeux,

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pumpkin</title>
    <link rel="stylesheet" href="pumpkin.css">


    <div>



<p>The HTML does not really change anything now but it also don't show anything yet. Time for the CSS.<br>
</p>

<pre class="brush:php;toolbar:false">body {
display: flex;
justify-content: center; 
align-items: center;
height: 100vh;
}
.pumpkin {
position: relative;
display: flex;
align-items: center;
}  
.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}  
.center{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
}

Donc, cela semble plus effrayant que border-width : 0 50px 41px 30px ; Nous définissons donc ici la longueur de chaque côté du carré. Il commence par le haut et se déplace dans le sens des aiguilles d'une montre. Donc le haut du carré a une longueur de 0. C'est parce que les triangles ont 3 côtés, cette astuce nous permet de supprimer l'un des côtés pour former un triangle. Ensuite, le côté droit mesure 50 px de long, le bas mesure 50 px de long et le côté gauche mesure 30 px de long. Pour l’œil droit, nous inversons les valeurs gauche et droite pour qu’il pointe dans l’autre direction. couleur de la bordure : transparent transparent #000000 transparent ; Vous vous demandez peut-être pourquoi y a-t-il autant de transparents. Eh bien, vous voyez, il y a en fait 3 triangles ici (l'un d'eux n'existe pas à cause de la largeur 0). Nous voulons seulement colorer le triangle du bas, nous définissons donc les 3 autres comme transparents. style de bordure : solide ; Nous voulons que le triangle ait un remplissage uni, nous devons donc définir le style sur Solide. Nous n’avons pas vraiment rempli le triangle, mais nous avons une très grande frontière, ce qui semble être le cas. Après tout cela, nous avons désormais les yeux.

La dernière étape est le sourire.

.left{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-right: -45px;
}
.right{
width: 110px;
height: 160px;
background: rgb(255, 117, 24);
border-radius: 50%;
margin-left: -45px;
}

bordure-haut-gauche-rayon : 110px ; et bordure en haut à droite : 110 px ; définir l'arrondi des coins supérieurs. C'est la partie qui forme le demi-cercle, mais cela placera également la courbe en haut. Pour résoudre ce problème, j'ai ajouté transform: rotate(190deg) Pour le faire pivoter pour en faire un sourire et j'ai utilisé left: 25%; pour le rendre légèrement décentré. Voici donc le résultat final.

Voir le stylo
Citrouille 100 % CSS par micfun123 (@micfun123)
sur CodePen.

J'avoue que ce n'est pas la plus jolie des solutions ni la plus efficace, cependant, c'était la première fois que j'essayais de dessiner quelque chose en CSS et j'en suis plutôt content. Comme toujours, n'hésitez pas à me laisser vos commentaires sur Discord ou Reddit.