Создаем эффект прозрачных баннеров, кнопок и других форм на сайте

Наверное многим удалось увидеть на сайте полупрозрачные кнопки, картинки или же что-то еще, но при наведении прозрачность уходила, красиво, не правда ли ? Для тех, кто не понял, смотрите вниз на нашем сайте, у нас как раз применен данный эффект. В этой статье Вы научитесь создавать прозрачные баннеры, кнопки и других формы на сайте при помощи CSS эффектов.

Данный эффект можно применить на любом движке, рассмотрим как это сделать еще и на таких движках, как WordPress, Joomla и Drupal.

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

Во-вторых нужно зайти в таблицу стилей ( style.css ) и добавить еще вот этот код:

Вот и все Работы на 3 минуты, а эффект получается достаточно красивый.

WordPress

Как не странно, но на WP все делается максимально быстро. Знаю по своему опыту. Итак, проделываем тоже самое. Как правило все кнопки, счетчики и прочее располагаются в виджетах ( Внешний вид > виджеты ). Находим нужный виджет, открываем и оборачиваем в код, как сделали это в первом пункте.

Далее нужно применить сам CSS эффект. Переходим к файлу стилей. На WordPress он расположен здесь: Внешний вид > Редактор > Таблица стилей ( style.css ). И добавляем код из пункта 2.

Joomla

Заходим в вкладку «Расширения» > «Менеджер шаблонов», кликаем по шаблону, который используется. Нажимаем кнопку «Редактировать HTML». После ищем нужный код и оборачиваем его как в пункте 1.

Далее ищем Style.css и добавляем код из пункта 2.

Drupal

В админ панели Drupal идем Структура > Блоки

И там уже смотрим, добавляем или новый блок или же выбираем готовый и оборачиваем сам код в блоке, как в пункте 1.  Ну и находим в редакторе таблицу стилей и добавляем туда код из пункта 2.