Luces de estudio

2,090 AmirAliAkrami

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

29 August 2025

Ejemplo de contenedor de animación CSS

13 February 2026

Ventilador animado CSS: Activar/desactivar, controlar velocidad

5 May 2025

Calculadora de impuestos de Robux HTML CSS

HTML

CSS

/* Style the container */
.lamp-container {
  position: relative;
  width: 400px;
  height: 400px;

background-color: #192c3d;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.lamp-container:after {
  content: "";
  position: absolute;
  background-color: #3b312a;
  width: 350px;
  height: 13px;
  top: 300px;
  left: 25px;
}

.lamp-container:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 100px;
  background-color: #2f425a;
  top: 300px;
  left: 40px;
  box-shadow:
    5px 0 #1c364d,
    20px 0 #2f425a,
    25px 0 #1c364d,
    290px 0 #1c364d,
    295px 0 #2f425a,
    310px 0 #1c364d,
    315px 0 #2f425a;
}

/* Style the window, computer, coffee and the picture   */
.computer {
  position: absolute;
  border: 8px solid #535460;
  width: 120px;
  height: 70px;
  background-color: #5b6580;
  top: 187px;
  left: 150px;
}

.computer:before {
  content: "";
  position: absolute;
  background-color: #42434f;
  width: 30px;
  height: 30px;
  top: 78px;
  left: 45px;
}

.computer:after {
  content: "";
  position: absolute;
  background-color: #31323b;
  width: 100px;
  height: 7px;
  top: 98px;
  left: 10px;
}

.window {
  position: absolute;
  width: 200px;
  height: 250px;
  border: 10px solid #243e54;
  background-color: #376ea3;
  left: 180px;
}

.window:before {
  content: "";
  position: absolute;
  height: 250px;
  width: 10px;
  background-color: #243e54;
  left: 95px;
}

.window:after {
  content: "";
  position: absolute;
  background-color: #335266;
  width: 220px;
  height: 10px;
  left: -10px;
  border-radius: 0 0 20px 20px;
  box-shadow:
    0 15px #335266,
    0 30px #335266,
    0 45px #335266,
    0 60px #335266,
    0 75px #335266,
    0 90px #335266,
    0 105px #335266,
    0 120px #335266,
    0 135px #335266,
    0 150px #335266,
    0 165px #335266,
    0 180px #335266,
    0 195px #335266,
    0 210px #335266,
    0 225px #335266,
    0 240px #335266;
}

.picture {
  position: absolute;
  width: 100px;
  height: 70px;
  border: 5px solid #2f4f67;
  background-color: #8b8c8e;
  left: 25px;
  top: 80px;
  overflow: hidden;
}

.picture:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background-color: #fff084;
  left: 15px;
  top: 7px;
}

.picture:after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #3e4758;
  top: 30px;
  box-shadow:
    45px 20px #606c82,
    40px 10px #3e4758,
    80px 20px #3e4758,
    60px -10px #606c82;
}

.screen {
  position: absolute;
  width: 120px;
  height: 70px;
  overflow: hidden;
  top: 195px;
  left: 158px;
}

.screen:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 20px;
  opacity: 0.3;
  background-color: #0e212f;
  top: 10px;
  left: 15px;
  box-shadow:
    0 30px #0e212f,
    50px 0 #0e212f,
    50px 20px #0e212f,
    50px 30px #0e212f;
}

.screen:after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.2);
  width: 150px;
  height: 150px;
  transform: skew(60deg);
  left: 65px;
  top: -38px;
}

.coffee {
  position: absolute;
  width: 40px;
  height: 30px;
  background-color: white;
  border-radius: 0 0 20px 20px;
  top: 270px;
  left: 295px;
}

.coffee:before {
  content: "";
  position: absolute;
  background-color: #d16d72;
  width: 60px;
  height: 5px;
  border-radius: 0 0 30px 30px;
  top: 25px;
  left: -10px;
}

.coffee:after {
  content: "";
  position: absolute;
  border: 4px solid white;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 32px;
  top: 2px;
}

/* Style the lamp */
.lamp-base {
  position: absolute;
  width: 70px;
  height: 7px;
  background-color: #0e8488;
  top: 292px;
  left: 50px;
  z-index: 2;
}

.lamp-base:before {
  content: "";
  position: absolute;
  width: 60px;
  height: 10px;
  background-color: #0b9496;
  border-radius: 10px 10px 0 0;
  top: -10px;
  left: 5px;
}

.tube {
  background-color: #979dac;
  position: absolute;
  width: 5px;
  height: 100px;
  top: 190px;
  left: 50px;
  transform: rotate(-20deg);
  z-index: 1;
  box-shadow: 10px 0 #7e8491;
}

.tube:before {
  content: "";
  position: absolute;
  background-color: #979dac;
  width: 5px;
  height: 100px;
  transform: rotate(80deg);
  top: -70px;
  left: 60px;
  box-shadow: 10px 0 #7e8491;
}

.tube:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: #1b7776;
  border: 3px solid #175961;
  outline: 3px solid #1b7776;
  top: -13px;
  left: 0;
}

.lamp-shade {
  position: absolute;
  background-color: #0f2230;
  width: 30px;
  height: 30px;
  border-radius: 30px 30px 0 0;
  top: 110px;
  left: 125px;
  z-index: 3;
  transform: rotate(-25deg);
}

.lamp-shade:before {
  content: "";
  position: absolute;
  border-radius: 50px 50px 0 0;
  background-color: #089697;
  width: 70px;
  height: 30px;
  top: 28px;
  left: -20px;
  transform: rotate(5deg);
}

.light {
  border-radius: 50%;
  position: absolute;
  background-color: #fff07c;
  width: 30px;
  height: 30px;
  top: 145px;
  left: 140px;
}

.light:before {
  content: "";
  position: absolute;
  width: 45px;
  height: 0;
  border-bottom: 150px solid rgba(255, 240, 124, 0.3);
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  transition: 0.3s;
  top: 10px;
  left: -3px;
  transform: skew(20deg);
  opacity: 0;
}

.light:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 7px;
  background-color: #1e5b63;
  top: 130px;
  left: -47px;
  border-radius: 5px 5px 0 0;
  transition: 0.2s;
  transform-origin: bottom;
  cursor: pointer;
}

/* Use the input checkbox to on/off the light */
.ps#light {
  display: none;
}

#light:checked + .light:after {
  transform: scaleY(0.5);
}

#light:checked + .light:before {
  opacity: 1;
}