Автор

14 06.2013
CSS прозрачность

CSS прозрачность


 

Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.

Решение

В стилях для нужного элемента задаем:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */

 

Теория

W3C в своей рекомендации CSS3 задает свойство opacity для применения эффекта прозрачности элементов. Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

К сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

  1. filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); — для ИЕ версии выше 5.5-7 прозрачность реализуется с помощью фильтра Alpha DirectX. Значение задается в диапазоне от 0 до 100. Сокращенный (не рекомендуемый) вариант — filter: alpha(opacity=50);
  2. -moz-opacity — для старых версий Mozilla (1.6 и ниже) и Firefox (до 1.6)
  3. -khtml-opacity — для Safari 1.1 и Konqueror 3.1

 

Минусы

filter, -moz-opacity, -khtml-opacity валидации не проходят. Opacity — только CSS Level 3.

Возможные проблемы

Не работает в IE. Причина — не указаны width и height. Или можно добавить zoom: 1

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
zoom: 1; /* для элемента в ИЕ, у которого не заданы width и height */

 

update 23.09.10 by Егор Скорняков может так же не работать, если применить к блоку с очень большими размерами (например, 9999x9999px).

Делаем полупрозрачный фон

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

<div
<!--обрабатываем события для показа/скрытия меню -->
onmouseover="this.getElementsByTagName('div')[0].style.display='block'"
onmouseout="this.getElementsByTagName('div')[0].style.display='none'"
class="cssOpacityDiv">
Наведи на меня курсор
<div class="cssOpacityDiv2"><!--выпадающий блок-->
<div></div><!--полупрозрачный красный фон меню-->
<ul class="cssOpacityUl"><!--меню-->
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
</div>
</div>

 

CSS код:

 

.cssOpacityDiv2 {
display: none;
position: absolute;
left: 0;
top: 24px;
width: 208px;
overflow: hidden; /* обрезаем лишний фон */
}
.cssOpacityDiv2 div {
background: #990000; /* цвет фона меню */
opacity: 0.5; /* степень прозрачности */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* степень прозрачности для ие */
width: 100%; /* ширина раная ширине родительского блока */
height: 1000px; /* высоту задаем большую, т.к. не знаем заранее сколько пунктов меню будет */
position: absolute;
z-index: 1; /* указываем явно уровень по z-оси, чтобы сделать меню выше */
top: 0;
left: 0;
}
.cssOpacityUl {
list-style: none;
width: 208px;
margin: 0;
padding: 0;
text-align: center;
position: relative; /* для того чтобы указать уровень по z-оси */
z-index: 2; /* задаем уровень больше, чем о полупрозрачного фона */
}

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

15 04.2013
CSS прозрачность

Навигационное меню использующее новые возможности CSS3 (изображения и javascript не используются). Эффекты можно наблюдать только в последних webkit браузерах.


10 07.2013
CSS прозрачность

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


19 03.2013
CSS прозрачность

Интересные плагины, которые вы сможете использовать при создании навигации в ваших проектах.

Представляю вашему вниманию jQuery, Mootools, CSS меню, выполненные в различных вариантах и стилевых исполнениях: вертикальные и горизонтальные меню,  меню c анимированными JavaScript эффектами, круговые меню, графические меню, прокручивающиеся меню, меню с CSS3 эффектами, фиксированные навигационные панели, всегда находящиеся в поле видимости и другие примеры навигации.

 


26 01.2018
CSS прозрачность

Красивый сайт остается в памяти посетителя очень долго, и это несомненно прекрасно. Сегодня мы бы хотели поговорить об замечательный заглушке на ваш сайт...


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close