Сегодняшний пост будет о создании эффекта градиентного текста с помощью CSS:

CSS градиент текста

Вот такой градиент можно реализовать у текста с помощью CSS

У этого метода есть масса плюсов – не требуется использование JavaScript, количество кода минимально, эффект красив и кроссбраузерен.

Итак, если вам интересно – добро пожаловать под кат!

Для начала нам понадобятся две PNG картинки с градиентом, например вот такие:

Картинки для создания эффекта градиента с помощью CSS

Назовите первый (мягкий) градиент «gradient_1″, а второй (резкий) – «gradient_2″. Картинки должны быть размером 6х50 пикселей (ширина и высота соответственно).

Теперь нам понадобится вот такой CSS код:

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

Если вы все сделали правильно, то получите такой же эффект, как и на вышеприведенной картинке:

Dev-4-web.ru

Самый лучший блог

WEB 2.0 CSS градиент текста

Похожие статьи

coded by nessus