FAQ Создание прозрачных объектов

Администратор · Регистрация: 27.02.2009

Как при помощи CSS создать рисунки и ссылки с эффектом прозрачности.

Итак, приступим...

Изображение с эффектом прозрачности

Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css;

Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):

PHP код:



.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); 
   }

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

PHP код:



<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" />
<br /><div style="z-index:3" class="smallfont" align="center"></div><br /><div style="z-index:3" class="smallfont" align="center"></div></body>
</html>

Для того, чтобы увидеть работу стилей нам понадобится картинка. В данном случае - css.png.

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

Ссылка-картинка с эффектом прозрачности при наведении

Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css;

Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):

PHP код:



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); 
   }

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

PHP код:



<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.

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

Пояснения к коду:

opacity: 1.0; - задание уровня непрозрачности от 0.0 до 1.0. Не поддерживается в старых версиях браузеров;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10); - то же самое, но для IE5.5+.

Вот так получиться:

Пользователь · Регистрация: 08.07.2012

а это просто статическая прозрачность? а можно скрипт подсказать при наведении чтоб постепенно менялась прозрачность в не прозрачность?

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
FAQ Создание горизонтального меню	Vector	HTML, CSS	0	18.01.2010 23:54
FAQ Создание нумерованного списка	Vector	HTML, CSS	0	18.01.2010 23:49
FAQ Создание градиентного текста	Vector	HTML, CSS	0	18.01.2010 23:43
FAQ Создание загрузочной USB Flash с Windows 7 из-под Ubuntu	Vector	Статьи и FAQ	0	23.11.2009 18:16
FAQ Создание собственного хостинга	Vector	nginx	4	22.06.2009 19:31

asd #2
70 МГц Пользователь Вес репутации: 0 Регистрация: 08.07.2012 Сообщений: 322 Сказал(а) спасибо: 15 Спасибок 5 в 5 сообщениях	Re: Создание прозрачных объектов - 21.07.2014, 12:23 а это просто статическая прозрачность? а можно скрипт подсказать при наведении чтоб постепенно менялась прозрачность в не прозрачность?