Помощь студентуСтатьиМои статьиCSS градиент
21 Августа 2018, Вторник
21:19
>>> Качественная веб-разработка <<<
21:19
Меню сайта
>Г Л А В Н А Я

>Ф А Й Л Ы

>С Т А Т Ь И

>Р Е Ф Е Р А Т Ы

>Ф О Р У М

>О Т З Ы В Ы

>Т Е С Т Ы

>F l a s h И Г Р Ы

>Ф О Т О Ш О П


Советуем...
Справочник по физике
Небольшой справочник по физике. Оригинально сделан, все понятно описывается.

Примеры решений задач по теории вероятностей
В этом документе собраны Задачи и их решения по теории вероятностей по основным темам.

Оптика, атомная физика - Савельев И.В.
Очень хороший учебник по физике, все подробно и понятно описывается, все темы по Оптике и атомной физике. Советую качать тем, кто начал учить только за день до экзамена.

Программа для создания пустых файлов определенного размера BigByte
Если Вам нужен пустой файл определенного размера, то можно воспользоваться этой программой. Очень проста в использовании...


Опрос
Вы учитесь в СУЗе/ВУЗе
Всего ответов: 244

Сотрудничество
Поставьте себе на сайт и сообщите мне


код кнопки:


Связь с админом
395799449
Написать админу
Оставить отзыв


Статьи
Главная » Статьи » Мои статьи

CSS градиент

Это простенький CSS трюк, покажет Вам как можно добавить эффект градиента при помощи PNG картинки (никакого Flash’a и JavaScript’a, только CSS). Всё что Вам потребуется – это добавить пустой тэг <span> в ваши заголовки (имеется ввиду <h1>,<h2> и т.д.) и указать фоновое изображение. Этот способ работает практически во всех браузерах.

Начнем с HTML – добавляем пустой тэг <span> в заголовок:


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

Ну и естественно изменяем CSS:


01.h1 {
02.    font: bold 330%/100% "Lucida Grande";
03.    color: #464646;
04.    /* тут соль */
05.    position: relative;
06.}
07.h1 span {
08.    /* указываем изображение с градиентом */
09.    background: url(gradient.png) repeat-x;
10.    /*позиционируем абсолютно */
11.    position: absolute;
12.    /*отображаем блоком на всю ширину заголовка */
13.    display: block;
14.    width: 100%;
15.    height: 31px;
16.}

И всё, множество примеров можете найти на это странице. Сам пример можете скачать по данной ссылке (в архиве вы найдете все градиенты, готовые к применению).

Чуть не забыл, надо еще повоевать с IE6, для этого в HTML код вставляем следующее:


1.<!--[if lt IE 7]>
2.<style>
3.h1 span {
4.    background: none;
5.    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
6.}
7.</style>
8.<![endif]-->

Кстати, если Вы не хотите править горы HTML кода, за Вас это может сделать jQuery:


1.<script type="text/javascript" src="jquery.js"></script>
2.<script type="text/javascript">
3.$(document).ready(function(){
4.    //prepend span tag to H1
5.    $("h1").prepend("<span></span>");
6.});
7.</script>

И всё, множество примеров можете найти на это странице. Сам пример можете скачать по данной ссылке (в архиве вы найдете все градиенты, готовые к применению).


Источник: http://anton.shevchuk.name/html-and-css/css-gradient/
Категория: Мои статьи | Добавил: DiP_admin (16 Августа 2009) | Автор: Дмитрий E W
Просмотров: 2162
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Разделы новостей
Мои статьи [25]
Учебные статьи [9]
Заработок [53]
ВЕБ-мастеру [0]
Online-сервисы [0]
Интересное [0]

Статистика

Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Все пользователи

Яндекс цитирования Rambler's Top100 Каталог сайтов OpenLinks.RU Каталог сайтов iLinks.RU Каталог сайтов :: Развлекательный портал iTotal.RU Каталог сайтов Bi0 Каталог сайтов Всего.RU