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! 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?
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?
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?
Hola, Alex solo pude descargar la imagen de hero, haber si me ayudas, saludos.
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 =/
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
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?
Thankyou for actually explaining tNice tutorialngs. Other videos that I watched started talking about how to make soft and didn't ntion anytNice tutorialng
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.
@@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
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!!!!!
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
@@danilsonbz TIENE QUE TENER
@@zyzz5985 bien
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 =(.
¡Gracias!
¡Gracias por el apoyo Alex! Un saludooo!
Gracias por la donación igual:))
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?
Espectacular, la verdad que quedé flipando, excelente trabajo
Creo que termino Javascript y tomo tu curso, es increíble todo lo que haces.
acabo de terminarlo,es una pasada ! Gracias por compartir
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?
Super. gracias amigo, pero y como se le puede poner Sub menus?? y a los sub menus a su vez otros sub menus....
Alguien me prodria decir por favor para que sirve el :target estoy buscando videos y nadie explica como para que exactamente sirve ayuda!!!
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?
¡Super genial clase Alex! Increíble el poder de GRID... ¡Mira mamá! ¡Sin JavaScript! 😎👌
JAJAJAJA Exactamente y sin Flexbox:)
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:))
que comando es para convertir la liena de codigo en comentario como lo haces en la fuente?
Otro bocado de css a Javascript, muy buen manual gracias por este gran ejemplo.
buen ejercicio, te agradesco tu dedicaciòn. Ya estoy listo para el live del lunes
Como haria para agregar este menu a un archivo index preexistente,? deberia incluir en el grid a todo mi body?
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
Excelente Alex se me ocurre que tu técnica con algún retoque está buenísima para maquetar un carrito de compras!!!
Hola, Alex solo pude descargar la imagen de hero, haber si me ayudas, saludos.
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 =/
voy a el link que decis y no figura para descargar las imagenes
Bro no sabes lo que me has ayudado el dia de hoy, eres un crack, fiera, master, numero 1
¿El curso esta actualizado?
Que pasada! Que increíble aporte. Felicidadez
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 :)
Justo estoy aprendiendo de manera expréss jaja gracias por el tuyo, sirve mucho!
Gracias a ti!!
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 !!
Flexbox para centrar y Grid para layouts
En efecto y también CSS GRID para uno que otro truco :)!!
Interesante solo con CSS, yo lo hacia con el selector hermano adyacente, este modo de hacerlo también se ve bien. voy a intentarlo.
No me funciona en Google Chrome, pero si en Firefox :(
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.
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
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?
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:)
Thankyou for actually explaining tNice tutorialngs. Other videos that I watched started talking about how to make soft and didn't ntion anytNice tutorialng
ESTUPENDO!!! GRACIAS POR COMPARTIR. BUENA SUERTE!!!!
🙃 ¡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)
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.
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!
brother eres un maestro.
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
Will stay tuned to your channal! Cheers!
lo maximo, gracias amigo
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!!!!!
Muy bueno, Excelente.
Sos un genio Alex. Muy bueno... Podrías hacer un tutorial de como hacer el efecto MATRIX?
Suena interesante, claro! Gracias!
Muy buen vídeo Alex
Un saludo!!!
empieza en el min 4:00 y ya no hay publicidad de hostinger.
Grandioso aporte !!! Gracias 🤯🤯✨
Con gusto!!
Te quedo de 10 !
¡Graciaas!
Super chingon!
Saludos!
eres el mejor alex :D
Un saludo!!!
Gracias!
Podrías hacer un navbar responsive de ecommerce? Que tenga buscador carrito de compra.
Bravo 👏👏👏👏👏
Crack🔥🔥🔥
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
¡Excelente!
Gracias 👍👍
Exelente
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
Esta genial!! , pero se aplica demasiado codigo 😁
Solo un poco jejeje
soft soft by Image-Line Software
un crack
I don't even have soft soft I just have the demo
super
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!