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

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

 

Ну для начала уясним что документ у нас имеет не только одну плоскость монитора - он вообще говоря 3х мерный, об этом я упоминал в статье "Z-index". Соответственно даже совершенно прозрачный слой, окажись он на верху стека отображения, перекроет доступ к остальным элементам. В этом одно из главных применений прозрачных блоков. Несомтря на то, что обычно используется эффект затенения, полностью прозрачный слой будет работать точно так же. Так, например, работает очень много популярных фото-галерей, организуется затененный слой в котором отбражаются фото, и элементы управления ими. Все остальное пространство страницы оказывается "накрыто" (полу)прозрачным слоем, закрывающим доступ ко всем другим элементам на странице. Т.е. уйти со страницы, нажав на ней какую-либо ссылку не получится - весь текст закрыт подложкой. Чтобы вернуться к телу сайта обычно предусматривают элементы управления для закрытия галереи, формы входа и т.п. Управляют показом/скрытием прозрачных блоков с помощью javascript. Здесь к сожалению альтернативы ему нет. Без его использования пользователь либо вообще не увидит прозрачного блока, либо не сможет его закрыть, не уйдя с текущей страницы. Отмечу, что используются для этого свойства visibility или display.

Так как, собственно организуется прозрачность в html? Настройка прозрачности элементов вообще говоря не входит в спецификацию CSS, потому приходится использовать сразу несколько инструкций для ее создания. Одни браузеры (ie) будут работать с одним вариантом, вторые с другим. Ie использует встроенную функциональность filter, другие браузеры используют свойство "opacity", которое задается в интервале от 0(полностью прозрачный объект) до 1(полная непрозрачность). Для примера в случае с 30% прозрачностью следует писать "opacity:0.30; filter:alpha(opacity=30);". Свойства как видно из примера схожи - только в первом случае используется число от 0 до 1, во втором процентная запись. Пример такого блока:

<div style="position:absolute; top: 0; left: 0; background-color:rgb(18, 114, 214); width:100%;
 opacity:0.30; filter:alpha(opacity=30); visibility:hidden; z-index:1;" id="VideoFrame"></div>

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

Вот, собственно и весь секрет прозрачности в html. Мы используем z-index и opacity для получения эффекта прозрачности. А уж применений этому можно найти множество - здесь все ограничено только вашей фантазией.

08.02.2013 Отвечу на вопросы, заданные в комментарии, а именно о том как сделать на прозрачном блоке непрозрачный. Здесь все просто, не зря я указывал в материале ссылку на материал про z-index, нужно создать еще один блок, с большим z-index чем у прозрачного. Вот сейчас, за несколько минут, набросал пример. Блоки:

<div style="position:absolute; top: 0; left: 0; background-color:rgb(18, 114, 214); width:100%; height:100%;
 opacity:0.30; filter:alpha(opacity=30); visibility:hidden; z-index:1;" id="VideoFrame"></div>
<div id="VideoFrame2" style="position:absolute; top: 25%; left: 25%; background-color: white; width:50%; height:50%;
 opacity:0.99; filter:alpha(opacity=99); visibility:hidden; z-index:2;" onclick="javascript:HideForm();">
 Здесь пишем текст
 </div>

И функции на javascript

<script type="text/javascript">
function ShowForm() {
document.getElementById("VideoFrame").style.visibility="visible";
document.getElementById("VideoFrame2").style.visibility="visible";
}
function HideForm() {
document.getElementById("VideoFrame").style.visibility="hidden";
document.getElementById("VideoFrame2").style.visibility="hidden";
}
</script>

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