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

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

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

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №17. Затемнение объектов
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...
Возможно, этот урок стоило назвать"Засветление объектов", однако создать затемнение столь же просто. Надо только, использовать темный градиент и фон...


Идея: Stu Nicholls
Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.0; Opera 8.хх - 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 13 Kb)


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



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

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

Публикацию посмотрели 21240 раз(а) и написали 11 комментариев.
Подписаться на канал 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!