Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 3. Создание градиентного текста
Не нравится(-) 50 Нравится(+)
Урок CSS 3. Создание градиентного текста

В этом уроке я расскажду Вам о том, как при помощи CSS создать текст с фоновым градиентом.
Итак, приступим...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):

h1 {
  font: bold 330%/100%;
  font-size: 30px;
  position: relative;
}

h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 30px;
}

Для создания открывающих и закрывающих кавычек нам понадобятся 1 рисунок - градиент.
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link href="style.css" rel="stylesheet" type=text/css>
</head>
<body>
<h1><span></span>ГРАДИЕНТНЫЙ ТЕКСТ</h1>
</body>
</html>


4) Сохраняем и смотрим, что получилось.

Пояснения к коду:
width: 100%; - Задание ширины поля
position: absolute;
position: relative; - задание положение градиентного блока и текста.

В этом методе создания градиентного текста есть ряд недостатков. Главным по моему мнению является тот - что это не работает в IE6. Поправим:
Добавьте между тегами head такой код:
<!--[if lt IE 6]>

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

<![endif]-->

Вторым недостатком является то, что этот метод сильно завистит от цвета фона и текста. Это придётся каждый раз учитывать при создании.

Идея: Web Designer Wall
Модернизация и перевод: Российская школа CSS

---------------------------------------
Правила копирования материалов урока
Демо
Скачать (zip, 14 Kb)
Дополнительные материалы по уроку


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 17571 раз(а) и написали 7 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

Лазерная эпиляция Одесса стоимость

«    Август 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!