Lampara Interactiva con CSS
Como usar CSS para crear formas y funciones
Empezar
En esta unidad, los alumnos aprenderán a trabajar en Codepen
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir a CodePen
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
Hoy vamos a crear una lámpara interactiva sin javascript. Sí, has oído bien, le daremos interactividad a la lámpara usando CSS puro. ¿En el evento de clic en CSS? Suena complicado, ¿verdad? Pero con este tutorial, le mostraré una de las pocas formas en que puede agregar un evento de clic usando solo CSS.
Puedes probarla aqui
10
Abrir el proyecto en Codepen.
Deberia verse asi
10
Vamos a CSS y comenzemos a construir el CUERPO
NO ESCRIBAS LOS COMENTARIOS, NO HACEN FALTA.
10
Crea un contenedor que centra el diseño en la pantalla utilizando el método de transformación (translate(-50%, -50%)) y estableciendo left: 50% y top: 50% para que el contenedor esté centrado vertical y horizontalmente.
10
Define la parte superior de la lámpara. Utiliza bordes para crear la forma triangular de la pantalla de la lámpara. border-bottom crea la parte triangular de la pantalla y border-right y border-left crean los lados.
10
Crea el soporte de la lámpara. Un elemento rectangular blanco se posiciona en la parte inferior de la pantalla (top: 150px), dando la apariencia de un soporte de lámpara.
10
Agrega la base de la lámpara. Un elemento rectangular azul se coloca debajo del soporte (top: 230px) y tiene esquinas redondeadas en la parte superior para crear la apariencia de una base.
10
input[type="checkbox"]: Selecciona el checkbox oculto real. appearance: none; y -webkit-appearance: none; se utilizan para ocultar el diseño predeterminado del checkbox en navegadores webkit.
10
Lampara Interactiva con CSS
Erica De Pacheco
Created on September 19, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Big Data: The Data That Drives the World
View
Mind Map: The 4 Pillars of Success
View
Momentum: Employee Introduction Presentation
View
Momentum: First Operational Steps
View
Video: Responsible Use of Social Media and Internet
View
Microlearning: Enhance Your Wellness and Reduce Stress
View
Momentum: Tools Tutorial
Explore all templates
Transcript
Lampara Interactiva con CSS
Como usar CSS para crear formas y funciones
Empezar
En esta unidad, los alumnos aprenderán a trabajar en Codepen
10
¿Listo para comenzar? ¡Haz clic en el enlace al editor y sorprendete!
Ir a CodePen
Importante: Nunca olvides de guardar tu proyecto en la medida que vas avanzando.
10
Hoy vamos a crear una lámpara interactiva sin javascript. Sí, has oído bien, le daremos interactividad a la lámpara usando CSS puro. ¿En el evento de clic en CSS? Suena complicado, ¿verdad? Pero con este tutorial, le mostraré una de las pocas formas en que puede agregar un evento de clic usando solo CSS.
Puedes probarla aqui
10
Abrir el proyecto en Codepen.
Deberia verse asi
10
Vamos a CSS y comenzemos a construir el CUERPO
NO ESCRIBAS LOS COMENTARIOS, NO HACEN FALTA.
10
Crea un contenedor que centra el diseño en la pantalla utilizando el método de transformación (translate(-50%, -50%)) y estableciendo left: 50% y top: 50% para que el contenedor esté centrado vertical y horizontalmente.
10
Define la parte superior de la lámpara. Utiliza bordes para crear la forma triangular de la pantalla de la lámpara. border-bottom crea la parte triangular de la pantalla y border-right y border-left crean los lados.
10
Crea el soporte de la lámpara. Un elemento rectangular blanco se posiciona en la parte inferior de la pantalla (top: 150px), dando la apariencia de un soporte de lámpara.
10
Agrega la base de la lámpara. Un elemento rectangular azul se coloca debajo del soporte (top: 230px) y tiene esquinas redondeadas en la parte superior para crear la apariencia de una base.
10
input[type="checkbox"]: Selecciona el checkbox oculto real. appearance: none; y -webkit-appearance: none; se utilizan para ocultar el diseño predeterminado del checkbox en navegadores webkit.
10