бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Создаем эффект прозрачности для изображений
Создаем эффект прозрачности для изображений
worldname Дата: Вторник, 2011-12-20, 02:14 | Сообщение # 1
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
Эффект прозрачности или полупрозрачности, основанный на CSS можно применять в двух основных вариантах. Это исходное изображение при наведении на которое становится полупрозрачным. И полупрозрачное изображение при наведении становится истинным. Последний эффект часто применяют к баннерам

Рассмотрим пример кода проявления прозрачности при наведении на картинку


В таблицу стилей прописываем класс transh и расписываем его

Код
.transh a:hover img {
              -moz-opacity: 0.5;
              opacity: 0.5;              
              filter: alpha(opacity=50);
}


После этого любое изображение на которое нужно наложить эффект заключаем в div с прописанным классом trans

Код
<div class="transh">Тут прописываем адрес картинки или картинок</div>


Пример кода полупрозрачной картинки при наведении которая становится истинной


В таблицу стилей прописываем класс trans и расписываем его

Код
.trans a img {
              opacity:0.5;              
              -moz-opacity:0.5;
              filter:alpha(opacity=50);
}              

.trans a:hover img {
              opacity:1.0;
              -moz-opacity:1.0;              
              filter:alpha(opacity=100);
}


В коде на страницах нужные картинки берем в div с указанием класса trans

Код
<div class="trans">Тут будут находится ваши изображения к которым нужно применить эффект</div>


значения
Код
opacity:0.5; и   filter:alpha(opacity=50)
дают полупрозрачность. Степень прозрачности регулируется значениями 0, 5 для всех браузеров кроме IE, для IE 50. Чем ближе значение к нулю, тем сильнее прозрачность и наоборот


Прикрепления: 4853329.jpg(2.9 Kb)
 
worldname Дата: Вторник, 2011-12-20, 02:28 | Сообщение # 2
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
Примечание: эффект работает на всех кликабельных изображениях типа
Код
<a href="http://webanetlabs.net/_fr/2/4853329.jpg"><img border="0" src="http://webanetlabs.net/_fr/2/4853329.jpg"></a>
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Создаем эффект прозрачности для изображений
  • Страница 1 из 1
  • 1
Поиск: