mojwp.ru
Кейсы по заработку на сайте >>
Назад

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

Опубликовано: 23.08.2011
5
681

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

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

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

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

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

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

Прозрачность в CSS
Оцени статью

Давай, оцени статью!

Автор:
Виталий
Поделиться
Похожие записи
Комментарии:
  • сергей
    Опубликовано: 11.10.2011 Ответить на сообщение

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

  • mojvit
    Опубликовано: 11.10.2011 Ответить на сообщение

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

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

  • Pavel
    Опубликовано: 29.07.2012 Ответить на сообщение

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

  • Павел
    Опубликовано: 05.08.2012 Ответить на сообщение

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

  • Туйгунов Олег
    Опубликовано: 19.03.2014 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.