CSS Anglepoise lamp with light switch

In this example below you will see how to do a CSS Anglepoise lamp with light switch with some HTML / CSS and Javascript

Rebuilding an Anglepoise lamp (based on this - http://www.made.com/brooklyn-giant-floor-lamp-black) using CSS transformations.

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Anglepoise lamp with light switch</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lora:400,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>CSS Anglepoise lamp with light switch</h1>
<p>Rebuilding <a href="http://www.made.com/brooklyn-giant-floor-lamp-black" target="_blank">this</a> lamp using CSS transformations</p>
<p>
  <a href="#" class="button switch on">Light Switch</a>
</p>

<div class="lamp">
  <div class="head">
    <div class="top"></div>
    <div class="cone"></div>
    <div class="circle on"></div>
    <div class="joint"></div>
  </div>
  <div class="arms">
    <div class="top"></div>
    <div class="joint"></div>
    <div class="bottom"></div>
  </div>
  <div class="base">
    <div class="joint"></div>
    <div class="stand"></div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/css-anglepoise-lamp-with-light-switch-azAwb */
body {
  background: #eaeaea;
  font-family: 'Lora', serif;
  min-width: 715px;
  padding: 20px 0 0 0;
  margin: 0;
}

h1, p {
  text-align: center;
}

a {
  color: #E56C00;
}

.button {
  padding: 4px 10px;
  background: #333333;
  color: #FFF;
  text-decoration: none;
  display: inline-block;
  margin: 10px 0;
}

a.switch.on {
  background: #E56C00;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}

div.lamp {
  position: relative;
  margin: 0 auto;
  padding: 200px 0 0 0;
  min-width: 715px;
  width: 100%;
  overflow: hidden;
}
div.lamp div.head {
  position: absolute;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 40px;
  left: 320px;
}
div.lamp div.head div.top {
  background-color: #000;
  width: 50px;
  height: 60px;
  -webkit-transform: perspective(3px) rotateX(181deg);
          transform: perspective(3px) rotateX(181deg);
  position: absolute;
  top: 0;
  left: 34px;
}
div.lamp div.head div.cone {
  background-color: #000;
  width: 120px;
  height: 80px;
  -webkit-transform: perspective(1px) rotateX(181deg) scale(0.8);
          transform: perspective(1px) rotateX(181deg) scale(0.8);
  position: absolute;
  top: 50px;
  left: 0;
}
div.lamp div.head div.circle {
  height: 100px;
  width: 218px;
  background: #FFF;
  border-radius: 50%;
  -webkit-transform: scaleY(0.3) translateX(-50px) translateY(381px);
          transform: scaleY(0.3) translateX(-50px) translateY(381px);
  border: 1px solid #000;
  position: relative;
}
div.lamp div.head div.circle.on:after {
  content: ' ';
  display: block;
  width: 200px;
  height: 600px;
  background: rgba(245, 244, 141, 0.9);
  -webkit-transform: perspective(5px) rotateX(181deg);
          transform: perspective(5px) rotateX(181deg);
  position: absolute;
  top: -150px;
  left: 10px;
}
div.lamp div.head div.joint {
  width: 10px;
  height: 50px;
  background: #000;
  -webkit-transform: translateX(5px) translateY(-100px) rotate(-90deg);
          transform: translateX(5px) translateY(-100px) rotate(-90deg);
}
div.lamp div.head div.joint:after {
  content: ' ';
  height: 10px;
  width: 40px;
  background: #000;
  display: block;
  -webkit-transform: translateX(-15px) translateY(-2px) rotate(-25deg);
          transform: translateX(-15px) translateY(-2px) rotate(-25deg);
}
div.lamp div.arms div.top {
  background: transparent;
  height: 260px;
  width: 24px;
  border-bottom: 8px solid #000;
  border-left: 8px solid #000;
  border-right: 8px solid #000;
  -webkit-transform: rotate(20deg) translateX(215px) translateY(-120px);
          transform: rotate(20deg) translateX(215px) translateY(-120px);
  z-index: 30;
  position: relative;
}
div.lamp div.arms div.top:after {
  content: ' ';
  display: block;
  background: #ccc;
  height: 160px;
  width: 10px;
  -webkit-transform: translateY(110px) translateX(8px) rotate(12deg);
          transform: translateY(110px) translateX(8px) rotate(12deg);
}
div.lamp div.arms div.joint {
  height: 8px;
  width: 26px;
  background: #000;
  -webkit-transform: rotate(92deg) translateY(-189px) translateX(-56px);
          transform: rotate(92deg) translateY(-189px) translateX(-56px);
  z-index: 10;
  position: relative;
}
div.lamp div.arms div.bottom {
  background: transparent;
  height: 260px;
  width: 24px;
  border-bottom: 8px solid #000;
  border-top: 8px solid #000;
  border-left: 8px solid #000;
  border-right: 8px solid #000;
  -webkit-transform: rotate(-20deg) translateX(250px) translateY(30px);
          transform: rotate(-20deg) translateX(250px) translateY(30px);
  z-index: 30;
  position: relative;
}
div.lamp div.arms div.bottom:after {
  content: ' ';
  display: block;
  background: #ccc;
  height: 160px;
  width: 10px;
  -webkit-transform: translateY(110px) translateX(8px) rotate(-12deg);
          transform: translateY(110px) translateX(8px) rotate(-12deg);
}
div.lamp div.base div.joint {
  width: 27px;
  height: 10px;
  border-right: 8px solid #000;
  border-bottom: 8px solid #000;
  -webkit-transform: translateX(294px) translateY(-75px);
          transform: translateX(294px) translateY(-75px);
}
div.lamp div.base div.joint:after {
  content: ' ';
  display: block;
  width: 10px;
  height: 20px;
  background: #000;
  -webkit-transform: translateX(14px) translateY(10px);
          transform: translateX(14px) translateY(10px);
}
div.lamp div.base div.stand {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #000;
  -webkit-transform: scaleY(0.3) translateX(212px) translateY(-450px);
          transform: scaleY(0.3) translateX(212px) translateY(-450px);
  box-shadow: 0 20px 0 0 #777;
}


/*Downloaded from https://www.codeseek.co/chrishutchinson/css-anglepoise-lamp-with-light-switch-azAwb */
$(document).ready(function(){
  $('a.switch').click(function(e){
    e.preventDefault();
    $(this).toggleClass('on');
    $('.lamp .head .circle').toggleClass('on');
  });
});

Comments