CSS и прозрачность элементов. - «Верстка»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
9-04-2010, 13:00
CSS и прозрачность элементов. - «Верстка»
Рейтинг:


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



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



Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не
была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3.


Старый подход



В старых версиях Firefox и Safari необходимо применять свойство следующим образом:


#myElement {
-khtml-opacity:	.5;
-moz-opacity:	0.5;
}


Свойство -khtml-opacity использовалось в старых версиях webkit-браузеров. Это свойство устарело и больше не нужно,
кроме случаев когда вы уверены, что значительная часть трафика вашего сайта исходит от посетителей, использующих Safari 1.x,
что, конечно, маловероятно.



В следующей строке используется свойство -moz-opacity, которое работало на очень ранних версиях движка Mozilla.
Firefox прекратил его поддержку в версии 0.9.


CSS прозрачность в Firefox, Safari, Chrome и Opera



Для большинства современных браузеров достаточно использовать следующее свойство:


#myElement {
opacity: .7;
}


В приведённом примере, элементу уствнавливается значение непрозрачности 70% (30% прозрачности). То есть если мы установим
значение в единицу, то элемент будет непрозрачным, и, соотвественно, установка этого значения в ноль, сделает его невидимым.



Свойством opacity обрабатывается 2 десятичных цифры. То есть значение ".01" будет отличаться от значения ".02",
хоть это и мало заметно.


CSS прозрачность для Internet Explorer



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


#myElement {
filter: alpha(opacity=40);
}


В этом примере используется свойство filter, которое работает в версиях 6-8, однако для версий 6 и 7 есть одно
ограничение: у элемента свойство hasLayout должно быть установлено в true. Это свойство присутствует
только в IE и подробнее о нём можно почитать, например, на Хабре.



Ещё один способ установить прозрачность используя CSS в IE8 - это использовать следующий подход (обратите внимание на комментарии):


#myElement {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);		/* работает в IE6, IE7 и IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";	/* только для IE8 */
}


Первая строка будет работать во всех сейчас используемых версиях, вторая же - только в IE8. Обратите внимание, что во
второй строке используется префикс -ms-, а значение взято в кавычки.


Установка и изменение CSS прозрачности с помощью javascript или jQuery



Вы можете использовать следующий код для установки прозрачности:


document.getElementById("myElement").style.opacity = ".4"; // для большинства браузеров
document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE


Конечно же, в этом случае гораздо проще использовать jQuery, кроме того, работать будет во всех браузерах:


$("#myElement").css({ opacity: .4 }); // работает во всех браузерах

Вы можете анимировать это свойство:


$("#myElement").animate({
opacity: .4
}, 1000, function() {
// Анимация завершена; этот код работает во всех браузерах.
});

Функция RGBA



В CSS3 планируется поддержка альфа-канала с помощью функции rgba. Эта функция работает в Firefox 3+, Opera 10.1+,
Chrome 2+, Safari 3.1+. Используется она так:


#rgba {
background: rgba(98, 135, 167, .4);
}

В этом случае последний параметр указывает на уровень непрозрачности.


Функция HSLA



Подобно предыдущей функции, CSS3 также позволяет задать полупрозрачный цвет с помощью функции HSLA, параметры которой
означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha).


#hsla {
background: hsla(207, 38%, 47%, .4);
}


Подробнее об этой функции можно почитать на сайте W3.org.



Важный момент при использовании функций rgba и hsla - это то, что установка прозрачности не применяется к
дочерним элементам, тогда как использование свойства opacity - наследуется.


Прозрачность в CSS довольно модная техника в последнее время, которая вызывает трудности в кроссбраузерной реализации. До сих пор не существует универсального метода, который бы позволял реализовать прозрачность для всех браузеров. Однако в последнее время ситуация заметно улучшилась. В этой статье подробно рассмотрены существующие подходы, а также приведены примеры кода и пояснения, которые помогут вам добиться одинакового результата во всех браузерах с минимальными трудозатратами. Стоит упомянуть следующий момент: несмотря на то что прозрачность используется вот уже в течение нескольких лет, она никогда не была частью стандарта CSS. Это нестандартное свойство, которое должно стать частью спецификации CSS3. Старый подход В старых версиях Firefox и Safari необходимо применять свойство следующим образом:

Теги: CSS, всех прозрачность свойство работает использовать

Просмотров: 1 146
Комментариев: 0:   9-04-2010, 13:00
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме:
Комментарии для сайта Cackle