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

>Ф А Й Л Ы

>С Т А Т Ь И

>Р Е Ф Е Р А Т Ы

>Ф О Р У М

>О Т З Ы В Ы

>Т Е С Т Ы

>F l a s h И Г Р Ы

>Ф О Т О Ш О П


Советуем...
Mat JV v0.15
 Программа Mat JV предназначена для решения задач линейной алгебры. Основной
особеннстью Mat JV является пошаговое решение задач.

    - Решение системы алгебраических уравнений методом Гаусса.
    - Решение системы алгебраических уравнений по правилу Крамера.
    - Нахождение определителя матрицы.
    - Вычисление математических выражений.

    Решение может быть получено как численно так и в дробном виде.

Шпора Все формулы по физике
На одном листе А4 размещены почти все основные формулы по физике. Если лень самому делать шпоры, то качайте этот файл.

XVI32 2.51
Шестнадцатеричный редактор для программистов. Помимо стандартных для такого рода программ возможностей редактирования, предлагает подсчет контрольных сумм CRC16 и CRC32, поиск, замену и подсчет числа вхождений байтов в файл.

Windows 7 Toolkit 1.8 (полная активация Windows 7)
В связи с большим количеством обращений в поисковик по запросу "активация Windows 7" выкладываю рабочий активатор для Семерки.
Оптимизатор системы Windows 7. Главная функция его - полная активация системы
. Теперь версия системы не будет работать как RC, до определённого времени, а как полноценная многофункциональная система.


Опрос
Вы учитесь в СУЗе/ВУЗе
Всего ответов: 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
Просмотров: 2055
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Разделы новостей
Мои статьи [25]
Учебные статьи [9]
Заработок [53]
ВЕБ-мастеру [0]
Online-сервисы [0]
Интересное [0]

Статистика

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


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

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

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