Eventos click con solo CSS 

Despues de 7 años de la publicacion de este video aun sigue siendo muy util y ayudando a personas con muchas de aprender a programar. Excelente profesor Alvaro

Esta bien explicado pero en la ventana modal lo mas correcto seria: label[for="cerrar_modal"] {diplay:none;} #abrir_modal:checked ~ label[for="cerrar_modal"]{display:fixed;} de la otra forma aunque no se vea pueden darle click sin darse cuenta

Gracias a este video solucioné lo que estaba buscando: ocultar el check box y que solo quedara el botón

Te felicito amigo. Se aprende mucho con tus videos. Tus videos y los de píldoras informáticas son lo mejores que he visto

Es increíble tu canal! gracias por compartir cosas tan útiles. Saludos desde Misiones, Argentina, la tierra de las Cataratas del Iguazú.

Alvaro! Sos el Messi de los profes Web (al menos en español)! Siempre te estaré agradecido. Tu trabajo es de enorme generosidad.

Señor usted es un Crack, siga asì, estoy con 4 semestres en ingenierìa y no veo cuando llegue a ser como usted

gracias por sus muy buenos tutoriales señor Alvaro, sus videos complementan muy bien mis estudios de arquitectura de entornos web en cibertec

Estimado Alvaro F. se le agradece por estas contribuciones: Buena dicción, se entiende el 100% de lo que quieres trasmitir, te equivocas muy poco(por no decir rara vez),. En resumen sigue así compadre, tu sabes que el sabe y enseña aprende 2 veces...Bendiciones

Wao! usted si que sabe hacer totorales, me gusta su forma de explicar y la considero la mejor de todas, la mayoría de dise;adores web usan términos y métodos complejos no aptos para principiantes. Like!!!!!!

Excelente, aprendiendo cada día mas con Escuela Digital. Bien alvaro. Saludos.

Muy buenos tus vídeos Alvaro, la verdad que están muy bien explicados. Te felicito.

Eres un grande, eres al que mejor entiendo en estos temas, siempre con una buena explicación, no sabia que esto se podía hacer con css.

Muy buena clase y explicacion excelente. Gracias Espero que sigas teniebndo exitos y haciendo mas tutoriales como estos...

Excelente forma de explicar!!! muy bueno!

muchas gracias por tu trabajo!!! muy facil y practico, me suscribi de inmediato!!!

Uno de los mejores tutoriales que he visto! Gracias capo! Por cierto, tienes un tutorial sobre jade y la automatizacion con el navegador? Utilizo Stylus :)

Exelente video amigo, se aprende mucho en cada uno de ellos.

Excelente tutorial, muchas gracias.

¡¡muchas gracias!! Muy bueno el video, bien explicado =D

te ganaste 1 suscriptor amigo, gracias por el video

increíble, muchas gracias álvaro!

excelente tutorial, edteam la mejor escuela remota

Muchas gracias por este excelente video.

Muchas gracias, me has ahorrado el trabajo de aprender JavaScript :D

Muchas gracias por sus videos, tienes un don para desmenuzar y transmitir tu conocimiento, he aprendido mucho con tus videos solo que en este video cuando agregué +label ya mi sublime no aplico nada más, ¿tengo que descargar algun plugin a mi sublime? hojala me puedas ayudar ya que estoy haciendo la pagina de mi taller . Gracias por venir a México.

Genio,estaba buscando esto.Aunque,como soy "nuevo",no podria decir q diferencia hay entre hacerlo en css y en js...

Hola alvaro! Como estas?Son recomendables utilizar algunas de estas tecnicas en un proyecto real para subir a la web o en esos casos es mejor emplear javascript (jquey) ?

Felicidades Álvaro. Tu canal es adictivo. Una pregunta ¿Se puede hacer un ("quiz") cuestionario dinámico en HTML5 o es necesario usar un programa adicional para implementarlo en un sitio de internet? Saludos desde México.

Genial no se me habia ocurrido usar el target de esa manera!

hola.. tengo una duda como podria hacer animaciones con menu acordeon desplegablr no me permite cerrar tampoco

esa ventana modal se puede emplear en una imagen? pd: muy buneos videos saludos y siga asi

Excelente aporte gracias, Se puede implementar el cierre del navedagor o salida de la pagina para poder realizar acciones antes del cierre como lo puede ser el cierre de sesión al salir de la página o al cerrar la ventana?

Hola, excelente clase, eres de lo mejorcito en Perú ah... como podria hacer en caso de submenus? hay alguna opcion o video q me recomiendes? gracias

Has ascendido a Sensei! enhorabuena

Tambien aplica para el responsive design?? Profesor Alvaro

Gracias, Alvaro. Aprendo y entiendo mucho mejor con tus videos, hice una ventana modal guiandome con tus videos pero utilicé target. codepen.io/manuelroldanr/pen/jPajmz

Maestro Alvaro en top:-100vh, el vh hace referencia al view port. Gracias.

Muy buen video, solo que la pseudo clase :Target si puede tener su destino u objetivo en otra pagina

Hola... Alvaro...estaba siguiendo tu dise;o...por cierto muy bueno, pero tengo una duda, si tuvieramos una pagina web mas extensa hacia el lado vertical, cuando se muestre el menu desplazado...quisiera saber como desactivar el scroll de la pagina, mientras se seleccione algun enlace del menu o se de click a la X, nuevamente deberia de aparecer el scroll para desplazarnos en la pagina...ojala pudieras orientarme...gracias y muy bien explicado el css....gracias Alvaro

hola primero que nada paso a saludarlo y agradecer por tu vidros son buenisimos y he realizado algunos proyectos gracias a tus tutoriales pero enfocandonis en el tema de css he visto que hay efectos y complementos css para web y mi pregunta es la siguiente. si yo quiero diseñar e incrustar un elemento en css. como lo puedo agregar a un sitio o de que manera. he intentado hasta con html pero nada. espero que me puedas orientar este mundo css. saludos!

usas SCSS y JADE, eso no esta mal, lo malo es que no muestras el código compilado de los html y los css. y el titulo dice con solo CSS =)

hola soy nuevo en esto quisiera saber como le haces para ver como te va quedando el proyecto cuando vas editandolo podrías decirme gracias que se vea el sublime y la pagina web o algo asi gracias

En el video explica por los nombres de los tags (en que el programa ya lo reconoce), pero no adecuado para aquellos que hacen por notepad. Por favor, puede poner el codigo completo?

3:47 como haces para pasar del jade a html? perdon por mi ignorancia nunca he usado jade

Hola, primero decirte que he aprendido muchísimo con tus vídeos, son excelentes, sin embargo al tratar de ejecutar este ejemplo en particular no me genera el efecto del target?. que puede ser? main{ width: auto; margin: auto; padding: 10; } .acordeon{ background: #eee; a{ text-decoration: none; display: block; background: #ddd; line-height: 2.5; padding: 0 1em; color: steelblue; font-weight: bold; } p{ padding: 1em; margin: 0; display: none; &:target{ color: red; display: block; }}} Principal Titulo 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies nisi justo, sodales lacinia arcu tempor tincidunt. Vestibulum molestie vestibulum feugiat. Nam vehicula interdum molestie. Suspendisse ut metus at elit tincidunt tristique sed vitae lorem. Duis lacus quam, facilisis vel sagittis in, malesuada et nisl. Cras auctor efficitur ultricies. In ultrices volutpat orci dignissim interdum. Proin orci risus, feugiat a blandit vel, sodales eget metus. Nam eu laoreet leo. Sed a fringilla ligula, non aliquet felis. Aenean lorem nibh, condimentum in massa eu, iaculis vehicula orci. Vestibulum ac erat tellus. Donec congue ex dui, eu ullamcorper turpis commodo vel. Donec id ligula sed ex sagittis tincidunt vel quis nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec convallis interdum libero sit amet tincidunt. Titulo 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies nisi justo, sodales lacinia arcu tempor tincidunt. Vestibulum molestie vestibulum feugiat. Nam vehicula interdum molestie. Suspendisse ut metus at elit tincidunt tristique sed vitae lorem. Duis lacus quam, facilisis vel sagittis in, malesuada et nisl. Cras auctor efficitur ultricies. In ultrices volutpat orci dignissim interdum. Proin orci risus, feugiat a blandit vel, sodales eget metus. Nam eu laoreet leo. Sed a fringilla ligula, non aliquet felis. Aenean lorem nibh, condimentum in massa eu, iaculis vehicula orci. Vestibulum ac erat tellus. Donec congue ex dui, eu ullamcorper turpis commodo vel. Donec id ligula sed ex sagittis tincidunt vel quis nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec convallis interdum libero sit amet tincidunt. Titulo 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies nisi justo, sodales lacinia arcu tempor tincidunt. Vestibulum molestie vestibulum feugiat. Nam vehicula interdum molestie. Suspendisse ut metus at elit tincidunt tristique sed vitae lorem. Duis lacus quam, facilisis vel sagittis in, malesuada et nisl. Cras auctor efficitur ultricies. In ultrices volutpat orci dignissim interdum. Proin orci risus, feugiat a blandit vel, sodales eget metus. Nam eu laoreet leo. Sed a fringilla ligula, non aliquet felis. Aenean lorem nibh, condimentum in massa eu, iaculis vehicula orci. Vestibulum ac erat tellus. Donec congue ex dui, eu ullamcorper turpis commodo vel. Donec id ligula sed ex sagittis tincidunt vel quis nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec convallis interdum libero sit amet tincidunt.

¿Cómo puedo aplicar esto en tablas?, Yo estoy haciendo una tabla periódica y me gustaría que al darle clic a un elemento, me muestre el evento modal, el evento dos que enseña, buena tarde

Si tengo un body background de otro color como puedo ocultar el label de cerrar modal

good!!!!!!!!!!!

Que tal Alvaro, me gustan mucho tus vídeos y no entiendo el porque de tus pocas visitas si contigo es posible aprender mas en un vídeo que en un curso completo de mejorando.la (como ejemplo) pero en realidad tengo una idea de el porque. A mi punto de vista una de las causas son el formato en tiempo de los vídeos (casi todos superan la media hora), aunque tal vez te lleve un poco mas de tiempo hacerlo, deberías recortarlos y editarlos de forma que se pueda resumir lo importante a manera que se perciban como tips. ¿Porque no lo pruebas en un par de vídeos? Otra cosa, deberías incluir los archivos de el ejemplo y eso podrías hacerlo en un blog, podrías obtener un dinero extra (que nunca cae mal) de publicidad en él. Espero que no tomes mis sugerencias de mala manera, porque están escritas con la mejor de las intensiones. Eres grande, éxito!

El vídeo está impecable, wow excelente explicación. Tengo una duda sobre el ultimo ejercicio ¿Cómo se traduce esto ultimo a css sin sass? &:checked ~ ul { left: 50%; } Alguien que se comunique conmigo para una ayudadita please

Si tengo un body background de otro color como puedo ocultar el label de cerrar modal !!!!!!POR FAVOR LO NECESITO AYUDENMEEEEEEEEEEEE!!!!!

Utilizo "Brakects" y la verdad en la forma en que lo explicas no me funciona del todo en ese programa... Gracias por el vídeo igual.

como se llama y se instala ese compilador q usas de html

a mi no me estaría funcionando el target con html y css normal (sin jade ni sass), no entiendo cuando colocas &:target... dentro del selector de P q esta dentro del selector de .acordeon minuto 07:55 Traduciendolo a css normal yo coloqué un .acordeon p{display:none;} .acordeon p:target{display:block;} y no me funciona. :(

ya no funciona eso en la actualidad... cómo será?

Hola alvaro muy buen video mi pregunta es si la pseudo clases es compatible con todos los navegadores o solo con algunos selectores

cual es el evento doble click en css?

Alguien tiene el html y css ya ordenado correctamente que me lo pueda pasar?? de antemano gracias!

Que pasa cuando quiero mover un modal que no es hijo?

No me funciono el primero :(

ehi esto &:checked como seria en .css

no me acepta el target en html

dice que sin usar JAVA pero esta usando JADE que es practicamente lo mismo en cierto mode, aquellos que no puedan configurar jada en Atom van a quedar igual de perdidos

hola primero que nada paso a saludarlo y agradecer por tu vidros son buenisimos y he realizado algunos proyectos gracias a tus tutoriales pero enfocandonis en el tema de css he visto que hay efectos y complementos css para web y mi pregunta es la siguiente. si yo quiero diseñar e incrustar un elemento en css. como lo puedo agregar a un sitio o de que manera. he intentado hasta con html pero nada. espero que me puedas orientar este mundo css. saludos!