Прозрачные изображения - эффект при наведении курсора

среда, 25 марта 2009 г.

Эффект прозрачности изображений, который исчезает при наведении курсора - один из самых распространенных в сети. Думаю Вы встречали подобное на многих сайтах и блогах.
Чтобы увидеть его в действии просто наведите курсор на изображения ниже:


”RSS” ”Google” ”Twitter” ”Feedburner”/ ”Яндекс”


Принцип работы очень простой: все заключается в небольшой части кода, который добавляется к CSS стилям в шаблоне блога. А при наведении курсора эффект исчезает, подобно тому, как изменяется курсор при наведении на ссылки ;)
Преимущество подобного стиля состоит в том, что Вы можете добавить эффект только тем изображениям, которые Вы сами выберите!


Чтобы сделать это следуйте следующим инструкциям:
Во-первых из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML" и с помощью поиска (CTRL+F) находим:
</head>
и сразу перед этим кодом добавляем:
<!--LINK-OPACITY-STARTS-->
<style type="text/css">


a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}


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


</style>
<!--LINK-OPACITY-STOPS-http://beliber-da.blogspot.com-->
и сохраняем шаблон!
Теперь Вы можете применить прозрачный эффект для любого изображения на блоге: непосредственно в сообщении или в сайдбаре.
Код обычного изображения выглядит примерно так:
<a href="http://feeds2.feedburner.com/beliber-da" target="_blank" alt="RSS Подписка"><img src="http://forum.wafl.ru/files/freeman/rss.png" /></a>
Чтобы добавит прозрачный эффект просто добавьте код выделенный жирным:
<a class="linkopacity" href="http://feeds2.feedburner.com/beliber-da" target="_blank" alt="RSS Подписка"><img src="http://forum.wafl.ru/files/freeman/rss.png" /></a>
Пробуйте и не забывайте оставлять комментарии - всегда приятно читать отзывы читателей ;)

Ярлыки: , ,

15 коммент.:

Holodkov комментирует...

Что сказать, как всегда ты публикуешь интересные вещи. Сам неоднократно видел такой эффект, но не знал как он реализуется. Спасибо.

P.S. не забывай про мою просьбу!

radamant комментирует...

ты о совместимости подумал? видать нет... открой свой сайт в ИЕ 5...

ИМХО всё это проще делать в фотошопе... и тени, и отблеск, и рамки итд итп...

данный эффект делается путём создания нового слоя, заливкой его белым и установкой прозрачности слоя ~15%. При этом 100% совместимость, ибо картинки все браузеры отображать умеют

DA комментирует...

radamant, а ты о веб-оптимизации слышал хоть раз?
Зачем мне увеличивать размер каждого изображения почти в двое, тем самым нагружать страницу и увеличивать скорость загрузки? и как ты сделаешь это для счетчиков и баннеров? Никак!
Обнови браузер ;) археолог :D

Zefir комментирует...

Спасибо, установил у себя на блоге. Только вот не получается применить к счотчику MyCounter, =(( а так все работает

Zefir комментирует...

Кстати, сори что не по теме, но не хотел бы рассказать про функцию "К началу" (такая маленькая стрелочка у тебя внизу блога)?

radamant комментирует...

Я юзаю Файрфокс 3, обновлять нечего, а твоя грубость как мне кажется есть следствием необразованости

DA комментирует...

radamant, и у тебя в Лисе что-то не работает? Зачем тогда писать мне про браузер, который уже никто не использует и он не способный обрабатывать 80% современного кода?

P.S. Данный эффект для веб никогда не делается в PS, что говорит о твоей необразованности!

DA комментирует...

Zefir, я не советую использовать этот эффект для счетчиков посещений, т.к. их код используется для подсчетов и возможно, что некоторые из них перестанут работать или просто эффект с ними не будет работать =(

Насчет кнопки "К началу" я еще подумаю. Для создания подобной рядовому пользователю придется не мало "попотеть", но в скором будущем постараюсь оформить доступное для всех описание ;)

Ярослав Каплан комментирует...

Спасибо за туториал.
А насчет кнопки "К началу" ничего сложного нет. Как это сделать, можно почитать, например, тут

FotoCasher комментирует...

Очень полезная белиберда :о)

Metallen Einklang комментирует...

Как сделать симпатичную кнопку у тебя внизу, которая вверх тебя поднимает??

davis комментирует...
Этот комментарий был удален автором.
davis комментирует...

radamant, более тупой реализации, нежели та, которую вы предложили, найти врядли удастся.
DA, это +, как всегда спасибо.

Валентина Петровна комментирует...

Уважаемый автор, спасибо Вам большое за такой полезный и очень доступный (даже для людей плохо знакомых со специальными терминами)материал. Все получилось сразу.

husain husain комментирует...

Большое спасибо за полезное совет . Желаью удачи.

Отправить комментарий