La temporada de Halloween estĂĄ a la vuelta de la esquina es por eso que dibujaremos una decoraciĂłn escalofrĂante a tu pĂĄgina web con CSS.
Visit...
For further actions, you may consider blocking this person and/or reporting abuse
Hola te quedo muy bien, vengo de platzi y estoy empezando a aprender sobre css,
y se me hizo interesante este tema, no sabĂa que se podĂa dibujar con css, bueno querĂa preguntar si es posible hacer que cada cierto tiempo parpadee la calabaza y si es asĂ, con cuales reglas de css que se necesitan
ÂĄGracias por este artĂculo y sualudos!
Hola Brandon. Me alegra que hayas leĂdo el artĂculos y claro que se puede hacer que parpadee, se me ocurre agregarle a los ojos algo asĂ:
.face, .face::after {
opacity: 1;
animation-name: blink;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Y los keyframes quedarĂan asĂ:
@keyframes blink {
0% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
Te mando un saludo :)
Hola, si me funcionó, pero parpadeaba también la boca, entonces intenté arreglarlo e investigué algunas reglas de css, y le agregue otras cosas pero quedó mas o menos bien jajaja
Nomås le pasó algo raro a la boca y no sé por qué...
Y por cierto, gracias por el cĂłdigo y tu ayuda đ
Buen uso del :not đ€©
Veo que el origen de la animaciĂłn de la boca estĂĄ desfasado, pudiera usarse la propieda transform-origin para ajustarlo
Ya ahora sà creo que quedó, no sé si utilicé el transform-origin como debe ser, pero al parecer funcionó jajajaja
Le agregué transform-origin: 200%; y le movà unos pixeles por que no quedaba en el centro... El enlace es el mismo por si quieres ver el gif de como quedó y los cambios del código ya actualizado: drive.google.com/drive/folders/1-N...
ÂĄMuchas gracias aprendĂ mucho con lo que me dijiste, los cĂłdigos que me pasaste y este post! đ
Te quedĂł genial đme da gusto que te hayas llevado algo de valor. DeberĂas de subirlo con github pages para que mĂĄs gente lo pueda ver :)
brandonargel.github.io/Animated-Pu...
Muchas gracias nuevamente, no lo habĂa subido por que estaba aprendiendo sobre Git y GitHub y tambiĂ©n tenĂa otros pequeños proyectos đ
No sé si me pasó sólo a mi, pero tuve que cambiar el orden en box-shadow para dibujar la calabaza.
Porque me quedaba el BS1 por arriba del BS2, entonces lo dejĂ© asĂ:
box-shadow:
-40px 4px 0px -1px #fbb03b, /BS 2/
-80px 5px 0px -2px #f8931f, /BS 1/
40px -15px 0px 0px #f87700, /BS 3/
80px -35px 0px -2px #f8931f; /BS 4/
dev-to-uploads.s3.amazonaws.com/up...
Excelente toda la explicaciĂłn! muchas gracias!
Excelente artĂculo, RaĂșl. Felicidades por tu trabajo y muchas gracias por compartir tu experiencia.
Muchas gracias :) espero seguir aportando a la comunidad!
Excelente post, me ha gustado mucho! gracias por el aporte
Me alegra que te haya servido Yarilenis!