CSS: Crear un menu vertical con impresionantes efectos (w livestyle)
HTML-код
- Опубликовано: 28 сен 2024
- Inscribete al curso: escuela.digital/
Visítanos en nuestra página web escuela.digital
Síguenos en Facebook: escuela.digital...
Síguenos en Twitter: escuela.digital...
Únete a la comunidad Escuela Digital en Facebook:
escuela.digital...
Genial la forma en que comunicas los conceptos. Buen ritmo y claridad 100%. Felicitaciones por eso y gracias por compartir.
quiero darte las gracias de corazón... llevo un año estudiando programación y ninguno de mis profesores ha podido explicarme mejor las cosas que tu eres un maestro de verdad muchas gracias
bro y ahora eres un programador
Excelente video, muy bien explicado y ademas pude aprender muchos otros detalles adicionales que sirven para aplicar en otros proyectos como lo de las fuentes de tipos de letras, los iconos en una sola imagen y varias cosas mas. Tambien es muy destacable que cuando pones una propiedad te das el trabajo de explicar como funciona, asi que uno no solamente copia lo que escribes sino que ademas entiende su funcionamiento. Saludos desde Chile 👍
Hola Alvaro. Felicitaciones y Felicitaciones.
Me parece genial la forma tan practica, clara y precisa que tienes para explicar las cosas. Espero que sigas subiendo mas videos.
Saludos.
Excelente me ha sido de mucha ayuda.
Muy bueno, me sirvio mucho..!! gracias y saludos desde Mexico
Genial la explicación, saludos desde Pucallpa
excelente explicación y menu bonito
Justo lo que buscaba, muy buenos videos. Voy a ahorrar para comprar tus cursos , saludos !!
Excelente! Muy bien explicado. Espero con ansias mas videos de este tipo :D
Excelente como explicas. felicitaciones!!!!!!
muy chévere tus tutoriales continúa así...
Hola, Excelente video, muy practica tu forma de expresar, desearia saber como puedo hacer la imagen en photoshop. Gracias.
amigo como hago para aplicar ese efecto pero de derecha a izquierda?
Este menú sirve utilizarlo en dispositivos moviles.
GRACIAS
alguien me puede ayudar???. al realizar la primera parte del menú hasta el minuto 14:39 en .menu li:hover me percato que se sombrea el botón pero no dentro del contenido de la letra del munu li como se muestra en el vídeo . ejemplo el espacio dentro del botón LA CARTA no se sombrea . gracias de antemano
genial vídeo.
Excelente!!!
que buenos tutoriales ..disculpa la molestia como se llama el editor que lo haces en tiempo real
+waba soft Deberias prestar mas atencion, lo dijo al inicio del video.
Tremendo. Eres un artista.
Tengo una duda de novato.(minuto 24:45) Por qué el segundo transition (el del margin left) se le pone a menu/a y no a menu/a:hover?
Suelo intentar anticipar los pasos que vas a seguir pero ahí me he quedado descolocado.
Muchas gracias por tus videos. Estoy aprendiendo muchísimo contigo
Me quedó! Gracias!
.menu a{width:100%. ya esta redundando ya que block es elemento de bloque y por default ocupa 100%, Corrigeme si me quiboco
Muito Bom, Ajudou bastante mesmo. Já vou assistir o próximo para deixar responsivo.
Sos un crack.
Genial, que potencia la del CSS3. Ademas de la excelente y fluida explicación. Altamente didáctico.
hola que tal si en lugar de foto quisiera agregar iconos descargados ¿como lo haría?
Estimado, me parece genial y practica tu método de enseñanza!! entendí todo fácilmente!! te agradezco!! :D
Órale, el Live Style está práctico, yo sólo configuraba Sublime para que cada que guardara refrescara el navegador, pero no es tan inmediato el cambio... mucho mejor el recurso que mencionas :-)
Que tal amigo, Escuela Digital...tendrás algún tutorial para realizar la imagen que tienes para utilizar como iconos?
Hola amigo, estoy aprendiendo a programar javascript gracias a ti. Me gustaría poder descargar este proyecto para hacer el siguiente que tienes con js. Pero no veo el enlace de descargar el zip en tu blog. Podrias ponerlo? Gracias tio.
hola buenas tardes, intente hacer el mismo menu pero despleglabe y cuando se despliega el submenu la parde del borde se despliega hasta abajo, como hago para que solo se quede de su tamaño, gracias
Muy buen vídeo , por lo general pasamos por alto muchos conceptos de CSS por el uso de frameworks como Bootstrap o Foundation, por lo que son buenos estos videotutoriales para el reforzamiento de CSS.
Saludos.
excelente... simple y practico ..solo tengo una duda como aplicaria el diseño para un submenu de cualquiera del menu? :/
MUCHAS GRACIAS, por compartir tus conocimientos. Un gran aporte.
Nos alegra de que te haya servido! :)
Excelente Tutorial y muy buena explicación. Gracias y saludos.
Que tal Álvaro Felipe, te felicito por este excelente tutorial, solo te quiero pedir por favor si puedes enseñarnos como hiciste los iconos con photoshop, eres un excelente Maestro.
Creo que W3C recomienda px para layout y em para letras
Excelente Alvaro, me han servido muchísimo tus enseñanzas, mil gracias
Excelente tutorial, una pregunta tienes algun ejemplo de usar icon fonts en vez de sprites. El problema q tengo es con los estilos los icon fonts ya los tengo añadidos al proyecto
esta bonita la imagen de los iconos, hay algna manera de descargarla?
como gravas estes videos? com que programa?
excelente menú y muy bien explicado
Muy buena tu forma de explicar ;)
Un vídeo estupendo, gracias por la enseñanza!
esta genial amigo lo explicas muy bien te felicito te voy a seguir
siempre subiendo videos novedosos, muchas gracias
Hola Felipe!
Puedes usar también LiveReload! funciona como extensión en Chrome.
Muy buen video!
Saludos!
Lo que me jode de todo esto, es que aún se tiene que optimizar para explorer, nth-child no funciona en esa mierda de navegador. Es frustrante no poder usar todo lo magnifico que nos trae css3...
LiveStyle funciona con Brackets? Gracias. Salu2
+777colombe Brackets tiene por si mismo su LiveStyle propio. Saludos.
Rio de Janeiro está com você!!!!
Excelente aporte, gracias.
excelente compañero muy bien
Hola muy buen día te deseo. Recien me suscribo al canal por este video. acabo de ver tu listado y es muy interesante, estoy seguro que aprenderé muchas cosas nuevas.
No obstante este mensaje que te escribo es porque tengo una incomodidad. al hacer todo exactamente como tu, mi efecto de transition en el li:hover al efectuarse parpadea, no sale algo bonito fluido, si no es molestia por favor me dirías o por favor por qué ocurre esto? (tengo una computadora con buenos recuros por lo que dudé que esta fuese la razón)
tengo el mismo problema amigo
muy bueno y rapido !!!
Como haces para que se te actualice la página al instante?
instala PREPROS
Boa aula.
Grande!
Salió bien la transición, pero al momento de hacer el hover, en Chrome me parpadeaba mucho, pero en el Edge si sale fluido, que puede ser?
tengo el mismo problema amigo no has conseguido una solución?
todavía no capto bien el porque pero el problema me parece que esta en el tamaño de box-shadow
.menu li:hover{
box-shadow: 15em 0 rgba(56, 54, 54, 0.911) inset;
}
coloquen los 15em y prueben
al momento de estar haciendo el posicionamiento de los iconos se ve como se van desplazando los iconos hacia arriba, de que forma puedo lograr ese efecto???
Fernando González No es ningun efecto. Es el plugin livestyle que aplica los cambios de CSS en tiempo real y por tanto ves como se mueven los iconos. Sin embargo, se puede imitar algo asi simplemente cambiando la propiedad background-position en hover y aplicando un transition.
Ok, probaré con lo que dices.... Gracias por la información
hermano explicas muy bien. le felicito
Muchas gracias :D ¿ya te suscribiste? :V
Un link para descargarlo :C
escueladigital.pe/blog/desarrollo/frontend/crear-un-menu-vertical-con-efectos-css3
Hola que tal Alvaro Felipe , solo te quiero agradecer por estos excelentes tutoriales de verdad me ha servido muchisimo, eres un excelente Maestro y explicas perfectamente bien, ojala y sigas compartiendo tus conocimentos por mucho mas tiempo, saludos desde León Guanajuato, Mexico..
Eduardo Gomez gracias!
wao es impresionante como lo haces increible sin palabras waooooo para la proxima deje el link del proyecto para no escribir toda esa maamada