Градиентный текст на CSS

Градиентный текст на CSS
0 votes, 0.00 avg. rating (0% score)

Интересная техника по созданию градиентного текста. Суть в перекрытии текста прозрачным png. В заголовок h1 вставляется span, которому прописывается бекграунд.

screen1

Например вот так:
grad

Все примеры можно глянуть тут

Сам код:

<h1><span></span>CSS Gradient Text</h1>
h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

Сам оригинал

Градиентный текст на CSS
0 votes, 0.00 avg. rating (0% score)

8 Comments

  • во балин, идея классная, теперь с такими простыми png можно и дальше развивать интересные фишки. спасибо

  • Можно, только ослик шестой их не видит.

  • А если ослику 6му подключить JS-скрипт pngfix.js — поможет или нет?

  • О, сейчас себе поставлю

    а в IE 6 работает если в head запихать
    <code>
    <!--[if lt IE 7]>

    <style>
    h1 span {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
    }
    </style></code>

    <![endif]-->

  • ааа, тег <code> не работает
    вот это короче вставить

    <!--[if lt IE 7]>

    <style>
    h1 span {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
    }
    </style>

    <![endif]-->

  • Кроме как в ие этот фильтр больше нигде не работает

  • Есть один минус у метода. Работает только на белом фоне. На фоне другого цвета градиент выглядит как белая полоса ((

  • Спасибо, интересный способ украсить заголовок, но мне больше text-shadow нравится, да и проще.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

css.php