В этом уроке рассказывается о том, как при помощи CSS создать рисунки и ссылки с эффектом прозрачности.
Итак, приступим...
1.1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2.1) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):
.img1 {
opacity: 0.1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10);
}
.img2 {
opacity: 0.2;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
.img3 {
opacity: 0.3;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}
.img4 {
opacity: 0.4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
.img5 {
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.img6 {
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.img7 {
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.img8 {
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
.img9 {
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
3.1) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<img class="img1" src="css.png" />
<img class="img2" src="css.png" />
<img class="img3" src="css.png" />
<img class="img4" src="css.png" />
<img class="img5" src="css.png" />
<img class="img6" src="css.png" />
<img class="img7" src="css.png" />
<img class="img8" src="css.png" />
<img class="img9" src="css.png" />
<img src="css.png" />
</body>
</html>
Для того, чтобы увидеть работу стилей нам понадобится картинка. В данном случае - css.png.
4.1) Сохраняем и смотрим, что получилось.
---------------------------------------
Теперь сделаем ссылку-картинку с эффектом прозрачности при наведении.
1.2) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2.2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):
a:hover img {
opacity: 1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
.link {
opacity: 0.4;
border:0px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
3.2) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<center>
<a href="/"><img class="link" src="css.png" /></a><br />
</center>
</body>
</html>
Для того, чтобы увидеть работу стилей нам понадобится картинка. В данном случае - css.png.
4.2) Сохраняем и смотрим, что получилось.
Пояснения к коду:
opacity: 1.0; - задание уровня непрозрачности от 0.0 до 1.0. Не поддерживается в старых браузерах.
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10); - то же самое, но для IE5.5+
Демо - ИзображенияДемо - СсылкиПо материалам сайта:
Российская школа CSS
