Hay un problema con este método, el header te queda ocupando todo el viewport con un z-index por delante, si quieres poner contenido después de la navehación, no lo puedes seleccionar ni hacer click sobre él. Seguí la misma idea, poniendo las variables en el header para cambiar su altura, se corregí el error pero la animación no me quedo muy buena =(.
Hola muchas gracias, solo tengo una duda como solucioanarias que cuando en tu main ingresas contenido que supere el alto de tu pantalla y scrolees este menu desplegable no se suba?
Hola! Cuando intento colorar un Img en lugar de texto H2, los Items desaparecen, incluso al observar el grid en el navegador, se modifica todo. Solo cuando elimino el Img y regreso al H2, vuelve todo a la normalidad. Cómo puedo solucionarlo?
Thankyou for actually explaining tNice tutorialngs. Other videos that I watched started talking about how to make soft and didn't ntion anytNice tutorialng
Saludos, buen menú; solo un detalle, cuando le das clic en la parte del menú para abrir y cerrar, al colocarse la x, aveces aparece una sombra del reflejo de un cuadrado sobre la x, dale varias veces haber si tu lo notas, porque yo me di cuenta de este detalle, debe ser un detalle en el css.
Me gustaría que hicieras un vídeo de un menu responsive drop-down pero simple, es decir con poca customización para entender mejor los conceptos que des , Vi uno que hiciste pero no pude entender del todo porque tenía iconos etc
me preguntaba si se podia hacer alguna cosas con css y no cargar js y me sale este video, aunq no c si hay alguna forma de esconder el #nav de la barra de url?
que quiere decir 100 sitios web? que puedo subir 100 dominios o que puedo subir 100 paginas así sea 4 paginas en un solo dominio( inicio, contacto, sobre nosotros, equipo) puedes hacer aunque sea un short explicando eso?
2 года назад
muchas gracias por este proyecto, está buenísimo..lo raro es que el visualstudio no me está jalando las imágnes, tengo estructura de index en raíz y las imágenes en carpeta...de hecho el mismo visualstudio hace la referencia automáticamente y ni así "agarra" la imagen de fondo que quiero poner =/
Muy buena explicación, pero considero al menos en un elemento de este tipo donde no tengas tanto contenido que es mejor usar el flex, claro para elementos con mayor contenido para posicionamiento de varios elementos si veo más funcionalidad en grid.
Muy buena la opcion de usar grid para hacer el menu, siempre se aprende algo, pero.... jajajajaja siempre hay un pero... el problema con usar #nav para la activacion del menu, trae con sigo, que en una aplicacion real, si estas en cualquier lugar de la pagina, te va a subir hasta el nav, y eso es muy molesto... Un saludo y me encantan tus videos!!!!!
@@francoagustin765 No te funcionó? Revisa en Tailwind después de instalar con Npm , tienes que ver si es una instalación básica o para un framework , luego tienes que ligar el archivo Cc dónde irán las importaciones de Tailwind y ligarlo al HTML , también agregar la configuración de Tailwind en el archivo Tailwind.config
@@francoagustin765 un clasico, lo que sucede es que hay que instalar a nivel de proyecto y no de sistema, me ocurria lo mismo, otra cosa que te puede servir es usar la cdn y asi no tendras que descargar nada
invierte el valor de la custom property de la clase nav para que te quede así: --state-menu: translate(100%); ¡Listo! Ya tienes el desplazamiento de derecha a izquierda 😎👌
@@toxicproradio Probé haciendo eso y la pagina me agrega un scroll para ir hacia la derecha, ya que el nav se va hacia esa zona. Creo que con el overflow hidden eso no deberia pasar ¿no? Pero no me estaría funcionando XD
El problema es que en la pagina, aparece la barra de scroll, sin embargo no tiene que aparecer porque no hay mas elementos. Quisiera que me diga cual es el error en el codigo. Se lo agradecería muchísimo
![CREA un MENÚ ANIMADO con CSS RESPONSIVE [ ❌ Sin JavaScript ]](http://i.ytimg.com/vi/TeUF-MQZfAw/mqdefault.jpg)
![CREA un MENÚ ANIMADO con CSS RESPONSIVE [ ❌ Sin JavaScript ]](/img/tr.png)
📘CURSO CSS3 COMPLETO (Descuento) 👉 alexcgdesign.com/cursocss
Cuando estaba aprendiendo recien html, intentando practicar, pues los links no me aparecen cuando estan dentro de una lista, me sale el texto normal
@zyzz🔱 bien
¡Gracias!
¡Gracias por el apoyo Alex! Un saludooo!
Gracias por la donación igual:))
Espectacular, la verdad que quedé flipando, excelente trabajo
acabo de terminarlo,es una pasada ! Gracias por compartir
Creo que termino Javascript y tomo tu curso, es increíble todo lo que haces.
Hay un problema con este método, el header te queda ocupando todo el viewport con un z-index por delante, si quieres poner contenido después de la navehación, no lo puedes seleccionar ni hacer click sobre él. Seguí la misma idea, poniendo las variables en el header para cambiar su altura, se corregí el error pero la animación no me quedo muy buena =(.
buen ejercicio, te agradesco tu dedicaciòn. Ya estoy listo para el live del lunes
¡Super genial clase Alex! Increíble el poder de GRID... ¡Mira mamá! ¡Sin JavaScript! 😎👌
JAJAJAJA Exactamente y sin Flexbox:)
Otro bocado de css a Javascript, muy buen manual gracias por este gran ejemplo.
Que pasada! Que increíble aporte. Felicidadez
Te amo, AlexCG. Me gustan tus vídeos, y tu curso de Codigo Facilito me ayudo un monton.
Gracias por el apoyo Samael!!! Un saludo
Super. gracias amigo, pero y como se le puede poner Sub menus?? y a los sub menus a su vez otros sub menus....
ESTUPENDO!!! GRACIAS POR COMPARTIR. BUENA SUERTE!!!!
2:00 Que es mejor o mas rápido; Copiar y pegar el link de la fuente tal como has hecho o, Importar la fuente?
Bro no sabes lo que me has ayudado el dia de hoy, eres un crack, fiera, master, numero 1
Excelente Alex se me ocurre que tu técnica con algún retoque está buenísima para maquetar un carrito de compras!!!
Hola muchas gracias, solo tengo una duda como solucioanarias que cuando en tu main ingresas contenido que supere el alto de tu pantalla y scrolees este menu desplegable no se suba?
Hola!
Cuando intento colorar un Img en lugar de texto H2, los Items desaparecen, incluso al observar el grid en el navegador, se modifica todo. Solo cuando elimino el Img y regreso al H2, vuelve todo a la normalidad. Cómo puedo solucionarlo?
Thankyou for actually explaining tNice tutorialngs. Other videos that I watched started talking about how to make soft and didn't ntion anytNice tutorialng
Justo estoy aprendiendo de manera expréss jaja gracias por el tuyo, sirve mucho!
Gracias a ti!!
Buenisimo mano me gusto mucho la animación del boton de menu sigo dandole al curso de udemy
¡Genial Yoan! Gracias por el apoyo
Saludos, buen menú; solo un detalle, cuando le das clic en la parte del menú para abrir y cerrar, al colocarse la x, aveces aparece una sombra del reflejo de un cuadrado sobre la x, dale varias veces haber si tu lo notas, porque yo me di cuenta de este detalle, debe ser un detalle en el css.
lo maximo, gracias amigo
Alguien me prodria decir por favor para que sirve el :target estoy buscando videos y nadie explica como para que exactamente sirve ayuda!!!
brother eres un maestro.
Muy bueno, Excelente.
que comando es para convertir la liena de codigo en comentario como lo haces en la fuente?
Hola, Alex solo pude descargar la imagen de hero, haber si me ayudas, saludos.
Interesante solo con CSS, yo lo hacia con el selector hermano adyacente, este modo de hacerlo también se ve bien. voy a intentarlo.
Como haria para agregar este menu a un archivo index preexistente,? deberia incluir en el grid a todo mi body?
Me gustaría que hicieras un vídeo de un menu responsive drop-down pero simple, es decir con poca customización para entender mejor los conceptos que des , Vi uno que hiciste pero no pude entender del todo porque tenía iconos etc
Claro, estará apuntado!
@@AlexCGDesign muchas gracias, que bueno que nos leas !!! De 10
Seria genial
¿El curso esta actualizado?
me preguntaba si se podia hacer alguna cosas con css y no cargar js y me sale este video, aunq no c si hay alguna forma de esconder el #nav de la barra de url?
Jamás me había hecho esta pregunta, voy a averiguarlo:))
Flexbox para centrar y Grid para layouts
En efecto y también CSS GRID para uno que otro truco :)!!
que quiere decir 100 sitios web? que puedo subir 100 dominios o que puedo subir 100 paginas así sea 4 paginas en un solo dominio( inicio, contacto, sobre nosotros, equipo) puedes hacer aunque sea un short explicando eso?
muchas gracias por este proyecto, está buenísimo..lo raro es que el visualstudio no me está jalando las imágnes, tengo estructura de index en raíz y las imágenes en carpeta...de hecho el mismo visualstudio hace la referencia automáticamente y ni así "agarra" la imagen de fondo que quiero poner =/
Muy buena explicación, pero considero al menos en un elemento de este tipo donde no tengas tanto contenido que es mejor usar el flex, claro para elementos con mayor contenido para posicionamiento de varios elementos si veo más funcionalidad en grid.
voy a el link que decis y no figura para descargar las imagenes
empieza en el min 4:00 y ya no hay publicidad de hostinger.
muy buen video pero con cual es mejor maquetar con css grid o flexbox 😅😅
Yo uso grid para cosas grandes y Flex para cosas pequeñas
Grid para crear el layout y flexbox para posicionar los elementos en el layout
Yo diría que Grid para Layouts y Flexbox para módulos :)
Muy buena la opcion de usar grid para hacer el menu, siempre se aprende algo, pero.... jajajajaja siempre hay un pero... el problema con usar #nav para la activacion del menu, trae con sigo, que en una aplicacion real, si estas en cualquier lugar de la pagina, te va a subir hasta el nav, y eso es muy molesto...
Un saludo y me encantan tus videos!!!!!
Will stay tuned to your channal! Cheers!
Muy buen vídeo Alex
Un saludo!!!
Grandioso aporte !!! Gracias 🤯🤯✨
Con gusto!!
🙃 ¡Qué genial y fácil lo hacer ver!... aunque mi rompe-cocos es el cross-browser...¿crees que haya problemas o que requiera de algo más?
¿Podrías hacer un poco más especifica tu pregunta? No entendí:((
@@AlexCGDesign 🙃 Me refiero a que sea compatible y no tenga problemas con los navegadores, sobre todo Safarí (y algunas versiones un poco atrasadas)
No me funciona en Google Chrome, pero si en Firefox :(
Super chingon!
Saludos!
pudieras hacer un tutorial de como usar tailwind y hacer una pagina responsive con ese framework? pd: tu contenido es muy bueno como siempre
X2, instale taillwind via npm con varios videos. Ninguno me funcionó y no se porqué.
@@francoagustin765 No te funcionó? Revisa en Tailwind después de instalar con Npm , tienes que ver si es una instalación básica o para un framework , luego tienes que ligar el archivo Cc dónde irán las importaciones de Tailwind y ligarlo al HTML , también agregar la configuración de Tailwind en el archivo Tailwind.config
@@francoagustin765 es facil bro solo sigue las instrucciones de la propia pagina de forma litearl y asegurate de tener node antes
@@francoagustin765 un clasico, lo que sucede es que hay que instalar a nivel de proyecto y no de sistema, me ocurria lo mismo, otra cosa que te puede servir es usar la cdn y asi no tendras que descargar nada
Te quedo de 10 !
¡Graciaas!
Hola buen video!! consulta como haces para que el chrome se te actualize al instante ?
Tiene la extensión "Live Server" de VS Code
Gracias Daniel!
Sos un genio Alex. Muy bueno... Podrías hacer un tutorial de como hacer el efecto MATRIX?
Suena interesante, claro! Gracias!
Gracias!
eres el mejor alex :D
Un saludo!!!
Crack🔥🔥🔥
una pregunta, ¿como hago para que mi pagina se recargue automaticamente para ver los cambios mas facilmente? Gracias!!
Holaa, en VSCODE hay una extensión que se llama Live Server, con esa trabajo más regularmente:)
Una pregunta "justify-content y align-items" no son propiedades de Flex-Box?
Hola, sí. Pero igual son propiedades de CSS GRID:)
@@AlexCGDesignLo importante del conocimiento..!! Saber lo que enseñamos..Felicicidades !!
Bravo 👏👏👏👏👏
¡Excelente!
Gracias 👍👍
Podrías hacer un navbar responsive de ecommerce? Que tenga buscador carrito de compra.
Increíble
Un saludo enorme Frank!
@@AlexCGDesign te recomiendo usar live preview de microsoft, es igual que live server pero en tiempo real y muy util para CSS
Que buen vídeo, Alex!
🔥 ¿Cómo se podría hacer para que el menú se despliegue de la derecha y no de la izquierda?
Gracias!!
invierte el valor de la custom property de la clase nav para que te quede así:
--state-menu: translate(100%);
¡Listo! Ya tienes el desplazamiento de derecha a izquierda 😎👌
Exactamente, muchas gracias!
@@toxicproradio Probé haciendo eso y la pagina me agrega un scroll para ir hacia la derecha, ya que el nav se va hacia esa zona. Creo que con el overflow hidden eso no deberia pasar ¿no? Pero no me estaría funcionando XD
Exelente
un crack
I don't even have soft soft I just have the demo
Esta genial!! , pero se aplica demasiado codigo 😁
Solo un poco jejeje
super
soft soft by Image-Line Software
Hola profesor, quiero que me ayude con mi codigo por favor!!!
body{
background: linear-gradient(to bottom, #355070, #6d597a, #b56576);
background-attachment: fixed;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
*{
color: white;
font-family: Ubuntu;
font-size: 15px;
user-select: none;
}
#nav{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto 20px;
font-family: Dancing Script;
display: flex;
justify-content: space-between;
align-items: center;
/*border: 1px solid white;*/
}
#title{
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: space-around;
align-items: center;
width: 200px;
height: max-content;
}
/*____________________________________________*/
#NAV{
--state-open: scale(1);
--state-close: scale(0)
}
#NAV_ICONS{
display: grid;
grid-template-columns: repeat(1,fr);
width: 60px;
height: 60px;
justify-content: center;
align-items: center;
position: relative;
}
#ex,#bar{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 40px;
transition: all .3s;
}
#bar{
transform: var(--state-open);
}
#ex{
transform: var(--state-close);
}
/*____________________________________________*/
#title p{
z-index: 1000;
font-size: 30px;
}
#title #carh{
font-family: Dancing Script;
}
#inputs{
position: absolute;
bottom: 650px;
width: 260px;
height: 40px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: white;
border: 1px solid white;
border-radius: 20px;
}
#inputs #m-input{
border: none;
outline: none;
border-bottom: 1px solid black;
background: none;
max-width: 150px;
color: black;
}
#inputs button{
border-radius: 50%;
width: 35px;
height: 35px;
border: none;
background-color: black;
}
#main-container{
width: 350px;
height:350px;
background-color: #023e8a;
box-shadow: 0 0 20px rgba(0, 0, 0, .4);
border-radius: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#main-container #img-container{
width: 100%;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
#img-container #weather{
width: 100px;
height: 100px;
}
#main-container #info{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#info p{
margin-left: 10px;
}
#social-medias{
background-color: rgba(0, 0, 0, .4);
width: 200px;
height: 50px;
position: absolute;
bottom: 100px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(255, 255, 255, .6);
display: flex;
justify-content: space-evenly;
align-items: center;
border: 1px solid white;
}
#social-medias img{
width: 45px;
height: 45px;
transition: all .4s;
}
#social-medias img:hover{
transform: scale(1.4);
transition: all .4s;
}
#social-medias img:active{
transform: scale(.7);
transition: all .2s;
}
#NAV:target{
--state-close: scale(1);
--state-open: scale(0);
}
#NAV_LINKS{
position: absolute;
background-color: rgba(0, 0, 0, .4);
display: flex;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
El problema es que en la pagina, aparece la barra de scroll, sin embargo no tiene que aparecer porque no hay mas elementos. Quisiera que me diga cual es el error en el codigo. Se lo agradecería muchísimo
Fuck ill co back later
lo unico aburrido de este canal, es el esponsor de hostinger.... ya sabemos eso.
¡Gracias!