Es el tercer tutorial que voy a ver y a realizar. Los dos anteriores estuvieron súper. He aprendido y entendido conceptos que hasta ahora me quedaron claros. FELICIDADES !!!
Este video es uno de los cuales merecen tener mas vistas y mas like. Increible la manera de dictar la clase, se hecha de ver que te encanta el diseño web y eso hace que hagas un excelentisimo trabajo. Mis respetos y admiracion para ti, me ha servido mucho este video a aprender mas sobre CSS Grid y las maravillas que se pueden hacer con ello. Ten clarisimo que me tendras viendo cada uno de tus videos. Saludos.
@@yoimperator entonces algo haz hecho mal, yo soy estudiante de licenciatura en informatica y hago desarrollo web, por ende, pruebo en todos los navegadores la compatibilidad, y en ninguno ha dado problema.
Interesante tu exposición, me fui al minuto 15:37, vi como dos minutos y ... ya tienes otro suscriptor. Termino el comentario y veré todo el video, se que voy a aprender. pregunta ¿que plugin utilizas para visualizar las fotos en VSC??, de antemano Gracias por tu respuesta.-MODIFICACION- Listo viendo tu video de "Pon bello tu editor..." me das la respuesta IMAGE preview. Gracias de nuevo.
Las imágenes siembre se muestran en su tamaño original. Personalmente, para hacer que las imágenes se adapten a su elemento padre por lo general siempre pongo las siguientes propiedades a las imágenes img { width: 100%; height: 100%; objet-fit: cover; object-position: center; }
Holaaaa 👋🏽 Con respecto a tu pregunta, puedes modificar valores como: _grid-template-columns: repeat(auto-fit, 133px);_ el 133px en especial _grid-auto-rows: 200px;_ _height:275px;_ (esta propiedad esta en .gallery__item, las dos anteriores en .gallery) Al cambiar éstos valores tendrás que revisar, modificar y/o eliminar valores en los media queries. Espero te haya ayudado. Si tienes mas dudas puedes seguir comentando aquí :). Saludos.
Muy buenas tardes, me encantó tu video, incluso lo compartí con otros desarrolladores. Pero me surgió una duda, intenté hacerlo colocándole un "parragraph" a cada hexágono, pero directamente no aparece u ocupa la mitad de la figura, haciendo que la figura desaparezca. Quisiera saber si pudieras decirme cómo hacer que el texto se sobreponga al hexágono con la ayuda de un "hover" De ante mano muchas gracias por tu atención y felicidades, excelente video en verdad !!
Veo que en las media queries no existe un espacio entre operador lógico (que es and) y la condición (que esta dentro de los paréntesis) y pienso que por eso no las lee. Revisa también que los nombres de las clases estén correctamente escritas en el HTML y CSS.
Es el tercer tutorial que voy a ver y a realizar. Los dos anteriores estuvieron súper.
He aprendido y entendido conceptos que hasta ahora me quedaron claros. FELICIDADES !!!
Este video es uno de los cuales merecen tener mas vistas y mas like. Increible la manera de dictar la clase, se hecha de ver que te encanta el diseño web y eso hace que hagas un excelentisimo trabajo. Mis respetos y admiracion para ti, me ha servido mucho este video a aprender mas sobre CSS Grid y las maravillas que se pueden hacer con ello. Ten clarisimo que me tendras viendo cada uno de tus videos. Saludos.
disculpa pero no es cierto... explica muy bien si... pero no explica por no funciona en chrome los hexagonos son terribles...
@@yoimperator entonces algo haz hecho mal, yo soy estudiante de licenciatura en informatica y hago desarrollo web, por ende, pruebo en todos los navegadores la compatibilidad, y en ninguno ha dado problema.
@@ulisesafc7678 en realidad no funciona correctamente prueben bien de verdad... En Chrome no se ve bien
Wow, acabo de descubrir tu video, eres genial!!, la explicación excelente 👌, gracias por compartir tus conocimientos, éxitos!! 👏
Me salvaste! Muy buen video , excelente audio , muy bien explicado , espero que saques muchos videos más, saludos!
muchas gracias por tu ayuda, excelente explicación ..felicitaciones....
Es la primera vez que me suscribo con solo ver un video, super bueno el tuto, gracias
muchas gracias! me encanto. besos!
uff.. buenisimo. gracias!
Excelente explicación 👏👏👏
excelente video, mil bendiciones
Excelente video, de verdad un diseño muy genial 😎 😮
Muchas gracias 😊
Muchas gracias .. excelente ..
Esta espectacular, muchísimas gracias por compartir, seria genial si pudieras subir el código a algún repo como github
Excelente video, muchas gracias
muchas gracias, me salvaste jajaja
excelente video gracias... seria buen aun parte dos donde al darle click se pueda ver la imagen en grande...
increible apenas lo vi
Muchas gracias..
Interesante tu exposición, me fui al minuto 15:37, vi como dos minutos y ... ya tienes otro suscriptor. Termino el comentario y veré todo el video, se que voy a aprender. pregunta ¿que plugin utilizas para visualizar las fotos en VSC??, de antemano Gracias por tu respuesta.-MODIFICACION- Listo viendo tu video de "Pon bello tu editor..." me das la respuesta IMAGE preview. Gracias de nuevo.
Ja, ja, gracias a ti por mirarte un video mas y responderte.
IMPRESIONANTE!!! solo que mis imagenes son muy grandes.. tengo que ver como achicarlas
Las imágenes siembre se muestran en su tamaño original. Personalmente, para hacer que las imágenes se adapten a su elemento padre por lo general siempre pongo las siguientes propiedades a las imágenes
img {
width: 100%;
height: 100%;
objet-fit: cover;
object-position: center;
}
gracias me sirvió mucho
Es mi siguiente reto hacer esa galeria ya he hecho varios con apoyo de programadores como tu
¡Muy bien! 👏🏾
Excelente video, una consulta como podría hacer para que el hexágono sea un poco mas pequeño sin que se descuadre
Holaaaa 👋🏽
Con respecto a tu pregunta, puedes modificar valores como:
_grid-template-columns: repeat(auto-fit, 133px);_ el 133px en especial
_grid-auto-rows: 200px;_
_height:275px;_ (esta propiedad esta en .gallery__item, las dos anteriores en .gallery)
Al cambiar éstos valores tendrás que revisar, modificar y/o eliminar valores en los media queries.
Espero te haya ayudado. Si tienes mas dudas puedes seguir comentando aquí :). Saludos.
Me encanta el theme de tu Visual Code!!!, podrias decirme nombre para buscarlo y poder instalarmelo. Gracias mil.
Se llama Monokai pro. Aquí tienes un video de algunas otras extensiones y themes que ocupo ua-cam.com/video/zqMO_ZeVpjU/v-deo.html
Muy buenas tardes, me encantó tu video, incluso lo compartí con otros desarrolladores.
Pero me surgió una duda, intenté hacerlo colocándole un "parragraph" a cada hexágono, pero directamente no aparece u ocupa la mitad de la figura, haciendo que la figura desaparezca. Quisiera saber si pudieras decirme cómo hacer que el texto se sobreponga al hexágono con la ayuda de un "hover"
De ante mano muchas gracias por tu atención y felicidades, excelente video en verdad !!
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery {
width: 85%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(auto-fit, 133px);
grid-auto-rows: 200px;
justify-content: center;
gap: 1rem;
}
.gallery_item {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
grid-column: span 2;
/*266px + 17px = 283px */
height: 283px;
transition: 0.5s filter;
}
.gallery_item:hover {
filter: brightness(0.3);
}
.gallery_item:first-of-type {
grid-column: 2/ span 2;
}
/*Media Queries*/
@media screen and(min-width:270px) and(max-width: 504px) {
.gallery_item:first-of-type {
grid-column: 1 / span 2;
}
.gallery {
grid-auto-rows: 283px;
}
}
@media screen and(min-width:505px) and(max-width: 685px) {
.gallery_item:nth-of-type(odd) {
grid-column: 2 / span 2;
}
}
@media screen and(min-width:686px) and(max-width: 862px) {
.gallery_item:nth-of-type(3n + 1) {
grid-column: 2 / span 2;
}
}
@media screen and(min-width:863px) and(max-width: 1038px) {
.gallery_item:nth-of-type(4n + 1) {
grid-column: 2 / span 2;
}
}
@media screen and(min-width:1039px) and(max-width: 1215px) {
.gallery_item:nth-of-type(5n + 1) {
grid-column: 2 / span 2;
}
}
@media screen and(min-width:1216px) and(max-width: 1391px) {
.gallery_item:nth-of-type(6n + 1) {
grid-column: 2 / span 2;
}
}
@media screen and(min-width:1392px) {
.gallery_item:nth-of-type(7n + 1) {
grid-column: 2 / span 2;
}
}
Hola muchas gracias por el video disculpa así llevo el css y tengo problemas y no sé que puede que haya hecho mal
Veo que en las media queries no existe un espacio entre operador lógico (que es and) y la condición (que esta dentro de los paréntesis) y pienso que por eso no las lee.
Revisa también que los nombres de las clases estén correctamente escritas en el HTML y CSS.
@@dinoraPCode muchas gracias por tus recomendaciones las revisaré y daré el caso en ello
como se habre el inspector de propiedades?
Yo lo hago presionando las teclas: control shift i
o dando clic derecho en la página y seleccionando la opción "Inspeccionar página"
y con flex como seria?
Yo intente hacerlo en replit y no me funciono :(
Hola, yo realicé la galería tal cual la hiciste, pero la implementé en mi codigo con texto y no me queda alineada, crees que me puedas ayudar?
¡Claro! ¿puedo ver tu código?
Claro, como podría mostrártelo?
Pegarlo aquí o mandarlo por WeTransfer
@@dinoraPCode te lo puedo mandar por WeTransfer?, solo necesito tu e-mail para podertelo enviar
No es necesario. Puedes seleccionar la opción "obtener link" dando un clic en los tres botones/puntitos