Forked from Hornebom's Pen lamp.
A Pen by Captain Anonymous on CodePen.
-
-
Save zero-t4/af1787781893565276a7 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="lamp"> | |
| <input type="radio" name="switch" value="on" /> | |
| <input type="radio" name="switch" value="off" checked="checked"/> | |
| <label for="switch" class="entypo-lamp"></label> | |
| <div class="lamp"> | |
| <div class="gonna-give-light"></div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://weloveiconfonts.com/api/?family=entypo); | |
| *, *:before, *:after { | |
| margin:0; | |
| padding:0; | |
| -webkit-box-sizing:border-box; | |
| -moz-box-sizing:border-box; | |
| box-sizing:border-box; | |
| } | |
| #lamp { | |
| position:relative; | |
| width:100vw; | |
| height:100vh; | |
| overflow:hidden; | |
| } | |
| input[name="switch"], input[name="switch"] + label { | |
| position:absolute; | |
| bottom:3rem; | |
| width:4rem; | |
| height:4rem; | |
| } | |
| input[name="switch"] + label {right:3rem;} | |
| input[name="switch"] { | |
| opacity:0; | |
| z-index:9; | |
| cursor:pointer; | |
| } | |
| input[value="on"] { | |
| right:3rem; | |
| } | |
| input[value="off"] { | |
| right:-4rem; | |
| } | |
| input[name="switch"] + label { | |
| text-align:center; | |
| } | |
| [class*="entypo-"]:before { | |
| line-height:4rem; | |
| font-size:2.5rem; | |
| color:rgba(255,255,255,0.4); | |
| font-family:'entypo', sans-serif; | |
| } | |
| input[value="on"]:checked { | |
| right:-4rem; | |
| } | |
| input[value="on"]:checked + input[value="off"] { | |
| right:3rem; | |
| } | |
| .lamp { | |
| position:relative; | |
| margin:0 auto; | |
| width:.7rem; | |
| height:10rem; | |
| background-image:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), | |
| linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), | |
| linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)); | |
| background-repeat:no-repeat; | |
| background-size:.15rem 8rem, .4rem .8rem, .7rem 2rem; | |
| background-position:50% 0, .19rem 8rem, 0 8.8rem; | |
| } | |
| .lamp:before, .lamp:after { | |
| content:''; | |
| position:absolute; | |
| } | |
| .lamp:before { | |
| left:-1.65rem; | |
| bottom:-4rem; | |
| width:4rem; | |
| height:4rem; | |
| border-radius:50%; | |
| background:rgba(255,255,255,0.03); | |
| box-shadow:inset 2px -2px 10px rgba(255,255,255,0.07); | |
| transition:all .15s; | |
| } | |
| .gonna-give-light, | |
| .gonna-give-light:before{ | |
| position:absolute; | |
| } | |
| .gonna-give-light { | |
| top:10.05rem; | |
| left:.25rem; | |
| width:0; | |
| height:1.5rem; | |
| border-right:.2rem solid rgba(255,255,255,0.05); | |
| } | |
| .gonna-give-light:before { | |
| content:''; | |
| top:1.5rem; | |
| left:-.35rem; | |
| width:.9rem; | |
| height:.9rem; | |
| border-radius:50%; | |
| border:.2rem solid rgba(255,255,255,0.05); | |
| box-shadow:0px 0px 50px rgba(255,255,255,0); | |
| } | |
| input[value="on"]:checked ~ .lamp:before { | |
| background:rgba(255,255,255,1); | |
| box-shadow:0px 2px 10px rgba(255,255,255,0.8), | |
| 0px 5px 50px rgba(255,255,255,0.8), | |
| 0px 8px 80px rgba(255,255,255,0.6), | |
| 0px 8px 120px rgba(255,255,255,0.6); | |
| } | |
| body {background:#2f323c;} | |
| html, body { | |
| width:100%; | |
| height:100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment