😱 ¡CREA la ANIMACIÓN de VERCEL con HTML y CSS! Tutorial paso a paso
HTML-код
- Опубликовано: 4 окт 2024
- Con un poco de CSS y algo de HTML, puedes crear este efecto brutal para tu Landing Page basado en la página de Vercel.
He hecho algunos arreglos después al código para que sea todavía más exacto a lo que tiene Vercel, pero la idea sigue siendo la misma:
Código final: bit.ly/39ZcYvx 
Наука
![NOSFERATU - Official Trailer [HD] - Only In Theaters December 25](http://i.ytimg.com/vi/nulvWqYUM8k/mqdefault.jpg)
![KSI - Thick Of It (feat. Trippie Redd) [Official Music Video]](http://i.ytimg.com/vi/At8v_Yc044Y/mqdefault.jpg)
Actualmente, me encuentro iniciando en el mundo laboral Y tus videos, cursos y tutorial me ayudan muchísimo. Gracias Midu!! :D
Un placer ayudarte, Angel!!! Suerte con tu carrera! 🤗
Gran contenido midudev, no e visto contenido de este hombre que no sea un apoyo a la comunidad, gracias al bootcamp alcance el desarrollo web M.E.R.N y profundice temas que creía muy complejos para mi, como el testin o redux, en pocas palabras, gracias por el contenido midudev.
Que grande eres al compartir tanto conocimiento Midu, muchas gracias. Nos inspiras a muchos a llegar algún día a tu nivel 👊
He estado usado el efecto de degaradados y textos, una gran recomendación, es no usar -webkit-backgroud-clip, sino directamente background-clip, y en vez de -webkit-text-fill-color, usar color: transparent. Así evitamos usar -webkit ya que no está en todos los navegadores
Gian, lo que comentas no funciona para Chrome.
No puedes quitar -webkit de background-clip porque justamente background-clip: text NO es del estándar y, por raro que parezca, tienes que usar -webkit seguro para compatibilidad con Edge y Chrome. Firefox lo soporta tanto con -webkit como sin.
Aquí lo comentan:
caniuse.com/background-clip-text
Fernando, no es una pseudo class, es un pseudoelemento.
Por fi, me encantaría ver cómo puedes hacer el mismo efecto sin añadir un nodo o sin usar un pseudoelemento. Deja el código para que le echemos un vistazo. :)
@@midudev a mi no me anda =(
Gran explicación! Muy interesante el ejemplo.. haz más de estos tutoriales
Fascinado por tus enseñanzas, gracias por cada contenido que has facilitado. Deseo que tengas más éxito del que hasta hoy has tenido. Eres genial 👏🏼👏🏼❤️
buenísimo, muy útil en la formación de los que somos nuevos en esto!
Primera vez que veo estos customs properties, justo lo que necesitaba para un proyecto, que crack midu!!
Me emcanto conocerte en el aeropuerto. La verdad no solo enseñas bien si no que sos muy agradable. Jajaja éxitos siempre
Ese inset =0 y la custom property para añadir el texto desde el código, con el style='--content: "xxx" ' > ...
Gran aprendizaje!
...
El resto del video, in crescendo... Brutal!
Gracias, Jaime! Siempre se aprende algo!
Que crack! De los pocos que explican a detalle cada cosa 👏
Wooooooo! Esta chulo. Gracias por las clases de calidad. 😘 Te envío un fuerte abrazo sr.
Otro para ti! 🤗
Midu, cuando te ves al espejo no ves nada, porque no hay nadie como tú, eres lo más grande de Internet 🤧🤧
Directo a mis ideas para mi portafolio jaja, muchas gracias Midu, eres un grande!!
Impecable midu, que buena idea utilizar las custom properties para eso 💪🏽
🤙 lo expliqué en su día aquí: twitter.com/midudev/status/1504489584104599556
Son super potentes para este tipo de cosillas. :)
Es la primera animación que ago con css, gracias midu!
Pero qué pedazo de vídeo 😎 gracias por una enseñanza más profe. Saludazo enorme 🤙🏽
Gracias a ti!!
tremendo pedazo de video, aprendí cosas nuevas! muchas gracias por este gran aporte Midi! te amamos!
Gracias por tus vídeos tan chulos y bien explicados, me ayudas mucho a crecer como desarrollador ⭐
Muchas gracias midu, muy buen contenido COMO SIEMPREEEE!! un abrazo
Excelente material, y muy bien explicado. Felicitaciones
Hola, muchas gracias por comentar y el contenido del mismo! :D Así da gusto!!!
sos MUY crack! Como me gustan tus videos
Brutal. Gracias por este pedazo de video.
Gracias a ti! Me alegro que te guste!
Genial , justo esperaba algo de Css
Pues aquí tienes un montón de CSS para aprender y practicar!!!
@@midudev siempre intento ir practicando el Css y el Js que compartes y me mantengo atento en Twitter para ir viendo , muchas gracias ❤️
Increible bro !!! Gracias por tus videos..
Ufff me gusto este tema de hoy.
Te amo Midu
🥰🥰🥰🥰🥰🥰
Muy bueno y muy Pro!
Bueno a todo el que tenga problema con el borde sombreado, conseguí arreglarlo. xD
En mi caso, fue mediante otro @keyframes y aplicando al span.
Develop.
Preview.
Ship.
_______________________________________________________________________________________________________________________________________
span {
color: #000;
display: block;
font-size: 100px;
line-height: 1;
position: relative;
padding: 0 15px 15px;
animation-name: var(--animationS, b);
animation-duration: 8s;
animation-iteration-count: infinite;
}
@keyframes a {
0%,
16.667%,
100% {
opacity: 1;
}
33.333%,
83.333% {
opacity: 0;
}
}
@keyframes b {
0%,
16.667%,
100% {
color: #FFF;
opacity: 1;
}
33.333%,
83.333% {
color: #000;
opacity: 1;
}
}
@keyframes a2 {
0%,
100% {
opacity: 0;
}
33.333%,
50% {
opacity: 1;
}
16.667%,
66.667% {
opacity: 0;
}
}
@keyframes b2 {
0%,
100% {
color: #000;
opacity: 1;
}
33.333%,
50% {
color: #FFF;
opacity: 1;
}
16.667%,
66.667% {
color: #000;
opacity: 1;
}
}
@keyframes a3 {
0%,
50%,
100% {
opacity: 0;
}
66.667%,
83.333% {
opacity: 1;
}
}
@keyframes b3 {
0%,
50%,
100% {
color: #000;
opacity: 1;
}
66.667%,
83.333% {
color: #FFF;
opacity: 1;
}
}
Sos el one Midu 🖤
Me gusto mucho lo de las var ( )
Nunca te acostarás sin aprender una cosa más! 🚀
Midu te amo, grande jaja
Midu eres un sayayin guerrero de clase alta, puedo escribir un monton de alagos , porque realmente los mereces. en el tema de los stylos soy el mas burro de todos. has pensado crear una serie de videos de css? asi como las tienes de javascript..
El mejor profesor
🤗
Excelente!
Ahora toca el efecto de /workflow 👀🔥
Me lo apunto!
epiquisimo
Eres Dios
exactamente lo que he buscado! gran video. Pero cuando yo lo he probado me han salido las 3 palabras en color y luego me empieza a cambiar a blanco como en la pagina web de Vercel. Como puedo empezar con las 3 palabras en blanco?
Muy buen video Midu, solo faltas que enseñes a construir un avión😅😂
Apuntado. 🛫
No sé si es solo a mí, pero se me queda como un borde blanco muy fino alrededor de las letras. He intentado quitarlo y no hay manera 😅
Muchísimas gracias por compartir este contenido tan interesante.
A mi también me pasa lo mismo
@@joacoelia4904 igual
A mi tambien, lo hago exactamente igual
@@christiansosa4072 asi solucione
.hello {
color: black;
display: block;
position: relative;
padding: 0 12px;
font-family: "Source Code Pro", monospace;
}
.hello:before {
content: "¡Hola!, Soy Edgard Rojas";
position: absolute;
inset: 0;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
background-clip: text !important;
background: linear-gradient(
0deg,
rgba(63, 94, 251, 1) 0%,
rgba(149, 87, 255, 1) 100%
);
}
Fantástico como siempre!
Sólo una duda...cómo podriamos recrear esto en React? Casteando los estilos inline con CssProperties parece no funcionar :S
Midu! Podrias compartirnos tu profile de iTerm? Tienes la terminal configurada muy chula y me gustaria tenerlas asi!
Midu , de casualidad habías compartido un recurso sobre shadows una página donde se podían seleccionar las distintas shadows? perdí mis marcadores y me servían bastante
Genial! Como podría añadir las custom properties usando React?
Si porque yo estoy igual a mitad de video no pude seguir porque yo lo estaba aplicando directamente a una app de react propia que tenia por ahí.Espero solución miduuuuu 🙏🏾🙏🏾
@@XXLobo87 Al final lo hice a lo cutre… hice una clase para cada linea de texto y en css a cada uno le puse sus propiedades 😅
@@Alexmarkq ya lo había pensado pero si queda bien también me lo apunto , muchas gracias 👏🏽🍾
Tienes el Código por ahí? Hehe
@@XXLobo87
.span1 {
color: #fff;
display: block;
position: relative;
line-height: 1.1;
}
.span1::before {
background: linear-gradient(90deg, rgb(186, 48, 1), yellow);
content: 'Alquiler de campers';
position: absolute;
inset: 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animated 7s infinite;
}
.span2 {
color: #fff;
display: block;
position: relative;
line-height: 1.1;
}
.span2::before {
background: linear-gradient(90deg, rgb(186, 48, 1), rgb(255, 255, 0));
content: 'entre particulares.';
position: absolute;
inset: 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: animated 7s infinite;
animation-delay: 3.5s;
}
Hola Midu 👋, el delay de los span no deberían ser 0s, 3s, 6s? Ya que la duración de la animación es 9s, y un tercio de 9s es 3s.
Si te fijas en el minuto 11:33, los span 1 y 3 tienen opacity:1 de forma simultánea, creo que es debido a que se pisan por los delay mal establecidos. Un saludo 🙌
Si te fijas en el segundo 10:57 sale un aviso justamente hablando de eso. 🥲
Luego, además, en el código final he decidido cambiar lo del delay porque no quedaba del todo bien. En la solución final se usa otra estrategia.
También podría corregirse haciendo que la animación dure 10s
@@midudev genial, no había visto el mensaje 😅
@@marsidev Es que no sé por qué pensaba que había puesto 10. De ahí el cálculo raro. jajajaja Pero si ves el código final, ya verás que al final lo he hecho de otra forma que queda perfecto. :)
😱
muy buen video pero tengo una pregunta ¿ Que Piensas del NotCode? Buen Dia.
Que ha existido siempre, siempre existirá y siempre podrá ser una ayuda interesante para muchas soluciones.
brutal xD
🤩👨💻
ya el codigo no cuadra bien :c
¡Hola Midu! ¡Una idea! Puedes hacer un video hablando sobre el Gaming Streaming, ya que son los videojuegos en la nube, así que es web. Unos ejemplos practicos del tema. ¡Saludito desde Venezuela!
No tengo ni idea del tema. 🤣 Por ahora voy a intentar hablar sólo de cosas que sé! jajaja
@@midudev somos 2, a que hora es el Streaming por twitch? Yo activo!
Creo que eso es jugar un videojuego retransmitido en vídeo a tu PC.
@@luchtin Algo así, pero yo hablo del desarrollo en si, ya que eso sería desarrollo web también, en gran parte
@@cesargabrielleanez4775 no veo la parte de desarrollo web la verdad.