Posted By

stayce on 04/08/10

Tagged

css
text

Versions (?)

Last Edited at 04/08/10 12:15pm

Statistics

Viewed 668 times

Favorited by 0 user(s)

Related snippets

Gradient 2.0 text

/ Published in: CSS

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

1. <style>  
   2. body {  
   3.     margin:0;  
   4.     padding:2em 4em;  
   5.     background:#fff;  
   6.     font:90% Arial, Helvetica, sans-serif;  
   7.     color:#555;  
   8.     line-height:180%;  
   9. }  
  10. h1 {  
  11.     font-size:300%;  
  12.     line-height:1em;  
  13.     color:#8bb544;  
  14.     font-weight:bold;  
  15.     text-transform:uppercase;  
  16.     letter-spacing:-.05em;  
  17.     position:relative;    
  18. }  
  19. h2 {  
  20.     font-size:260%;  
  21.     color:#0079b6;  
  22.     font-weight:bold;  
  23.     letter-spacing:-.05em;  
  24.     position:relative;  
  25.     margin:.6em 0;  
  26.     padding-top:1px; /* use top padding to adjust the start of the gradient  */  
  27.     width:100%;  
  28. }  
  29. h3 {  
  30.     font-size:240%;  
  31.     color:#7365a0;  
  32.     font-weight:bold;  
  33.     text-transform:uppercase;  
  34.     letter-spacing:-.05em;  
  35.     padding-top:3px;  
  36.     position:relative;  
  37.     margin:.6em 0;  
  38.     width:100%;  
  39. }  
  40. h4 {  
  41.     font-size:220%;  
  42.     color:#dc5b24;  
  43.     font-weight:normal;  
  44.     letter-spacing:-.05em;  
  45.     position:relative;  
  46.     margin:.6em 0;  
  47.     padding-top:1px;  
  48.     width:100%;  
  49. }  
  50.   
  51. h1 span, h2 span, h3 span, h4 span{  
  52.     position:absolute;  
  53.     display:block;  
  54.     top:0;  
  55.     left:0;  
  56.     height:100%;  
  57.     width:100%;  
  58.     background:url(gradient_1.png) repeat-x;  
  59. }  
  60. h1 span, h3 span{background:url(gradient_2.png) repeat-x;}  
  61. * html h1 span, * html h3 span{  
  62.     background-color:#fff;  
  63.     back\ground-color:transparent;  
  64.     background-image: url(none.gif);  
  65.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_2.png", sizingMethod="scale");  
  66. }  
  67. * html h2 span, * html h4 span{  
  68.     background-color:#fff;  
  69.     back\ground-color:transparent;  
  70.     background-image: url(none.gif);  
  71.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient_1.png", sizingMethod="scale");  
  72. }  
  73. </style >