loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

В помощь вебмастеру, CSSЭффект прозрачности для изображений

Написал Akaxazam, 31 декабря 2008 | 15 комментариев | рейтинг новости не нравится   +10   нравится Версия для печати
Эффект прозрачности для изображений

Возможно Вы когда либо видели, что счетчики на сайте сделаны как бы более прозрачными или тусклыми а при наведении на них курсором приобретают начальные свойства. Мне всегда это нравилось, но я не задумывался а как это делается…

Сегодня я приведу пример реализации данного, достаточно интересного и необычного эффекта без помощи JavaScript а исключительно на CSS.

Вот так выглядит наш CSS код
<style type="text/css">

<!--

#banners a img {

opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);

}



#banners a:hover img {

opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);

}

-->

</style>


Далее необходимые нам изображения заключаем в соответствующий DIV. К примеру вот так…

<div id="banners">

<a href="#"><img src="cnt.gif" width="88" height="31" border="0"></a>

<a href="#"><img src="cycounter.gif" width="88" height="31" border="0"></a>

<a href="#"><img src="hit.gif" width="88" height="31" border="0"></a>

<a href="#"><img src="img.gif" width="88" height="31" border="0"</a>

</div>


Куда мы можем применить данный эффект… опять же таким образом мы можем увести акцент внимания с определенных объектов, тех же счетчиков, или можем сделать наши изображения скажем в фото галерее на сайте полупрозрачными. Возможно применить этот эффект с созданию меню сайта…в общем фантазия в Ваших руках.

Демо: aeteam.ru



Комментарии пользователей

  Экспорт комментариев в RSS
 Сортировать по рейтингу, по дате

Написал flake, 31 декабря 2008 в 19:24 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 77, Пользователи
Карма:
Куда смотрят админы...

может вы нам покажите как в css изменить цвет текста?... шутка.



_http://www.htmlbook.ru/

Написал Akaxazam, 31 декабря 2008 в 19:26 плохой комментарий   +3   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Знаю,это легко,но многие это спрашивают.

Написал grimweb, 1 января 2009 в 12:00 плохой комментарий   0   хороший комментарий
Новостей: 6, комментариев: 446, Модератор
Карма: 23±
Спасибо. Много где такое видел, теперь и себе в копилку идею заберу.

Написал Akaxazam, 1 января 2009 в 13:01 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Незачто)Скоро выйдет шаблон для дле от моей студии 59

Написал grimweb, 1 января 2009 в 13:50 плохой комментарий   0   хороший комментарий
Новостей: 6, комментариев: 446, Модератор
Карма: 23±
Akaxazam,
Жду - не дождусь smile !

Написал BURBON, 1 января 2009 в 23:02 плохой комментарий   +1   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Это зачёт. Много применений для него нашёл у себя на сайте.
При желании можно юзать и для графических кнопок навигации (когда есть) без применени двух картинок.

Написал sanshteyn, 4 января 2009 в 18:54 плохой комментарий   0   хороший комментарий
Новостей: 10, комментариев: 490, Модератор
Карма: 28±
Странно... У меня только в ослике всё норм работает :(
В опере и в мозиле не работает ...

Написал MgStyle, 9 января 2009 в 12:07 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
у меня тоже sad

Написал vistrelkov, 4 января 2009 в 22:57 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 3, Пользователи
Карма:
Так куда это в css вставлять? В какой css вообще?

Написал FROG, 5 января 2009 в 21:44 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Спасибо, пригодится. Много где видел такое.

Написал ANDY555, 10 января 2009 в 10:19 плохой комментарий   0   хороший комментарий
Новостей: 4, комментариев: 65, Пользователи
Карма:
вставляем в майн перед {AJAX}



<style type="text/css">
.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}
.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
.toggleopacity img{
border: 1px solid #ccc;
}
.toggleborder:hover img{
border: 1px solid navy;
}
.toggleborder:hover{
color: red; /* Dummy definition to overcome IE bug */
}


далее 2 варианта эфекта картинки


<a class="toggleopacity" href="SITE.RU">
<img border="0" src="media/button.gif" width="137" height="26" />
</a>

<a class="toggleborder" href="SITE.RU">
<img border="0" src="media/button2.gif" width="163" height="57" />
</a>


работает в FF, IE, Opera

Написал Sander1, 19 января 2009 в 18:46 плохой комментарий   0   хороший комментарий
Новостей: 38, комментариев: 314, Пользователи
Карма: 21±
Молодец автор. Нормально написал.
У кого не работает полупрозрачность - лазим в инете ищем варишки решений.

PS. Ну а вооще-то тут вроде для всех браузеров учтено... У меня работало на 1м - опера. на 2м ишак.
opacity:1.0;
-moz-opacity:1.0;
filter:alpha(opacity=100);


Написал Emperio, 10 июня 2009 в 23:24 плохой комментарий   0   хороший комментарий
Новостей: 13, комментариев: 179, Пользователи
Карма: 10±
Люблю такие представления:
Появляются "настоящие мастера" и начинают публично демонстрировать свой "великий" уровень, они все знают, так для кого вы тогда публикуете такую срань? Ответ прост:
1. Это не срань.
2. Для людей, которые этого не знают. (Ведь не все же рождаются супер мастерами как эти люди...)

Это сообщение посвящалось flake

Написал lich-king-best, 17 декабря 2009 в 20:40 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Автор овцеёб твою куйню каждый юкуз сайт знает только там рабочий скрипт а твой нет 59

P.S. вот вам мой код работает на все сто
#banners a img {
opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
}

#banners a:hover img {
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);

}

Пример работа способности моего кода смотреть тут http://games-prolane.ru/

Написал Фомин Дмитрий, 17 января 2010 в 01:02 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Спасибо, я себе как раз хотел поставить! Некто не подскажет как такое же сделать на форуме ( http://forum.infearn.ru )

Информация



Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
Анализ Тиц и PR сайта

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]