🎃 没有 CSS 初始步骤，变量和准备步骤 1，dibujar la calabaza Paso 2，dibujar eltallo Paso 2.1，crear máscara para eltallo Paso 3，dibujar la cara ¡Listo！奖金，动画 Recursos

2025-06-10

🎃 没有 CSS 的 tengas miedo a dibujar

初始步骤、变量和准备

第 1 步，输入 calabaza

第 2 步，放下架子

步骤 2.1，涂抹睫毛膏

步骤 3，说出你的想法

列表！

Bonus，动画

资源

万圣节的气氛是通过 CSS 来装饰网页的。

1

请访问raulmar.com了解更多信息

Este dibujo está compuesto por alone tres < div >



<div class="stem"></div>
<div class="face"></div>
<div class="pumpkin"></div>
Enter fullscreen mode Exit fullscreen mode

禁止使用伪元素

  • ：：前
  • ：：后

Así como también la propiedad "box-shadow" para dibujar más Figuras de la calabaza sin crear más < div >

2

Otras propiedades importantes que vamos a utilizar son:

  • 边框半径
  • 剪辑路径
  • 动画
  • 位置
  • 转换
  • CSS 原生变量

初始步骤、变量和准备

CSS vanilla podemos usar变量para que si en un futuro queremos cambiar algo no tengamos que ir Buscando que cambiar a lo largo de todo el codigo

Cando las declaramos en :root lo que estamos haciendo que es estén disponibles de manera global



:root {
  --main-bg-color: #422261;
  --face: #422261;
}
Enter fullscreen mode Exit fullscreen mode

Otra cosa que podemos hacer antes de comenzar es poner márgenes y padding a 0 para que no nos molesten dibujando así como también definimos un borde rojo que nos ayudará a ver el tamaño y forma de los < div >



* {
  border: 5px solid red;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

在我们之前使用CSS Flexbox 来实现线性的新元素是很重要的



body {
  display: flex; 
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: var(--main-bg-color);
}
Enter fullscreen mode Exit fullscreen mode

第 1 步，输入 calabaza

与“<div”的部分有关，该部分是由 caja pudimos 形成的不规则形状。 Con“clip-path”tendría que salir un óvalo Perfecto lo que haría el dibujo perdiera la esencia。 Es por eso que usamos “边界半径”。

不关注 si no conoces la sintaxis que usa "/" para definir base y altura de las esquinas ya que 存在花式边框半径que es una herramienta que nos ayuda a generic el código para formar Figuras 不规则形状。



.pumpkin {
  position: relative;
  height: 300px;
  width: 170px;
  background-color: #f8931f;
  border-radius: 28% 72% 33% 67% / 21% 83% 17% 79% ;
  transform: rotate(13deg);
  box-shadow:
    -80px 5px 0px -2px #f8931f,   /*BS 1*/
    -40px 4px 0px -1px #fbb03b,   /*BS 2*/
    40px -15px 0px  0px #f87700,  /*BS 3*/
    80px -35px 0px -2px #f8931f;  /*BS 4*/

}
Enter fullscreen mode Exit fullscreen mode

另外，我们使用“box-shadow”来制作相同元素的复制品，我们将通过五种相同元素来制作新的卡拉巴扎。

根据X y Y 的位置修改 box-shadow 的位置，并尊重原始元素、设计、升级和颜色

El resultado sería el siguiente (BS se refiere a box-shadow)

3

第 2 步，放下架子

Aquí usamos 的立场：relative para colocar eltallo en relación a la calabaza。



.stem {
  position: relative;
  bottom: 180px;
  background-color: #8cc63e;
  left: 210px;
  z-index: -1;
  width: 75px;
  height: 150px;
  transform: rotate(30deg);
  border-radius: 58% 42% 69% 31% / 44% 100% 0% 56% ;
}
Enter fullscreen mode Exit fullscreen mode

4

相对位置与绝对位置

最重要的区别是，相对位置与页面元素位置相对位置绝对位置没有关系。

  • 位置：相对

6

  • 位置：绝对

5

步骤 2.1，涂抹睫毛膏

将睫毛膏与睫毛膏一起使用，以将睫毛膏涂抹在圆形睫毛膏上 。

Esta máscara 圆形 pudo haber sido dibujada con "border-radius: 50%" pero para practicar otra propiedad preí usar "clip-path: Circle(50% at 50% 50%)"



.stem::before {
  content: '';
  border: 20px solid red;
  position: absolute;
  top: 0px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: var(--main-bg-color);
  clip-path: circle(50% at 50% 50%);
}
Enter fullscreen mode Exit fullscreen mode

11

Aquí fue utilizado un pseudo-elemento detallo ya que la máscara que vamos a usar formaparte del Mismotallo y así nos ahorramos un < div >

首先使用 CSS 变量

步骤 3，说出你的想法

Para dibujar la cara usamos un elemento y sus dos fake-elementos

画上眼睛

奥霍·伊斯基耶多

Vemos el uso de la variable “—face” 是一种特殊用途，因为它可以用于其他颜色，而不是 cambiarlo en cada ojo y boca。



.face {
  width: 75px;
  height: 30px;
  background-color: var(--face);
  position: relative;
  left: 60px;
  bottom: 40px;
  transform: rotate(10deg);
  z-index: 1;
  border-radius: 
    100% 0% 50% 50% / 0% 0% 100% 100%;
}
Enter fullscreen mode Exit fullscreen mode

7

奥霍·德雷乔

Aquí se uso una rotación de -20deg, que son-10deg para compensar los del ojo izquiero que fuero Heredamos por usar el fake-elemento y -10deg para girarlo a la posición quebuscamos



.face::after {
  content: '';
  position: absolute;
  background-color: var(--face);
  top: -25px;
  left: 120px;
  width: 75px;
  height: 30px;
  transform: rotate(-20deg);
  border-radius: 
    100% 0% 50% 50% / 0% 0% 100% 100%;
}
Enter fullscreen mode Exit fullscreen mode

8

迪布汉多·拉博卡

Aquí usamos 特别指定“剪辑路径”，感谢您选择创建个性化的政策，以实现创建可能的机会



.face::before {
  content: '';
  position: absolute;
  top: 75px;
  left: 15px;
  background-color: var(--face);
  transform: rotate(-10deg);
  width: 200px;
  height: 50px;
  clip-path: polygon(0% 35%, 17% 2%, 21% 37%, 31% 17%, 36% 32%, 49% 6%, 63% 34%, 86% 8%, 85% 30%, 100% 30%, 94% 60%, 79% 98%, 66% 62%, 63% 94%, 53% 76%, 42% 100%, 31% 62%, 17% 96%, 14% 66%);
}
Enter fullscreen mode Exit fullscreen mode

使用禁运的方式来协调政治问题是非常复杂的，感谢您对自动编码的通用政策的支持

9

列表！

红边界的尽头



* {
border: 1px solid red;
}
Enter fullscreen mode Exit fullscreen mode

10

Bonus，动画

Dentro del elemento .face::before definimos los parámetros iniciales de la animación que son: el nombre de la animación, la duración (que es como la velocidad) y el Número de veces que queremos que se repita la animación además de los que ya teníamos



.face::before {
  animation-name: pulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
Enter fullscreen mode Exit fullscreen mode

Luego Creamos动画关键帧是CSS解释的关键帧



@keyframes pulse {
  0% {transform: scale(1) rotate(-10deg);}
  50% {transform: scale(1.1) rotate(-10deg);}
  100% {transform: scale(1) rotate(-10deg);}
}
Enter fullscreen mode Exit fullscreen mode

将 -10 度旋转为直角

1

资源

GitHub 仓库

笔

CSS动画

剪辑路径

鏂囩珷鏉ユ簮锛�https://dev.to/raulmar/no-tengas-miedo-a-dibujar-con-css-1ck
Devto 翻译
PREV
如何使用 Git 和 GitHub 进行协作编程？
NEXT
我正在读的 10 本书（不是同时读）