→   Заголовки с помощью CSS3

С помощью html5 и CSS3 используя всякие простые свойства типа text-shadow можно создавать вот такие шикарные заголовки:

Рабочий пример, советую открывать в браузерах работающих на webkit (Chrome, Safari) там и плавная замена цвета при ховере будет наблюдаться.

  1. <html> 
  2. <head> 
  3.     <title>Крутая типографика )</title> 
  4.     <style> 
  5.     body { 
  6.         background: #2d2d2d; 
  7.         padding: 1.2em; 
  8.     } 
  9.  
  10.     h1 { 
  11.         position: relative; 
  12.         font-size: 7em; 
  13.         margin-top: 0; 
  14.         font-family: 'Myriad-Pro', 'Myriad', helvetica, sans-serif; 
  15.         text-shadow: 2px 3px 3px #292929; 
  16.         letter-spacing: -6px;
  17.         -webkit-text-stroke: 1px white; 
  18.  
  19.     } 
  20.  
  21.     h1 a { 
  22.         text-decoration: none; 
  23.         color: #ffffff; 
  24.         position: absolute; 
  25.         -webkit-mask-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1))); 
  26.         text-shadow: 0 2px 0 #e9e9e9; 
  27.         -webkit-transition: all .3s; 
  28.         -moz-transition: all .3s; 
  29.         transition: all .3s; 
  30.     } 
  31.  
  32.     h1 a:hover { 
  33.         color: #0cf; 
  34.     } 
  35.  
  36.     h1:after { 
  37.         color: #dbdbdb; 
  38.         content : attr(data-title); 
  39.     } 
  40.  
  41.     </style> 
  42. </head> 
  43. <body> 
  44.      <h1 data-title="Hello yeap"> <a href="#"> Hello yeap</a> </h1> 
  45. </body> 
  46. </html>