Engraved Text

by sundaramkumar

HTML

<div class="demo">
    <div class="demo1">
  Engraved Text
  </div>
    <p>Darker Text on Dark background</p>
  <div class="demo2">
  Engraved Text
  </div>
  <p>Dark Text on Lighter background</p>
  <div class="demo3">
  Engraved Text 
  </div>
  <p>Middle-tone colors with 1 shadow</p>
  <div class="demo4">
  Engraved Text 
  </div>
  <p>Middle-tone colors with 2 shadows for a sharper effect</p>

</div>

CSS

p { 
    margin: 5px 30px 15px;
    font-family:"Century Gothic", "HelveticaNeueLT Pro 45 Lt", sans-serif;  
}
.demo div { 
    width: 400px;
    height: 65px;
    line-height: 60px;
    font-family: "Century Gothic", "Helvetica", sans-serif;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    margin-left: 30px; 
}
/* Darker text on medium background */
.demo1 { 
    color: #333;
    background-color: #666;
    text-shadow: 0px 1px 0px rgba(255,255,255,.5); /* 50% white from bottom */
}

/* Medium text on lighter background */
.demo2 { 
    color: #666;
    background-color: #aaa;
    text-shadow: 0px -1px 0px rgba(0,0,0,.5); /* 50% black coming from the top */
}

/* Middle-tone colors with 1 shadow */
.demo3 { 
    color: #3B5957;
    background-color: #5D8D89;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, .5);
}

/* Middle-tone colors with 2 shadows */
.demo4 { 
    color: #3B5957;
    background-color: #5D8D89;
    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
}