Прозрачность изображений через стили CSS
RealOnlineMoney - заработать реальные деньги в интернете
Главная страница Каталог сайтов RSS Follow me Регистрация Вход
Рубрики

Поиск

Архив

Реклама

Подписчики
RealOnlineMoney на Feedburner


Приветствую Вас, Гость · RSS 2010-07-29, 7:13 PM

Главная » Разработка сайта » Прозрачность изображений через стили CSS



Прозрачность изображений через стили CSS

Невидимость изображенийИногда счётчики, баннеры или другие картинки не подходят к дизайну сайта. Для таких случаев в CSS есть возможность сделать изображения бледнее, прозрачней. Например, нам нужно встроить код такой код на сайт:

Code
<a href="http://www.cys.ru/"><img src="http://www.cys.ru/button.png?url=realonlinemoney.ru" width="88" height="31"></a>

Этот баннер выглядит так:



Теперь мы создаём в стилях CSS идентификатор, который у нас будет называться img1. Он будет влиять на видимость картинок (img) в ссылках (a). В фигурных скобках содержатся три значения, для браузеров Opera, Mozila Firefox и Internet Explorer. От этих данных зависит, какая видимость будет у изображений. При значении 1 для первых двух браузеров и 100 для альфа-фильтра изображение будет полностью видно, при нулевых значениях изображение не будет видно. В нашем примере мы имеем 30% видимости баннера:

Code
#img1 a img {opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);}

Код баннера теперь нужно заключить в такой тег:

Code
<div id="img1">Код баннера</a></div>

Теперь наш баннер выглядит так:


Иногда нужно, чтобы при наведении курсора эффект прозрачности пропадал. Дополняем код в стилях CSS ещё одной строкой. Теперь при активной ссылке (a:hover) будет полная видимость картинки. Код для CSS-файла:

Code
#img2 a img {opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=30);}
#img2 a:hover img {opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}

И вот что получается:



Категория: Разработка сайта | Просмотров: 590 | Теги: прозрачность, прозрачность изображений, прозрачность картинок, прозрачность баннеров, эффект прозрачности, css
Всего комментариев: 5
0  
1 Елена   (2009-10-09 10:41 Am)  
А как я мучилась со счётчиками, пока не удалила код гугловского... Хороший у вас блог, не под копирку. Время только выкроить и перечитать. smile

0  
2 RealOnlineMoney   (2009-10-12 7:48 PM)  
Спасибо за комплименты, Лена! Блог действительно не под копирку. Чтобы дизайн свой сделать ещё воли не хватило, да и времени нет. Я только стандартный шаблон поправил немного. А пишу, кроме как в разделе "Каталог статей", всё сам. Пишу о том, что было бы и мне интересно, если бы я этого не знал уже. Писака с меня конечно не Пушкин, но потихоньку строчу. Очень буду рад, если мой RealOnlineMoney реально кому-нибудь поможет.

0  
3 Sander   (2009-10-26 9:38 Am)  
А что же не следуете своей рекомендации? Я просматриваю сайт - счетчики в футере всегда задымлены, даже если навести мышь.

0  
4 RealOnlineMoney   (2009-10-26 6:14 PM)  
Я тут писал не о том, как обязательно делать надо, а о том, как можно сделать. У моего блога целая батарея счётчиков, чтоб глаза не мазолили я их и задымил. Вообще парочку из них убрать надо, топ mmgp и sb-money, например. Ведь ссылок и трафика с них не наблюдается совсем.

0  
5 Sander   (2009-10-26 6:27 PM)  
У меня тоже их куча, собственно, они так и задымлены, как здесь описано. Mail, rambler, spylog и liveinternet рады ссылок. pr-cy сам смотрю, subscribe - вообще у меня оттуда треть трафика, и один личный счетчик.

Имя *:
Email:
Ваш сайт:
Код *:
2009 © RealOnlineMoney.Ru | Сайт управляется системой uCoz
PR и ТИЦ Рейтинг сайтов о заработке