Очередная статья 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...
Возможно, этот урок стоило назвать"Засветление объектов", однако создать затемнение столь же просто. Надо только, использовать темный градиент и фон...
Главная