<!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');
});
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Google Font API
jQuery
v2.1.3
