Эффект прозрачности для (Щетчиков посещений сайта)

Тема в разделе "Веб-дизайн", создана пользователем seo-partner, 14 июл 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. seo-partner

    seo-partner

    Регистр.:
    12 янв 2008
    Сообщения:
    186
    Симпатии:
    138
    1214917296_counters.jpg

    Эффект прозразрочности при помощи CSS.

    Добавляем в style.css следующее: (в конец)

    /* ----////// Эффект прозрачности /////------- */

    #banners a img {
    opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=40);
    }

    #banners a:hover img {
    opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);
    }


    Заключаем счётчики или любое изображение в дивы:

    <div id="banners">Тут ваши счётчики</div>
     
    deltaas, inventor69, Miodin и 10 другим нравится это.
  2. majahead

    majahead

    Регистр.:
    12 май 2008
    Сообщения:
    376
    Симпатии:
    107
    Щас проверил, работает во всех браузерах и в ie6 тоже, даже не вериться. Я уже как-то читал про этот эфект ,но не использовал мне казалось почемуто что это из css3.
     
  3. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    дайте посмотреть готовый пример
    HTML:
    #banners a img {
    opacity:0.3; -moz-opacity:0.3; [U]filter:alpha[/U](opacity=40);
    }
    
    #banners a:hover img {
    opacity:1.0; -moz-opacity:1.0; [U]filter:alpha[/U](opacity=100);
    }
    а они разве в ФФ работают?
     
  4. FDG25

    FDG25 Постоялец

    Регистр.:
    16 мар 2008
    Сообщения:
    134
    Симпатии:
    151
    В фф работает.
    У себя как то использовал такой вариант для прозрачности картинок.
    Код:
    #banners img {
      opacity:                        0.94;
      -moz-opacity:                   0.94;
      -khtml-opacity:                 0.94;
      filter:                         progid:dximagetransform.microsoft.alpha(opacity=94);
      }
    
     
  5. majahead

    majahead

    Регистр.:
    12 май 2008
    Сообщения:
    376
    Симпатии:
    107
    Кстати.
    Этот эффект можно использовать для того чтоб сделать свой сайт особенным, внести изюминку.Например сделать меню, при наведение на пункт которого, пункт становиться более чётким, или например это может быть рамка фотографии. Короче можно делать интересные вещи средствами Хтмл, цсс,без Джаваскрипт, надо только пофантазировать.
     
    ELiyahu нравится это.
  6. ELiyahu

    ELiyahu Читатель

    Регистр.:
    14 июл 2008
    Сообщения:
    5
    Симпатии:
    1
    блин, это гениально! несколько раз натыкался на эту фичу в сети; но особо не задумывался, как это делается :)
    действительно всё просто - и выглядит очень даже симпатяшно ;)

    золотые слова
     
  7. nubic

    nubic

    Регистр.:
    29 май 2008
    Сообщения:
    382
    Симпатии:
    151
    я давно этой штукой пользуюсь, но не как руки не доходят поискать и сделать чтобы при наведении картинка четкой становилась плавно а не резко, для этого яваскрипт используют если не ошибаюсь
     
  8. majahead

    majahead

    Регистр.:
    12 май 2008
    Сообщения:
    376
    Симпатии:
    107
    На яве это делаеться так:

    Вот это в header
    < script language=JavaScript>


    var m = new Array(0,100);
    var t = new Array();
    function next() {
    m[0]+=1;
    m[1]-=1;


    document.getElementById("a1").style.opacity = m[1]/100;
    document.getElementById("a1").style.filter="alpha(opacity="+m[0]+")";
    document.getElementById("a2").style.opacity = m[0]/100;
    document.getElementById("a2").style.filter="alpha(opacity="+m[1]+")";


    t[0] = setTimeout("next()",5);
    if (m[0]>98) clearTimeout(t[0]);
    }
    < /script>
    И вот так сами катинки оформляешь
    # < div id=a1 style='position: absolute; top: 100px; left: 100px'>
    < img src='picture1.jpg'>
    < div>
    < div id=a2 style='position: absolute; top: 100px; left: 100px; opacity: 0'>
    < img src='picture2.jpg'>
    < /div>
    < div onclick='next()' style='cursor: pointer'>
    Посмотреть эффект
    < /div>
    Работает во всехъ браузерах.
     
  9. aleksey246

    aleksey246 Постоялец

    Заблокирован
    Регистр.:
    14 май 2007
    Сообщения:
    119
    Симпатии:
    88
    Спасибо, полезная штука.

    majahead ява скрипт не у всех включено в браузерах да и код длиней)
     
  10. nubic

    nubic

    Регистр.:
    29 май 2008
    Сообщения:
    382
    Симпатии:
    151
    он это для меня, плавное проявление картинки
     
Статус темы:
Закрыта.