Использование полупрозрачных элементов на странице является частым приёмом в веб-дизайне на сегодняшний день. Помимо этого, полупрозрачные элементы выглядят красиво и украшают страницу, если конечно ими не перебарщивать.
Чтобы сделать полупрозрачный элемент на фоне, например, какого-либо рисунка, можно использовать PNG-прозрачность, но данный способ не подходит для Интернет, поскольку изображения PNG-24 почти не сжимаются и имеют достаточно большой вес, а не все пользователи Рунета живут в центральной части и имеют высокоскоростной доступ в сеть. Как же быть в таком случае, чтобы угодить всем? Можно сделать взять фоновый рисунок, а затем наложить на него слой в графическом редакторе, слой сделать полупрозрачным, а затем сохранить полученное изображение в формате JPEG с приемлемой степенью сжатия. Этот метод подойдёт для небольшого блока фиксированных размеров, а если у нас большой блок с контентом, который ещё и динамически изменяется, то данный метод опять отпадает из-за большого веса изображений (при условии хорошо качества) и не возможности растягивать их. В таком случае у нас один выход, как и при использовании не прозрачного фона для блоков с динамически изменяющимися параметрами – полупрозрачность через использование каскадных таблиц стилей (CSS).
С помощью CSS прозрачность делает очень просто, достаточно к стилю элемента добавить всего 3 строки.
filter:alpha(opacity=100); /* Здесь непрозрачность указывается в процентах (указывается только числовое значение). */ -moz-opacity:1; /* Здесь в сотых долях от единицы. 1 = 100% не прозрачный блок. 0.5 (обязательно через точку – ни каких запятых) = 50% не прозрачности т.е. полу прозрачный. */ opacity: 1; /* Аналогично предыдущей строки */
Если честно, то достаточно только третей строки, но, к сожалению, не все браузеры поддерживают стандарты, поэтому для старых браузеров мы добавляем первые две строки. Первая для Internet Explorer, а вторая для старых версий Moziila, третья поддерживается всеми современными браузерами. Как видите, всё очень просто, но здесь есть одна хитрость – прозрачность передаётся «по наследству» от родительского контейнера, ко всем контейнерам внутри него (назовём их, дочерними).
«Унаследование» прозрачности вы можете наблюдать на картинке в начале статьи. К тому же, «унаследованную» прозрачность нельзя убрать, даже если установить для отдельного элемента 100% непрозрачность. Чтобы обмануть браузер, в прямом смысле, и сделать не прозрачный элемент внутри прозрачного, придётся создать 2 блока, один сделать полупрозрачным, а другой оставить «как есть», а затем с помощью CSS «заставить» браузер отобразить один поверх другого. Этот способ не слишком удобный, но есть ещё один – о нём я расскажу в следующем посте.
Теперь вы знаете, как управлять прозрачностью элементов с помощью каскадных таблиц. В одном из следующих уроков, я расскажу о позиционировании. Если вы не можете поставить один блок над другим, то ждите нового урока.
_________________________
Как хорошо, когда телефон это не только средство для общения – можно скачать бесплатные Java игры и поиграть в какие-нибудь игрушки, если застрял в пробке в общественном транспорте.