Автор

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



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

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

Полностраничное меню, которое заменяет текущий контент, вытесняя его с экрана.


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

Изображение, которое расширяется при нажатии, переходит в полную ширину и превращается в галерею.


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

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


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

Список разделенных блоков, которые воссоединяются при прокрутке, имитируя движение по оси Z с помощью преобразований CSS и jQuery.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close