Shadow in text because flat design is not mandatory

28 May 2014

We can use inset in the box-shadow property, but not in text-shadow. So we can trick this by using this following style (sass-flavor).

$bgcolor: sameasbackgroundcolor
.text
  color: rgba(#b5bc67, 0.8)
  text-shadow: 1px 3px 3px $bgcolor, 0 0 0 #000, 1px 3px 3px $bgcolor
  &::selection
    background: #5af
    text-shadow: none
    color: #fff

The first and last 1px 3px 3px $bgcolor control the shadow range, and I add a selection style to avoid it looks weird when select this text.

Live demo:

See the Pen mHwfL by Oliver - Frontend Developer (@Oliverl) on CodePen.