Главная   Регистрация   Фотообзоры   Контакты   RSS 2.0  
 

Навигация
Главная Самиздат Обратная связь Статьи Фотобзоры Гостевая книга
 

Найти


 

Наш вопрос
 
Оцените мой сайт
Всего ответов: 9
 
 
Друзья и партнёры
 
 
Кто ОнЛайн?
Среда, 09.07.2025, 14:02
Вы-вошли как-Гость:
Группа "Гости"

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


 
 
Рекламный блок

 
 
 

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

 

Главная » Статьи » Создание сайтов

Урок CSS. Затемнение объектов
Очередная статья CSS посвящена затемнению объектов с помощью CSS и прозрачных градиентов. Этот способ позволит добиться затемнения содержания при прокручивании, или, например, затемнения части строки. Разумеется, есть и другие способы, даже есть возможность добиться такого эффекта без использования рисунков, но представленный здесь вариант - самый лёгкий, эффективный и удобный в создании, настройке и использовании.
Итак, начнём...

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

/*
=============================================================
© 2008
Урок CSS  Затемнение объектов
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей для всей конструкции */
.container {

    position:relative;
    background:url(bg.png) no-repeat;
}

/* Задание стилей для содержания */
.text {
    width:300px;
    height:200px;
    overflow: auto;
    text-align:center;
}

/* Задание стилей для верхнего затемнения */
.fade_top {
    position: absolute;
    height: 40px;
    width:100%;
    background:url(fade_top.png);
}

/* Задание стилей для нижнего затемнения */
.fade_bottom {
    position: absolute;
    height: 40px;
    width:100%;
    background:url(fade_bot.png);
    bottom:0;
}


3) Чтобы увидить работу стилей, создадим в той же директории html файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if lte IE 6]>
<style>

.fade_bottom {
background:url(fade_bot.gif);
}
.fade_top {
background:url(fade_top.gif);
}
</style>
<![endif]-->

</head>
<body>
<div class="container">
<div class="fade_top"></div>
<div class="fade_bottom"></div>
<div class="text">
Любой текст
</div>
</div>
</body>
</html>


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

Итак, для выполнения нам понадобились 3 изображения: верхний градиент, нижний градиент и фон. Более того, специально для нашего "любимого" браузера IE6, пришлось создать ещё файлы градиентов в gif...
Возможно, этот урок стоило назвать"Засветление объектов", однако создать затемнение столь же просто. Надо только, использовать темный градиент и фон...
Категория: Создание сайтов | Добавил: Prizrak13 (07.05.2009)
Просмотров: 755 | Теги: CSS, Создание сайта, CSS-технология | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

 

Выбираю
 

Ваш аккаунт
 
 
Флудилка
200

 
 
Нас Считают
 

Блог

 

Рекламный блок
 

 

 
Prizrak13 © GooD-OK 2008-2009
Конструктор сайтовuCoz-->