Градиентный текст на 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;
}

Сам оригинал

Возможно, это будет интересно...

Web

, ,

Май 28th, 2009

8 responses

8 responses


Do you want to comment?

Comments RSS and TrackBack Identifier URI ?

белый маг Гвест

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

Июнь 2, 2009 12:19 пп

Alex Volkov

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

Июнь 2, 2009 12:34 пп

Александр

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

Июнь 2, 2009 2:20 пп

melksoft

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

а в 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]-->

Июнь 4, 2009 4:03 пп

melksoft

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

<!--[if lt IE 7]>

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

<![endif]-->

Июнь 4, 2009 4:04 пп

Alex Volkov

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

Июнь 4, 2009 5:00 пп

Гитарист

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

Июнь 8, 2009 5:57 пп

Ассасин

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

Сентябрь 26, 2009 4:16 пп

Comment now!
















Trackbacks