Веб-мастеру uCoz

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Веб-мастеру uCoz » HTML и CSS » Практика: CSS градиент текста


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

Сообщений 1 страница 8 из 8

1

Хотите узнать, как делать красивый текст с эффектом градиента без применения Photoshop? Этот простой способ с использованием CSS позволяет создавать текст с эффектом градиента. Используется картинка в формате PNG (чистый CSS, никаких Javascript или Flash). Все, что нужно - это пустой тег <span> и фоновая картинка с CSS параметром position:absolute. Этот способ работает со следующими браузерами: Firefox, Safari, Opera и Internet Explorer 6.

Пример градиентного эффекта текста с помощью CSS:
http://freemanager.ucoz.com/_ph/2/2/584601231.jpg
http://freemanager.ucoz.com/_ph/2/2/251702234.gif
http://freemanager.ucoz.com/_ph/2/2/736500791.gif
Смотреть демо
Скачать демо (zip, 51 Kb)

Преимущества:

1. Используется только CSS, без Javascript или Flash. Работает во всех браузерах, включая IE6 (далее описан необходимый код для PNG).

2. Этот способ прекрасно подходит для дизайна заголовков. Вам не нужно каждый раз обрабатывать каждое изображение в Photoshop, что существенно экономит время.

3. Вы можете использовать все стандартные шрифты. При этом посетители смогут уменьшать или увеличивать размер текста по своему вкусу.

Как это сделать?

Этот эффект сделать очень просто. Попросту говоря, мы просто поместим в формате PNG с градиентом (с альфа прозрачностью) над текстом.

http://freemanager.ucoz.com/_ph/2/2/441196474.gif

HTML код:

<h1><span></span>CSS Gradient Text</h1>

СSS код:

Весь секрет в этом:
h1 { position: relative }

h1 span { position: absolute }

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;
}

Вот и все!

Так как Internet Explorer 6 некорректно отображает PNG-24, нам нужно вставить специальный код для нормального отображения прозрачных картинок PNG в этом браузере (поместите его в любом месте между тегами <head>):

Код:
<!--[if lt IE 7]>

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

<![endif]-->

Вариант для любителей стандартов:

Если вы хотите добиться строгого соответствия веб-стандартам, используйте метод jQuery:

Код:
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");

});
</script>

Желаю удачи!

Автор:Nick La
Перевод:Глобатор
Источник:http://shakin.ru

0

2

если чесно) то ничерта не понял что для чего и как им пользоватся...  http://www.kolobok.us/smiles/icq/crazy.gif

0

3

xdemonx, для этого то и есть демо, его посмотришь, захочется также - сделаешь, эт так всегда http://www.kolobok.us/smiles/icq/biggrin.gif

0

4

не оч понял =)

0

5

JIaBeJIaC, здесь описано как сделать красиво написанную  надпись

0

6

Bastel, эт понятно http://www.kolobok.us/smiles/icq/i_am_so_happy.gif

0

7

Не очень понятно, но спс

0

8

А я качаю готовые шаблоны http://ucoz.usertalk.ru/uploads/0007/af/57/16417-2.gif

0


Вы здесь » Веб-мастеру uCoz » HTML и CSS » Практика: CSS градиент текста