Lightbulb

HTML
<div id="wrapper"> <div id="bulb"> <div id="bulb-top"></div> <div id="bulb-middle"></div> <div id="bulb-bottom"></div> </div> <div id="bulb-base"> <div id="bulb-base-top"></div> <div id="bulb-base-middle"> <div class="rivet rivet-short"></div> <div class="rivet rivet-long"></div> <div class="rivet rivet-short"></div> <div class="rivet rivet-long"></div> <div class="rivet rivet-short"></div> </div> <div id="bulb-base-bottom"></div> </div> </div>
CSS
body { overflow: hidden; padding: 0; } #wrapper { color: #FFCC02; position: absolute; left: calc(50% - 20vmin); top: calc(50% - 26vmin); height: 52vmin; width: 40vmin; } #bulb { position: relative; width: inherit; height: inherit; -webkit-transition: color 400ms linear; transition: color 400ms linear; -webkit-filter: drop-shadow(0 0 20px currentColor); filter: drop-shadow(0 0 20px currentColor); z-index: 1; } #bulb-top { border-radius: 50%; background: -webkit-radial-gradient(20vmin 20vmin circle, #ffff00 0%, currentColor 40%, currentColor 80%, rgba(0, 0, 0, 0) 100%); background: radial-gradient(circle at 20vmin 20vmin, #ffff00 0%, currentColor 40%, currentColor 80%, rgba(0, 0, 0, 0) 100%); width: 40vmin; height: 40vmin; } #bulb-middle { border-top: 20vmin solid currentColor; border-left: 10vmin solid transparent; border-right: 10vmin solid transparent; position: absolute; height: 0; bottom: 2px; width: 12.12121vmin; left: calc(50% - 40vmin/2.5); } #bulb-bottom { background-color: currentColor; border-radius: 50%; position: absolute; height: 13.33333vmin; width: 20vmin; left: calc(50% - 40vmin/4); bottom: 0; } #bulb-base { color: #999; position: absolute; height: 13.33333vmin; width: 40vmin; bottom: -10.81081vmin; z-index: 2; } #bulb-base-top { background: -webkit-linear-gradient(top, #bbb 20%, #555 100%); background: linear-gradient(to bottom, #bbb 20%, #555 100%); border-radius: 0 0 3px 3px; position: relative; height: 2.5vmin; width: 16vmin; left: calc(50% - 40vmin/5); } .rivet { position: relative; } .rivet-short { background-color: #666666; border-top: 3px solid #333333; height: 0.83333vmin; width: 13.33333vmin; left: calc(50% - 40vmin/6); } .rivet-long { background: -webkit-linear-gradient(top, #aaa 20%, #555 100%); background: linear-gradient(to bottom, #aaa 20%, #555 100%); border-radius: 3px; height: 1.25vmin; width: 16vmin; left: calc(50% - 40vmin/5); } #bulb-base-bottom { border-top: 5vmin solid #999; border-left: 5.71429vmin solid transparent; border-right: 5.71429vmin solid transparent; position: relative; width: 5vmin; left: calc(50% - 40vmin/5); }
JAVASCRIPT
Expand for more options Login