Ваш промокод mojWPAds на плагин рекламы для WordPress >>

Прозрачность в CSS

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

Для браузеров, с поддержкой CSS3, достаточно и следующего кода:

Но не все юзеры интернета любят обновлять браузеры. Большинство предпочитает "ущербные" Internet Explorer 5 (6,7,8), которые не поддерживают современные стандарты. Для таких посетителей код придется дополнить:

В качестве наглядного пособия продеманстрирую, как эффект прозрачности реализован в данной статье. Открываем style.css и добавляем следующий код. Для этого заводим новый класс proza:

Остается заключить желаемый объект в созданный элемент proza:

В качестве примера смотрим картинку:

Прозрачность в CSS

Привет. Меня зовут Виталик.

Я автор этого блога, а так же Магазина WordPress https://wp-r.ru/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru


Задавай вопросы вебмастерам и общайся в канале Телеграм Трибуна. Там можно пообщаться со мной почти ежедневно.

Опубликовано 5 комментариев
  1. сергей says:

    Как сделать страницы прозрачными, можно узнать по конкретней. Что и куда вставлять.

  2. mojvit says:

    насколько я понимаю, подразумевается не вся страница полностью (смысла нет), а часть, на которой будет статья.
    в коде своей темы (single.php) ищете контейнер div, который отвечает за стилистику текста внутри и оборачиваете его в еще один div, с помощью которого и будете делать эффект прозрачности, как показано выше.

    если это не то, что нужно, то сформулируйте вопрос более понятно

  3. Pavel says:
    http://healthbps.ru

    Ага, так и хочется навести курсор на картинку, чтобы сделать ее полноценной 🙂 Интересная вещь, спасибо!

  4. Павел says:
    http://pavgri.blogspot.com

    Обычно полупрозрачными делают баннеры. Смотрится симпатично.

  5. Туйгунов Олег says:
    http://moy-wp.ru

    Вау очень интересный хак. Спасибо вам Виталий за интересные статьи. Кстати хочу заметить что у вас ошибочка во втором предложении статьи)))

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2018 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 17.02MB | MySQL:131 | 0,560sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookie
Друг, не уходи!