Gradient 2.0 text


/ Published in: CSS
Save to your folder(s)



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

URL: http://www.code-sucks.com/code/css/creating-web-20-ext-with-minimal-images.php

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.