๐ tengas miedo a dibujar con CSS ์์
Este dibujo estรกcompuesto por solo tres
<div class="stem"></div>
<div class="face"></div>
<div class="pumpkin"></div>
As รญcomo tambiรฉn la propiedad'๋ฐ์ค ์์'para dibujar mรกs figuras de la calabazasin crear mรกs
Otras propiedades importantes que vamos a utilizar son:
Paso INICAL, ๋ณ์ y preparativos
Con CSS vanilla podemos usar variables para que si en un futuro queremos cambiar algo no tengamos que ir buscando que cambiar a lo largo de todo el cรณdigo
Cuando las declaramos en: genloque estamos haciendo que est รฉn disponibles de manera global
:root {
--main-bg-color: #422261;
--face: #422261;
}
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
* {
border: 5px solid red;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
Porรบltimo antes de comenzar usaremos CSS flexbox para alinear nuestro elementos sin importar el tamaรฑo de pantalla
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: var(--main-bg-color);
}
ํ์ 1๋ฒ์ง, dibujar la calabaza
Puede que te pregutes como a partir de unโNo te preocupes si No conoces la sintaxis que usaโ/โpara definir base y altura de las esquinas ya que existefancy-border-radiusque es una herramienta que nos ayuda generar el cรณdigo para formar figures unregulars.
.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*/
}
Por otro lado,usamosโbox shadowโpara crear copias identicas del elemento ya que nuestra calabaza esta formada Por cinco elementos identicos.
Con box shadow podemos modificar la posiciรณn en X y Con RESERTO al elemento original,el desenfoque,la escala y el color
El resultado serรญa El siguiente(BS se refiere a box shadow)
ํ์ 2๋ฒ์ง, dibujar el tallo
์์ฟ ์ฐ์ฌ๋ชจ์ค์ ์
์ฅ: ์นด๋ผ๋ฐ์์ ์๋์ ์ด๋ค.
.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% ;
}
์๋ ์์น์ ์ ๋ ์์น
La diferenceia mรกs important a La hora de dibujar es que position relative respeta La posiciรณn del elemento dentro del flujo de La pรกgina mientras que position absolute no.
์์น: ์๋ 
์์น: ์ ๋ 
Paso 2.1๏ผcrear mรกscara para el tallo
Para que el tallo tenga curvatura tenemos que usar una tรฉcnica que es usar mรกscaras Para esconder ciertas partes de los elementos,en este caso usaremos una mรกscara circular.
Esta mรก scara circular pudo haber sido dibujada con "๊ฒฝ๊ณ ๋ฐ์ง๋ฆ: 50%"pero para practicar otra Propedad Prefere รญ usar "ํธ์ง ๊ฒฝ๋ก: ์ํ(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%);
}
Aqรญfue utilizado un pseudo elemento de tallo ya que la mรกscara que vamos a usar forma parte del mismo tallo y asรญnos ahorramos un
Tambiรฉn por primera vez usamos una variable de CSS
ํ์ 3๋ฒ์ง, dibujar la cara
Para dibujar la cara usamos un elemento y sus dos pseudo elementos
ํ์ฌ ๋ช
Ojo izquierdo ํ์ฌ
Vemos el uso de la varibleโ-faceโque es de special utilidad aqรญpor si queremos usar otro color no tener que 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%;
}
Ojo derecho ํ์ฌ
Aquise uso una rotaciรณn de-20๋,que son -10๋para compensar los del ojo izquiero que fuero heredamos por usar el pseudo elemento y-10๋para girarlo a la posiciรณn que buscamos
.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%;
}
๋๋ธ์๋ ๋ผ๋ณด์นด
Aquiusamos Specรญficianteโclip pathโgracias a su opciรณn de crear polรญgonos personalidos para nuestras nekesidades que en esta ocasiรณn era crear la boca mรกs tenebrosa posible
.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%);
}
Seusan pares ordenados de coordenadas de cada punto del pol รญ gono lo cual es muy complado sin ๊ธ์,gracias a la herramientaclippypodemos generar el cรณdigo automรกticament
โListo๏ผ
Una vez terminado podemos eliminar el borde rojo
* {
border: 1px solid red;
}
์๊ธ
Dentro del elemento.์ผ๊ตด: 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 emos que 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;
}
Luego creamos los keyframes de la animaciรณn que son las guรญas para que CSS translation lo que queremos hacer
@keyframes pulse {
0% {transform: scale(1) rotate(-10deg);}
50% {transform: scale(1.1) rotate(-10deg);}
100% {transform: scale(1) rotate(-10deg);}
}
Se mantuvo una rotaciรณn de-10 deg para que Se quedara recta la sonrisa
์ฐจ๋ก๋ก ๋์๊ฐ๋ค
Repo de github
Pen
:root {
--main-bg-color: #422261;
--face: #422261;
}
* {
border: 5px solid red;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: var(--main-bg-color);
}
ํ์ 1๋ฒ์ง, dibujar la calabaza
Puede que te pregutes como a partir de unโNo te preocupes si No conoces la sintaxis que usaโ/โpara definir base y altura de las esquinas ya que existefancy-border-radiusque es una herramienta que nos ayuda generar el cรณdigo para formar figures unregulars.
.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*/
}
Por otro lado,usamosโbox shadowโpara crear copias identicas del elemento ya que nuestra calabaza esta formada Por cinco elementos identicos.
Con box shadow podemos modificar la posiciรณn en X y Con RESERTO al elemento original,el desenfoque,la escala y el color
El resultado serรญa El siguiente(BS se refiere a box shadow)
ํ์ 2๋ฒ์ง, dibujar el tallo
์์ฟ ์ฐ์ฌ๋ชจ์ค์ ์
์ฅ: ์นด๋ผ๋ฐ์์ ์๋์ ์ด๋ค.
.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% ;
}
์๋ ์์น์ ์ ๋ ์์น
La diferenceia mรกs important a La hora de dibujar es que position relative respeta La posiciรณn del elemento dentro del flujo de La pรกgina mientras que position absolute no.
์์น: ์๋ ์์น: ์ ๋
Paso 2.1๏ผcrear mรกscara para el tallo
Para que el tallo tenga curvatura tenemos que usar una tรฉcnica que es usar mรกscaras Para esconder ciertas partes de los elementos,en este caso usaremos una mรกscara circular.
Esta mรก scara circular pudo haber sido dibujada con "๊ฒฝ๊ณ ๋ฐ์ง๋ฆ: 50%"pero para practicar otra Propedad Prefere รญ usar "ํธ์ง ๊ฒฝ๋ก: ์ํ(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%);
}
Aqรญfue utilizado un pseudo elemento de tallo ya que la mรกscara que vamos a usar forma parte del mismo tallo y asรญnos ahorramos un
Tambiรฉn por primera vez usamos una variable de CSS
ํ์ 3๋ฒ์ง, dibujar la cara
Para dibujar la cara usamos un elemento y sus dos pseudo elementos
ํ์ฌ ๋ช
Ojo izquierdo ํ์ฌ
Vemos el uso de la varibleโ-faceโque es de special utilidad aqรญpor si queremos usar otro color no tener que 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%;
}
Ojo derecho ํ์ฌ
Aquise uso una rotaciรณn de-20๋,que son -10๋para compensar los del ojo izquiero que fuero heredamos por usar el pseudo elemento y-10๋para girarlo a la posiciรณn que buscamos
.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%;
}
๋๋ธ์๋ ๋ผ๋ณด์นด
Aquiusamos Specรญficianteโclip pathโgracias a su opciรณn de crear polรญgonos personalidos para nuestras nekesidades que en esta ocasiรณn era crear la boca mรกs tenebrosa posible
.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%);
}
Seusan pares ordenados de coordenadas de cada punto del pol รญ gono lo cual es muy complado sin ๊ธ์,gracias a la herramientaclippypodemos generar el cรณdigo automรกticament
โListo๏ผ
Una vez terminado podemos eliminar el borde rojo
* {
border: 1px solid red;
}
์๊ธ
Dentro del elemento.์ผ๊ตด: 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 emos que 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;
}
Luego creamos los keyframes de la animaciรณn que son las guรญas para que CSS translation lo que queremos hacer
@keyframes pulse {
0% {transform: scale(1) rotate(-10deg);}
50% {transform: scale(1.1) rotate(-10deg);}
100% {transform: scale(1) rotate(-10deg);}
}
Se mantuvo una rotaciรณn de-10 deg para que Se quedara recta la sonrisa
์ฐจ๋ก๋ก ๋์๊ฐ๋ค
Repo de github
Pen
.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*/
}
Con box shadow podemos modificar la posiciรณn en X y Con RESERTO al elemento original,el desenfoque,la escala y el color
El resultado serรญa El siguiente(BS se refiere a box shadow)
ํ์ 2๋ฒ์ง, dibujar el tallo
์์ฟ ์ฐ์ฌ๋ชจ์ค์ ์
์ฅ: ์นด๋ผ๋ฐ์์ ์๋์ ์ด๋ค.
.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% ;
}
์๋ ์์น์ ์ ๋ ์์น
La diferenceia mรกs important a La hora de dibujar es que position relative respeta La posiciรณn del elemento dentro del flujo de La pรกgina mientras que position absolute no.
.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% ;
}
Paso 2.1๏ผcrear mรกscara para el tallo
Para que el tallo tenga curvatura tenemos que usar una tรฉcnica que es usar mรกscaras Para esconder ciertas partes de los elementos,en este caso usaremos una mรกscara circular.
Esta mรก scara circular pudo haber sido dibujada con "๊ฒฝ๊ณ ๋ฐ์ง๋ฆ: 50%"pero para practicar otra Propedad Prefere รญ usar "ํธ์ง ๊ฒฝ๋ก: ์ํ(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%);
}
Aqรญfue utilizado un pseudo elemento de tallo ya que la mรกscara que vamos a usar forma parte del mismo tallo y asรญnos ahorramos un
Tambiรฉn por primera vez usamos una variable de CSS
ํ์ 3๋ฒ์ง, dibujar la cara
Para dibujar la cara usamos un elemento y sus dos pseudo elementos
ํ์ฌ ๋ช
Ojo izquierdo ํ์ฌ
Vemos el uso de la varibleโ-faceโque es de special utilidad aqรญpor si queremos usar otro color no tener que 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%;
}
Ojo derecho ํ์ฌ
Aquise uso una rotaciรณn de-20๋,que son -10๋para compensar los del ojo izquiero que fuero heredamos por usar el pseudo elemento y-10๋para girarlo a la posiciรณn que buscamos
.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%;
}
๋๋ธ์๋ ๋ผ๋ณด์นด
Aquiusamos Specรญficianteโclip pathโgracias a su opciรณn de crear polรญgonos personalidos para nuestras nekesidades que en esta ocasiรณn era crear la boca mรกs tenebrosa posible
.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%);
}
Seusan pares ordenados de coordenadas de cada punto del pol รญ gono lo cual es muy complado sin ๊ธ์,gracias a la herramientaclippypodemos generar el cรณdigo automรกticament
โListo๏ผ
Una vez terminado podemos eliminar el borde rojo
* {
border: 1px solid red;
}
์๊ธ
Dentro del elemento.์ผ๊ตด: 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 emos que 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;
}
Luego creamos los keyframes de la animaciรณn que son las guรญas para que CSS translation lo que queremos hacer
@keyframes pulse {
0% {transform: scale(1) rotate(-10deg);}
50% {transform: scale(1.1) rotate(-10deg);}
100% {transform: scale(1) rotate(-10deg);}
}
Se mantuvo una rotaciรณn de-10 deg para que Se quedara recta la sonrisa
์ฐจ๋ก๋ก ๋์๊ฐ๋ค
Repo de github
Pen
.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%);
}
Tambiรฉn por primera vez usamos una variable de CSS
ํ์ 3๋ฒ์ง, dibujar la cara
Para dibujar la cara usamos un elemento y sus dos pseudo elementos
ํ์ฌ ๋ช
Ojo izquierdo ํ์ฌ
Vemos el uso de la varibleโ-faceโque es de special utilidad aqรญpor si queremos usar otro color no tener que 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%;
}
Ojo derecho ํ์ฌ
Aquise uso una rotaciรณn de-20๋,que son -10๋para compensar los del ojo izquiero que fuero heredamos por usar el pseudo elemento y-10๋para girarlo a la posiciรณn que buscamos
.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%;
}
๋๋ธ์๋ ๋ผ๋ณด์นด
Aquiusamos Specรญficianteโclip pathโgracias a su opciรณn de crear polรญgonos personalidos para nuestras nekesidades que en esta ocasiรณn era crear la boca mรกs tenebrosa posible
.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%);
}
Seusan pares ordenados de coordenadas de cada punto del pol รญ gono lo cual es muy complado sin ๊ธ์,gracias a la herramientaclippypodemos generar el cรณdigo automรกticament
โListo๏ผ
Una vez terminado podemos eliminar el borde rojo
* {
border: 1px solid red;
}
์๊ธ
Dentro del elemento.์ผ๊ตด: 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 emos que 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;
}
Luego creamos los keyframes de la animaciรณn que son las guรญas para que CSS translation lo que queremos hacer
@keyframes pulse {
0% {transform: scale(1) rotate(-10deg);}
50% {transform: scale(1.1) rotate(-10deg);}
100% {transform: scale(1) rotate(-10deg);}
}
Se mantuvo una rotaciรณn de-10 deg para que Se quedara recta la sonrisa
์ฐจ๋ก๋ก ๋์๊ฐ๋ค
Repo de github
Pen
.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%;
}
.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%;
}
.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%);
}
Una vez terminado podemos eliminar el borde rojo
* {
border: 1px solid red;
}
์๊ธ
Dentro del elemento.์ผ๊ตด: 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 emos que 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;
}
Luego creamos los keyframes de la animaciรณn que son las guรญas para que CSS translation lo que queremos hacer
@keyframes pulse {
0% {transform: scale(1) rotate(-10deg);}
50% {transform: scale(1.1) rotate(-10deg);}
100% {transform: scale(1) rotate(-10deg);}
}
Se mantuvo una rotaciรณn de-10 deg para que Se quedara recta la sonrisa
์ฐจ๋ก๋ก ๋์๊ฐ๋ค
Repo de github
Pen
.face::before {
animation-name: pulse;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {transform: scale(1) rotate(-10deg);}
50% {transform: scale(1.1) rotate(-10deg);}
100% {transform: scale(1) rotate(-10deg);}
}
Repo de github
Pen
Reference
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ tengas miedo a dibujar con CSS ์์), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://dev.to/raulmar/no-tengas-miedo-a-dibujar-con-css-1ckํ ์คํธ๋ฅผ ์์ ๋กญ๊ฒ ๊ณต์ ํ๊ฑฐ๋ ๋ณต์ฌํ ์ ์์ต๋๋ค.ํ์ง๋ง ์ด ๋ฌธ์์ URL์ ์ฐธ์กฐ URL๋ก ๋จ๊ฒจ ๋์ญ์์ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค