Кроссбраузерные прозрачные колонки

Прозрачность – эффект, который, к сожалению, не получил широкого развития в сети. Одной из причин этого является отсутствие поддержки прозрачности браузером IE6. И очень хорошо, что к настоящему времени немного пользователей предпочитают IE6 остальным. Скорее всего на браузере IE6 "висят" большие компании (которые не могут обновить ОС из-за проблем с финансами или из-за скупердяйства вкупе с нежеланием пользователей обновить браузер), бюджетные организации (школы и, конечно, университеты)... однако мы отвлеклись.

Большинство веб-разработчиков осведомлены о возможности использовать PNG с альфа-каналами, однако из-за вышеописанных проблем (браузеры IE) это не кроссбраузерно.

Существует способ сделать элемент прозрачным, для этого нужно применить к тегу свойство opacity (непрозрачность) и фильтры к браузерам IE. Проблема состоит в том, что все потомки прозрачного элемента, также наследуют это свойство родителя, что не всегда желательно.

Зная все это, как мы сможем сделать прозрачные колонки, работающие во всех браузерах? Что делать, если мы используем свойство opacity, при этом контент должен быть непрозрачным на 100%?

Этого возможно добиться, манапулируя каскадными таблицами стилей (CSS). Мы должны создать родительский элемент и два элемента потомка. Первый будет с прозрачным фоном во всю высоту родительского элемента; второй элемент будет под контент. Таким образом, у нас получится прозрачный фон и непрозрачный контент.

Основные моменты:

HTML

<div id="column-1" class="container"> 
<div class="overlay"></div> 
<div class="content"> 
<h2>Content</h2> 
</div> 
</div>

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

CSS

 #column-1 {
 position: relative; 
 float: left; 
 width: 500px;
 } 

Не забудем задать прозрачность блоку 'overlay'. Обратите внимание на свойства top, left, bottom класса overlay, благодяря такому позиционированию непрозрачность видна под всем контентом.

CSS

  .overlay {
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0;
  width: 100%;
  background: #000;
  opacity: 0.65;
  -moz-opacity: 0.65; /* older Gecko-based browsers */ 
  filter:alpha(opacity=65); /* For IE6&7 */ } 

Хорошо. Теперь зададим фиксированную ширину блоку с контентом.

CSS

 #column-1 .content {
 width: 460px;
 padding: 20px;
 }

Чтобы закрепить контент над блоком 'overlay', необходимо объявление position: relative;.

CSS

  .content {
  position: relative; 
  }

CSS expression было представлено в IE 5.0, как метод записи выражений JavaScript непосредственно в свойствах CSS. Все остальные браузеры игнорируют expression. Благодаря этому множетсво IE багов может быть исправлено при помощи expression. Но при этом то, что вы напишите в expression нужно как-то записать и для других браузеров - что мы и сделали обозначив позиционирование блоку overlay. Для того чтобы обеспечить кроссбраузерность (включая IE6), включим следующий код (здесь мы назначаем высоту блоку .overlay исключительно для браузеров IE5-IE6):

javascript

/* хак для  IE6  */ 
* html #column-1 .overlay {
height: expression(document.getElementById("column-1").offsetHeight); 
} 

От себя добавлю: данный метод не работает в IE6 при отключенном javascript. Но об этом не стоит беспокоиться, так как доля пользователей отключающих js очень мала.

По материалам сайта bitsamppixels.com