LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

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

Description

A simple light bulb using CSS. Uses some basic radial and linear gradient and drop shadows.
Term
Wed, 11/29/2017 - 14:04

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv