Page Widget How to - Create text effect with CSS3 text-shadow with the :before and :after pseudo-elements

Question

We would like to know how to create text effect with CSS3 text-shadow with the :before and :after pseudo-elements.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html, body {<!--from  ww  w .ja  v a 2 s  .  co m-->
  margin: 0;
  height: 100%;

  background: -moz-linear-gradient(top, #4293d6 0%, #001e96 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4293d6),
    color-stop(100%, #001e96));
  background: -webkit-linear-gradient(top, #4293d6 0%, #001e96 100%);
  background: -o-linear-gradient(top, #4293d6 0%, #001e96 100%);
  background: -ms-linear-gradient(top, #4293d6 0%, #001e96 100%);
  background: linear-gradient(top, #4293d6 0%, #001e96 100%);
}

.depth {
  display: block;
  color: black;
  font: bold 7em Arial, sans-serif;
  position: relative;
}

.depth:before, .depth:after {
  content: attr(title);
  color: rgba(255, 255, 255, .1);
  position: absolute;
}

.depth:before {
  top: 1px;
  left: 1px;
}

.depth:after {
  top: 2px;
  left: 2px;
}
</style>
</head>
<body>
  <a class="depth" title="Lorem ipsum">Lorem ipsum</a>
</body>
</html>

The code above is rendered as follows: