Linux, кодинг, митолл и прочая хрень :)

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

Интересная техника по созданию градиентного текста. Суть в перекрытии текста прозрачным 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;
}

Сам оригинал

0.00 avg. rating (0% score) - 0 votes
Твитнуть

8 комментариев

  • во балин, идея классная, теперь с такими простыми 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]-->

    • By melksoft

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

    <!--[if lt IE 7]>

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

    <![endif]-->

    • By melksoft

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

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

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

css.php