dle.in.ua » Хаки » Хак. Эффект прозрачности для изображений

Хак. Эффект прозрачности для изображений

Хак. Эффект прозрачности для изображений
Хак. Эффект прозрачности для изображений

Возможно Вы когда либо видели, что счетчики на сайте сделаны как бы более прозрачными или тусклыми а при наведении на них курсором приобретают начальные свойства. Мне всегда это нравилось, но я не задумывался а как это делается…

Сегодня я приведу пример реализации данного, достаточно интересного и необычного эффекта без помощи javascript а исключительно на CSS.
Открываем /templates/название вашего шаблона/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:
<div id="banners">Картинки желаемые</div>
  • Группа: User
  • Icq: 288569677
  • Комментариев: 703
  • Публикаций: 245
  • НЕплохой прикольчик как помне получаеться. Можно применеть на некоторых своих ресурсах.
    am

    --------------------
    • GauraStyle
    • Регистрация: 21.01.2008
    • Репутация: (0|0|0)
    • 7 января 2009 04:07
    • 1
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Давно о таком мечтал, но как то лень было искать решение :)
    • mod
    • Регистрация: --
    • Репутация: (||)
    • 7 января 2009 04:34
    • 2
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 52
  • Публикаций: 3
  • Можна здела и подругому тока на опредиленные картинки или на щетчики....
    • oleksdanderm
    • Регистрация: 30.08.2008
    • Репутация: (0|0|0)
    • 7 января 2009 09:02
    • 3
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 6
  • Публикаций: 0
  • что-то у меня непашет fellow
    • Koval_I_A
    • Регистрация: 17.05.2008
    • Репутация: (0|0|0)
    • 7 января 2009 11:27
    • 4
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Koval_I_A, потому что руки как у этого смайла рога am
    тут как бы ниче сложного, обычное применение прозрачности через цсс, и я не понимаю как это можно не поставить....тут что 2 пальца обос....причем расписано ж. одно в цсс добавить, баннеры вставить между <div id="banners"></div>
    так кстати можно делать не только с баннерами, а и с основными картинками которые в новостях, просто прописать свои координаты в шаблонах :)
    • Goodcat
    • Регистрация: --
    • Репутация: (||)
    • 7 января 2009 11:56
    • 5
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Цитата: Koval_I_A
    что-то у меня непашет

    У меня стоит и всё прекрасно работает
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Столкнулся с другой проблемой. Неработает в FireFox 3 и в Опере.А в Ие 6 все норм
    Неподскажете как сделать чтоб в других браузерах тож работало?
    • DeNiS
    • Регистрация: --
    • Репутация: (||)
    • 7 января 2009 15:21
    • 7
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Цитата: DeNiS
    Столкнулся с другой проблемой. Неработает в FireFox 3 и в Опере.А в Ие 6 все норм
    Неподскажете как сделать чтоб в других браузерах тож работало?

    Оперу проверил, токо что работает всё номр. И мозила у мну работате
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 52
  • Публикаций: 3
  • gLyk_aKa_Yure©,
    Че ты не написал источник ?
    Обратите внимание как там сделано ...
    вот вам источки ето типа статьй !!

    http://www.mastersite.org.ua/css-markup/ehffekt-prozrachnosti-dlya-izobraz
    henijj/

    Там все ок=)
    • oleksdanderm
    • Регистрация: 30.08.2008
    • Репутация: (0|0|0)
    • 7 января 2009 16:48
    • 9
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • oleksdanderm
    А с чего ты взял, что источник ето тот сайт? Ну картинки одинаковые и что.

    Там то и внимания не на, что обращать просто тут нет <!-- -->.
    А если ставить ето <style type="text/css"> то, тогда надо ставить в main. tpl етот код цсс. А зачем засорять его, если можно просто в style.css вставить.


    К тому, же всё, что я в етой новости опубликовано, работает на атличьненько я сам проверял. А у кого руки не такие как у людей, что елементарный css код не могут поставить то извините.
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 6
  • Публикаций: 0
  • понял че неработает я ставил <div id="banners"> на саму картинку а не на весь банер..
    • Koval_I_A
    • Регистрация: 17.05.2008
    • Репутация: (0|0|0)
    • 7 января 2009 18:19
    • 11
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Koval_I_A,
    А тего </div> закрыл?
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 6
  • Публикаций: 0
  • gLyk_aKa_Yure©, не сечас всё норм, я ставил див только на картинку, а надо на весь банер/кнопку.

    я ставил:
    <div id="banners"><img src="ссылко на картинку"></div>


    а надо:
    <div id="banners"><a href="ссылко"><img src="ссылко на картинку"></a></div>
    • Koval_I_A
    • Регистрация: 17.05.2008
    • Репутация: (0|0|0)
    • 7 января 2009 19:12
    • 13
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 52
  • Публикаций: 3
  • gLyk_aKa_Yure©,
    А с чего ты взял, что источник ето тот сайт? Ну картинки одинаковые и что.

    Я про картинку не че не писал =) спалился !
    • oleksdanderm
    • Регистрация: 30.08.2008
    • Репутация: (0|0|0)
    • 7 января 2009 23:58
    • 14
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • oleksdanderm,
    Я не палился, а ссылку я посмотрел и сказал про сходства.
    Мне то пох, мож считать то источником, ну я брал не там и я не выдаю етот хак за свой
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • у мну все ок,
    рекомендую всем, просто брать в обхват тегом DIV весь счетчик. Просто и быстро!
    к примеру, сувать прямо начиная от
    <div id="banners"><!--LiveInternet counter-->

    заканчивая
    <!--/LiveInternet--></div>

    "не работать" данная конструкция просто не может!
    • mex
    • Регистрация: --
    • Репутация: (||)
    • 8 января 2009 00:45
    • 16
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • всё хорошо работает спасибо автору +5 smile
    • qiq.or.kz
    • Регистрация: --
    • Репутация: (||)
    • 8 января 2009 03:17
    • 17
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • это css стиль а не хак, да ещё и элементарный... теперь у всех такой на сайтах////
    Думаю раздел "DLE Хаки" не актуален... такое надо перенести в раздел "вебмастеру"
    • pingvin
    • Регистрация: --
    • Репутация: (||)
    • 8 января 2009 04:02
    • 18
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • .: Старо, как мир... am
    • CreaFire
    • Регистрация: --
    • Репутация: (||)
    • 8 января 2009 17:35
    • 19
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 59
  • Публикаций: 8
  • стоит у меня уже как пол года)) )брал с Veselyha..
    • fer
    • Регистрация: 13.01.2008
    • Репутация: (0|0|0)
    • 8 января 2009 21:21
    • 20
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • fer, pingvin
    Старо не старо, а автору спасибо за то что объяснил как сделать. Многим пригодится.
    • bestrefer
    • Регистрация: --
    • Репутация: (||)
    • 9 января 2009 10:18
    • 21
    ^
  • Группа: User
  • Icq: 208799127
  • Комментариев: 40
  • Публикаций: 0
  • респект какраз хотел найти am
    <div id="banners">{banner}</div>

    так даже проще =) единственное єто бигмировский счетчик не прячет :(

    --------------------
    • Whisper
    • Регистрация: 17.05.2008
    • Репутация: (0|0|0)
    • 10 января 2009 12:05
    • 22
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 6
  • Публикаций: 0
  • Whisper, прячет!
    • Koval_I_A
    • Регистрация: 17.05.2008
    • Репутация: (0|0|0)
    • 10 января 2009 12:33
    • 23
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • ктонебуть подскажите как замутить чтоб счетчик вообще видно небыло?
    ну или картинки, ну короче чтоб видно было только при наведении на нее мышки, а так без наведения чтоб вообще видно небыло,
    • atmarozak
    • Регистрация: --
    • Репутация: (||)
    • 21 января 2009 11:27
    • 24
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Прикольно) Спасибо, я попробую на своём портале реализовать эту функцию.

    На localhost проверял - всё работает на ура)) Вот даже пример:
    <style>
    #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);
    }
    </style>
    <div id="banners"><a href="#"><img src="http://dle.in.ua/uploads/fotos/foto_7996.jpg"></a><
    /div>

    Только одно условие - без тега <A> (ссылка) ничего не работает)) но это так и нужно.

    Цитата: atmarozak
    ктонебуть подскажите как замутить чтоб счетчик вообще видно небыло?
    ну или картинки, ну короче чтоб видно было только при наведении на нее мышки, а так без наведения чтоб вообще видно небыло,

    Просто замени opacity:0.3; на opacity:0.0; и счётчик будет 100% прозрачным :)
    • Bogdan
    • Регистрация: --
    • Репутация: (||)
    • 26 января 2009 15:34
    • 25
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • классно. работает на всех браузерах (ie, модзила, опера гугл)...
    можете проверить
    www.designandsoft.ru
    • superuzer
    • Регистрация: --
    • Репутация: (||)
    • 16 марта 2009 16:36
    • 26
    ^
  • Группа: User
  • Icq: 499736
  • Комментариев: 85
  • Публикаций: 5
  • работать работает только вот почему то spylog перестал считать после установки данного хака... :(

    --------------------
    • kypbma
    • Регистрация: 3.02.2008
    • Репутация: (0|0|0)
    • 26 марта 2009 15:37
    • 27
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Большое спасибо!Взяла себе тоже-пригодится.
    • monfaria
    • Регистрация: --
    • Репутация: (||)
    • 26 марта 2009 16:08
    • 28
    ^
  • Группа: User
  • Icq: 481186622
  • Комментариев: 109
  • Публикаций: 9
  • Цитата: kypbma
    работать работает только вот почему то spylog перестал считать после установки данного хака... :(

    Странно, у меня считается. laughing
    • ТорЧ
    • Регистрация: 26.04.2008
    • Репутация: (0|0|0)
    • 26 марта 2009 16:22
    • 29
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • У кого не CSS стиля в main.tpl перед </head> вставить

    <style type="text/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);

    }

    -->

    </style>

    • FOXES93
    • Регистрация: --
    • Репутация: (||)
    • 23 апреля 2009 00:33
    • 30
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Спасибо поставил, все четко работает fellow

    -----------------------
    http://Zhest.com.ua : фото, фото приколы, vkontakte, zex, анекдоты гороском, юмор, секс расказы, это интересно, жесть

    пример выше на ссылке
    • websiteKurt
    • Регистрация: --
    • Репутация: (||)
    • 25 июня 2009 02:15
    • 31
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Неменого под себя переписал и супер всё получилось) Спасибо!)
    • Que Pasa
    • Регистрация: --
    • Репутация: (||)
    • 12 февраля 2010 19:57
    • 32
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • FOXES93, Спасибо!!!! winked так заработало!!!
    • andy napster
    • Регистрация: --
    • Репутация: (||)
    • 21 февраля 2010 19:36
    • 33
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Супер вещь fellow
    • DarAmal
    • Регистрация: --
    • Репутация: (||)
    • 22 апреля 2010 11:15
    • 34
    ^
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.