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

Рассмотрим сначала всевозможные эффекты прозрачности, которые будут видны только пользователям Internet Explorer.
К примеру, есть у вас некая картинка, которая содержится в вашей html странице. Данная картинка без участия каких-либо графических пакетов, может быть видоизменена используя эффект прозрачности. Internet Explorer обладает самыми широкими возможностями в этой области. Рассмотрим все возможные примеры.
 

Для началa pазберёмся, как правильно внедрить код css в html страницу, чтобы можно было наблюдать требуемый эффект. Если вы хотите применить эффект к некоторым определённым картинкам (на самом деле можно сделать прозрачными не только картинки, но и фон), то лучше всего внедрить стиль в тэг картинки.

<!--code1-->

<!--ecode1--><img border="0" src="src/logo.png" width="100" height="97" style="filter:alpha(opacity=30);" /><!--code2-->

<!--ecode2-->

opacity – это и есть тот самый параметр который создаёт эффект прозрачности.
В приведённом примере, который справедлив лишь для IE, opacity может принимать значения от 0 до 100. Если значение близко к нулю, то картинка максимально прозрачна, и наоборот при увеличение значения данного параметра картинка приобретает исходный вид.

IE
Итак для создания эффекта прозрачности в IE вы можете использовать следующие css коды:

<!--QuoteBegin-->

<!--QuoteEBegin-->filter:alpha(opacity=30);
/* синтаксис IE4.0*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
/* синтаксис IE5.5+ (является предпочтительным) */<!--QuoteEnd-->

<!--QuoteEEnd-->

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

<!--QuoteBegin-->

<!--QuoteEBegin-->filter:alpha(opacity=80, style=0);
filter:alpha(opacity=80, style=1);
filter:alpha(opacity=80, style=2);
filter:alpha(opacity=80, style=3);<!--QuoteEnd-->

<!--QuoteEEnd-->

В зависимости от параметра style можно добиться различных градиентных осветлений.

Рассмотрим возможность осветления рисунка слева на право.

<!--QuoteBegin-->

<!--QuoteEBegin-->filter: alpha(startx=0, style=1);
filter: alpha(startx=20, style=1);
filter: alpha(startx=60, style=1);
filter: alpha(startx=100, style=1);<!--QuoteEnd-->

<!--QuoteEEnd-->

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

Возможен ещё один способ осветления, но с более резкими границами.

<!--QuoteBegin-->

<!--QuoteEBegin-->filter: alpha(finishx=0, style=1);
filter: alpha(finishx=20, style=1);
filter: alpha(finishx=60, style=1);
filter: alpha(finishx=100, style=1);<!--QuoteEnd-->

<!--QuoteEEnd-->

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

И наконец, пример правостороннего освещения.

<!--QuoteBegin-->

<!--QuoteEBegin-->filter: alpha(opacity=0, finishopacity=10, style=1);
filter: alpha(opacity=0, finishopacity=20, style=1);
filter: alpha(opacity=0, finishopacity=60, style=1);
filter: alpha(opacity=0, finishopacity=100, style=1);<!--QuoteEnd-->

<!--QuoteEEnd-->

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

Opera
Данный браузер к сожалению не поддерживает того же обилия, как IE, но кое что он всё таки может. Эффект прозрачности вы так же можете получить но при этом придётся использовать уже другой код css.

<!--QuoteBegin-->

<!--QuoteEBegin-->opacity: 0.5;<!--QuoteEnd-->

<!--QuoteEEnd-->

Данный код так же сойдёт и для Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9.
В зависимости от значения opacity (min=0, max=1) можно наблюдать различную степень осветлённости. Если значение близко к нулю, то картинка максимально прозрачна, и, наоборот, при увеличение значения данного параметра картинка приобретает исходный вид.

Konqueror 3.1, Safari 1.1

Получение эффекта прозрачности в этих браузерах можно следующим путём.

<!--QuoteBegin-->

<!--QuoteEBegin-->-khtml-opacity: 0.5;<!--QuoteEnd-->

<!--QuoteEEnd-->

В зависимости от значения opacity (min=0, max=1) можно наблюдать различную степень осветлённости. Если значение близко к нулю, то картинка максимально прозрачна, и, наоборот, при увеличение значения данного параметра картинка приобретает исходный вид.

Mozilla
Как и opera, мозилла не слишком богата на эффекты. Получить прозрачность мы можем следующим образом.

<!--QuoteBegin-->

<!--QuoteEBegin-->-moz-opacity: 0.5;<!--QuoteEnd-->

<!--QuoteEEnd-->

В зависимости от значения -moz-opacity: (min=0, max=1) можно наблюдать различную степень осветлённости. Если значение близко к нулю, то картинка максимально прозрачна, и, наоборот, при увеличение значения данного параметра картинка приобретает исходный вид.

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

<!--QuoteBegin-->

<!--QuoteEBegin-->style=
"filter: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 */ "<!--QuoteEnd-->

<!--QuoteEEnd-->

Тем самым вы осуществите эффект прозрачности картинки на половину.

Источник: overdoze.ru

Font-size от xx-small до xx-large

05-01-2010

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее Комментарии: 4 Кол. просмотров: общее - 4473 сегодня - 1

История про CSS (часть II)

05-01-2010

Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее Комментарии: 0 Кол. просмотров: общее - 4696 сегодня - 1

Трюк с курсором

05-01-2010

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее Комментарии: 0 Кол. просмотров: общее - 4488 сегодня - 0

Необычное применение CSS: реализация эффекта rollover c помощью CSS

05-01-2010

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее Комментарии: 3 Кол. просмотров: общее - 4450 сегодня - 0

Сокращенные команды в CSS

05-01-2010

Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее Комментарии: 0 Кол. просмотров: общее - 5198 сегодня - 1