Как сделать прозрачный баннер

Воскресенье, 30 Ноя 2014 16:09

девушка  делает прозрачный банер
Всем привет, и сегодня я расскажу вам о том, как можно сделать прозрачный баннер на своем сайте. Строго говоря, так можно делать не только баннеры, но и счетчики, логотипы, другие картинки.
Зачем это надо? Причины тут могут быть самыми различными – кому-то нравятся счетчики с эффектом прозрачности, кто-то делает прозрачные банеры для других целей.
Вообще, применение таких баннеров может быть самое разнообразное, их можно использовать в самых разных местах, вплоть до самых неожиданных, так что умение делать невидимые баннеры может сослужить вам в будущем хорошую службу.
Итак, чтобы сделать прозрачный счетчик или другую картинку, надо в файл каскадных стилей добавить следующий код:

код прозрачного баннераНапример в сайтах на Вордпресс файлик стилей (style.css) можно открыть прямо в редакторе по адресу «Внешний вид -> Редактор». Только предварительно не забывайте делать бекапы (копии) файлов.
Сам же код баннера нужно заключить между тегами

то есть у вас получится конструкция вида:


Можно использовать и такой вариант – создайте статистическую страницу с любым именем – index.html, prikol.html, неважно, и прямо сверху перед закрывающим тегом добавьте такой код:

Сами же картинки, счетчики, баннеры также нужно поместить между соответствующими тегами

Пример вы можете увидеть на этой картинке: красивая спортивная девушка прячется от вас, но если навести на неё курсор, то она предстанет перед вами во всей своей красе.smile

девушка красавица спортсменкаПодумайте, где еще можно применить такие эффекты. Я делал следующие вещи – закрывал картинки и ссылки прозрачным невидимым экраном. То есть, пользователь картинку видит, но скачать её не может.smile

Нет, конечно, такую картинку при желании можно легко скачать, например, через исходный код, но это могут сделать более продвинутые пользователи, новички же обычно сохраняют картинки «ПКМ – Сохранить изображение как…» и вот тут их и поджидает маленький сюрприз. *dash*
Точно так же можно подшутить и с ссылками – отправить ссылку знакомому на какой-нибудь ролик или сеоблог – глянь, типа, прикол, и посмотреть, как он будет пытаться её открыть или скопировать. *gamer*
Может вам удастся придумать что-то ещё более интересное, тогда обязательно напишите об этом в комментариях.
[original:seo-semki.ru]
И напоследок традиционный анекдот:

Разговаривают два парня.
– Генетика, Мендель, наследственность – всё это ерунда. Вот мой прадед, например, был алкоголик. Мой дед был алкоголик. И мой отец также был алкоголик. А я – нет!
– Что, серьёзно?!
– Конечно. Я – наркоман.

←♥ И не забудьте поделиться этой статьёй с друзьями – вам не трудно, а мне приятно, или добавьте её в закладки – пригодится.
Если не получается сделать прозрачный баннер самостоятельно – пишите о своих проблемах в комментариях, постараемся оперативно помочь. *help*

    Подпишитесь на комментарии, чтобы не пропустить
    важный ответ:



подписка на rss RSS - подписка
    подписка twitter Twitter - подписка

Вы можете оставить отзыв или трекбек со своего сайта.

Отзывов: 9 на «Как сделать прозрачный баннер»

  1. Василец пишет:

    05 Дек 2014 в 15:29

    Хелп, хелп, у меня засадаhttp://seo-semki.ru/icons/wpml_sad.gif

    [Ответить]

    seo Reply:

    Что именно у вас не получается?

    [Ответить]

    Василец Reply:

    Всё, разоьрался сам, не туда нужный код вставлял (не тот файл)http://seo-semki.ru/icons/wpml_yahoo.gif

    [Ответить]

    seo Reply:

    Ну тогда Ок. *ok*

    [Ответить]

  2. windserf пишет:

    05 Дек 2014 в 20:38

    аХ ды малыжка, не спрячежьзя()0))

    [Ответить]

  3. Анна пишет:

    24 Фев 2015 в 14:25

    Класс, спасибо, теперь и я умею ЭТО делать!

    [Ответить]

    seo Reply:

    Очень рад за вас smile

    [Ответить]

  4. Толян пишет:

    20 Июн 2015 в 12:08

    Спасибо помогло)

    И девочка красивая!

    http://seo-semki.ru/icons/wpml_good.gif

    [Ответить]

    seo Reply:

    Всегда пожалуйста! *good*

    [Ответить]

Ваш отзыв

http://seo-semki.ru/icons/wpml_bye.gif 
:bye:
http://seo-semki.ru/icons/wpml_good.gif 
:good:
http://seo-semki.ru/icons/wpml_negative.gif 
:negative:
http://seo-semki.ru/icons/wpml_scratch.gif 
:scratch:
http://seo-semki.ru/icons/wpml_wacko.gif 
:wacko:
http://seo-semki.ru/icons/wpml_yahoo.gif 
:yahoo:
http://seo-semki.ru/icons/wpml_cool.gif 
B-)
http://seo-semki.ru/icons/wpml_heart.gif 
:heart:
http://seo-semki.ru/icons/wpml_rose.gif 
:rose:
http://seo-semki.ru/icons/wpml_smile.gif 
:-)
http://seo-semki.ru/icons/wpml_whistle3.gif 
:whistle:
http://seo-semki.ru/icons/wpml_yes.gif 
:yes:
http://seo-semki.ru/icons/wpml_cry.gif 
:cry:
http://seo-semki.ru/icons/wpml_mail.gif 
:mail:
http://seo-semki.ru/icons/wpml_sad.gif 
:-(
http://seo-semki.ru/icons/wpml_unsure.gif 
:unsure:
http://seo-semki.ru/icons/wpml_wink.gif 
;-)