Главная | О проекте | Блог | Реклама
Чтение RSS
Суперсайт
Суперсайт
Контакты Карта сайта Добавить в избранное
  • Место под рекламу

    Опрос пользователей

    Как вы к нам зашли?

    • Партнеры


    • Онлайн всего: 1
      Гостей: 1
      Пользователей: 0

      Популярное

      free counters

    Рекомендуем


  •  
    Главная » Файлы » Ucoz зона » Скрипты и хаки для ucoz

    Код прозрачности
    20.12.2010, 23.22.33

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

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

    Перелопатив массу вариантов кодов и скриптов, я пришел к выводу, что ничего проще простого кода 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>

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

    Категория: Скрипты и хаки для ucoz | Добавил: Skyline
    Просмотров: 391 | Загрузок: 0 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
Наверх

Реклама

Ваша реклама