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

В этом уроке, я расскажу вам о том, как при помощи 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+


---------------------------------------
Правила копирования материалов урока
Демо - Изображения
Демо - Ссылки
Скачать урок (zip, 7 Kb)


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



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

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

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