Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.217.122.161
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Код прозрачности
Сообщение оставлено 23.06.2010 в 19:35:59 | Сообщение #1

Порой бывает и так, что в нашем обиходе мы наталкиваемся на предметы, постоянно мозолящие нам глаза. И если от них нельзя избавиться, то непременно хочется убрать их подальше, с глаз долой. Вот лично для меня таким предметом в веб_дизайне всегда были эти пресловутые счётчики. Куда их не сунь, везде глаза мозолят.

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

Перелопатив массу вариантов кодов и скриптов, я пришел к выводу, что ничего проще простого кода css просто не существует, уж простите за тавтологию. Идеальный по исполнению и гениальный по свой простоте это код основан на простой прозрачности {opacity} и простом выделении {a hover}.

Вот как выглядит этот код: {Вставляем его либо в html-код между тегами "< head >",либо в свой css файл, у кого стили прописаны отдельным файлом}

Code
<style type="text/css">  

<!--  

#codeblock a img {  

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

}  

#codeblock a:hover img {  
opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);  
}  
-->  
</style>

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

Code
<div id="codeblock">  

<a href="#"><img src="cnt.gif" border="0"></a>  

<a href="#"><img src="cycounter.gif" border="0"></a>  

<a href="#"><img src="hit.gif" border="0"></a>  

<a href="#"><img src="img.gif" border="0"</a>  

</div>

И наслаждаемся результатом.

 
Мои друзья: ahma, koOlZz, PowerPush, SKAzzO4HuK.
Помог? так поставь [+], ато обижусь :-...(
Кому не лень [+] мне влей... :))
 
   
Сообщение оставлено 25.06.2010 в 15:12:47 | Сообщение #2
спасибо wink пригодится возможно
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика