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.
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<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,
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress
Apr 02, 2025 am 04:27 AM
Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Comment utiliser la grille CSS pour les en-têtes et pieds de page collants
Apr 02, 2025 pm 06:29 PM
CSS Grid est une collection de propriétés conçues pour faciliter la mise en page qu'elle ne l'a jamais été. Comme tout, il y a un peu une courbe d'apprentissage, mais Grid est
Fontes variables de polices Google
Apr 09, 2025 am 10:42 AM
Je vois que Google Fonts a déployé un nouveau design (tweet). Comparé à la dernière grande refonte, cela semble beaucoup plus itératif. Je peux à peine faire la différence
