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

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

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

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

div { opacity:0.70; }

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

div {
opacity:0.70; /* для Mozilla Firefox, Google Chrome, Opera и Safari */
filter: alpha(opacity=70); /* для любителей Internet Explorer 5,6,7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* для Internet Explorer 8 */
}

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

/* к примеру видимость 70% */
.proza {
opacity:0.70;
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
/* при наведении курсора возвращаем видимость 100% */
.proza:hover {
opacity:1.00;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

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

<div class="proza"> желаемый объект </div>

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

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

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

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


Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 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-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.19MB | MySQL:138 | 0,299sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookieСайт использует cookie
Друг, не уходи!