Using box-shadow css property



In this tutorial I will show you some of the box-shadow css property uses.

Top
Right
Bottom
Left
.shadow.top {
  box-shadow: 0 -10px 10px 0px rgba(0,0,0,0.4);
}

.shadow.right {
  box-shadow: 10px 0 10px 0px rgba(0,0,0,0.4);
}

.shadow.bottom {
  box-shadow: 0 10px 10px 0px rgba(0,0,0,0.4);
}

.shadow.left {
  box-shadow: -10px 0 10px 0px rgba(0,0,0,0.4);
}

Dark
Light
Inset
Border
.shadow-dark {
  box-shadow: 0 0 10px 10px rgba(0,0,0,.35);
}

.shadow-light {
  box-shadow: 0 0 0 10px rgba(200,200,200,.25);
}

.shadow-inset {
  box-shadow: inset 0 0 7px 4px rgba(255,255,255,.5);
}

.shadow-borderlight {
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.5);
}

Light
Heavy
.emboss-light {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.emboss-heavy {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 
    inset 0 2px 3px rgba(255,255,255,0.3),
    inset 0 -2px 3px rgba(0,0,0,0.3),
    0 1px 1px rgba(255,255,255,0.9);
}

admin