Webleb - HTML UI Elements - Arbeitszimmerleuchten

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;
}

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS