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
Essential Business Proposal
View
Project Roadmap Timeline
View
Step-by-Step Timeline: How to Develop an Idea
View
Artificial Intelligence History Timeline
View
Momentum: Onboarding Escape Game
View
Momentum: Manager Guide
View
Wizardry Letter
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