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

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

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

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

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

Чтобы сделать это следуйте следующим инструкциям:
Во-первых из "Панели инструментов" переходим в "Макет", где выбираем "Изменить HTML" и с помощью поиска (CTRL+F) находим:

</head>

и сразу перед этим кодом добавляем:

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

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

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

Пробуйте и не забывайте оставлять комментарии - всегда приятно читать отзывы читателей ;)

Ярлыки: эффект, blog style, blogger

15 коммент.:

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

P.S. не забывай про мою просьбу!; 25 марта 2009 г. в 17:52
Анонимный комментирует...: ты о совместимости подумал? видать нет... открой свой сайт в ИЕ 5...

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

данный эффект делается путём создания нового слоя, заливкой его белым и установкой прозрачности слоя ~15%. При этом 100% совместимость, ибо картинки все браузеры отображать умеют; 29 марта 2009 г. в 12:28
Unknown комментирует...: radamant, а ты о веб-оптимизации слышал хоть раз?
Зачем мне увеличивать размер каждого изображения почти в двое, тем самым нагружать страницу и увеличивать скорость загрузки? и как ты сделаешь это для счетчиков и баннеров? Никак!
Обнови браузер ;) археолог :D; 31 марта 2009 г. в 21:17
Анонимный комментирует...: Спасибо, установил у себя на блоге. Только вот не получается применить к счотчику MyCounter, =(( а так все работает; 5 апреля 2009 г. в 13:39
Анонимный комментирует...: Кстати, сори что не по теме, но не хотел бы рассказать про функцию "К началу" (такая маленькая стрелочка у тебя внизу блога)?; 5 апреля 2009 г. в 13:47
Анонимный комментирует...: Я юзаю Файрфокс 3, обновлять нечего, а твоя грубость как мне кажется есть следствием необразованости; 5 апреля 2009 г. в 15:00
Unknown комментирует...: radamant, и у тебя в Лисе что-то не работает? Зачем тогда писать мне про браузер, который уже никто не использует и он не способный обрабатывать 80% современного кода?

P.S. Данный эффект для веб никогда не делается в PS, что говорит о твоей необразованности!; 5 апреля 2009 г. в 15:10
Unknown комментирует...: Zefir, я не советую использовать этот эффект для счетчиков посещений, т.к. их код используется для подсчетов и возможно, что некоторые из них перестанут работать или просто эффект с ними не будет работать =(

Насчет кнопки "К началу" я еще подумаю. Для создания подобной рядовому пользователю придется не мало "попотеть", но в скором будущем постараюсь оформить доступное для всех описание ;); 5 апреля 2009 г. в 15:15
Ярослав Каплан комментирует...: Спасибо за туториал.
А насчет кнопки "К началу" ничего сложного нет. Как это сделать, можно почитать, например, тут; 9 мая 2009 г. в 00:40
FotoCasher комментирует...: Очень полезная белиберда :о); 17 мая 2009 г. в 11:57
Maksym Shevchenko комментирует...: Как сделать симпатичную кнопку у тебя внизу, которая вверх тебя поднимает??; 23 июня 2009 г. в 20:03
davis комментирует...: Этот комментарий был удален автором.; 10 сентября 2009 г. в 10:31
davis комментирует...: radamant, более тупой реализации, нежели та, которую вы предложили, найти врядли удастся.
DA, это +, как всегда спасибо.; 10 сентября 2009 г. в 10:56
Валентина Петровна комментирует...: Уважаемый автор, спасибо Вам большое за такой полезный и очень доступный (даже для людей плохо знакомых со специальными терминами)материал. Все получилось сразу.; 5 ноября 2009 г. в 20:48
sunna uz husain комментирует...: Большое спасибо за полезное совет . Желаью удачи.; 6 июля 2012 г. в 00:04

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

БелиберDA