Page Widget How to - Create CSS3 inset text-shadow








Question

We would like to know how to create CSS3 inset text-shadow.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.inset-text {<!--   w  ww  .ja v  a2s  .  c om-->
  color: rgba(10, 60, 150, 0.8);
  text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
::-moz-selection {
  background: #5af;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #5af;
  color: #fff;
  text-shadow: none;
}
</style>
</head>
<body>
  <h1 class="inset-text">java2s.com</h1>
</body>
</html>

The code above is rendered as follows: