CSS прозрачность – просто о важном


Оглавление (нажмите, чтобы открыть):

Непрозрачный блок внутри прозрачного

Если блок прозрачный, то как другой блок, который находится внутри первого блока, сделать непрозрачным?
Песочница: http://jsfiddle.net/vV46V/

21.02.2014, 17:12

непрозрачный в внутри прозрачного
Всем привет возможно как нибудь сделать прозрачный фон блока, а в нутри него непрозрачные к.

Непрозрачный текст в Opera
Доброго времени суток! Во всех браузерах работает нормально, а в опере фон у текста непрозрачный.

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

Полупрозрачный фон, но непрозрачный текст
Помогите сделать полупрозрачный фон, но что бы текст был не прозрачным. Вот код который сейчас.

СSS Прозрачность

Свойство opacity определяет непрозрачность / прозрачность элемента.

Прозрачное изображение

Свойство opacity может принимать значение от 0.0 — 1.0. Чем меньше значение, тем прозрачнее:

opacity 1
(по умолчаню)

Примечание: IE8 и более раннее использование filter:alpha(opacity=x) . x может принимать значение от 0 до 100 . Чем значение меньше, тем элемент более прозрачный.

Пример

Прозрачный эффект при наведении

Свойство opacity часто используется вместе с селектором :hover для изменения непрозрачности при наведении мыши:

Пример

img <
opacity: 0.5;
filter: alpha(opacity=50); /* Для IE8 и более ранних версий */
>

img:hover <
opacity: 1.0;
filter: alpha(opacity=100); /* Для IE8 и более ранних версий */
>

Объяснение примера

Первый блок CSS похож на код в Примере 1. Кроме того, мы добавили, что должно происходить, когда пользователь наводит курсор на одно из изображений. В этом случае мы хотим, чтобы изображение не было прозрачным, когда пользователь нависает над ним. CSS для этого примера opacity:1; .

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

Пример обратного эффекта наведения:

Пример

Прозрачный бокс

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

CSS прозрачность – просто о важном

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Функция RGBA

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

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

Функция HSLA

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

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

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

Свойство CSS opacity

Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.

Синтаксис CSS opacity

Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 — означает, что прозрачность отсутствует (по умолчанию).

Примеры: как прозрачность в html


Пример №1. Прозрачное изображение в html

Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5

Мастер Йода рекомендует:  Какие перспективы у PHP, стоит ли его учить и писать на нём

На странице преобразуется в следующее

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

На странице преобразуется в следующее

Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

Блог Vaden Pro

В статье описывается особенность применения свойства, которое определяет прозрачность элементов на странице. Тут рассказывается о потенциальных проблемах и способах их решения.

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

Теория и практика

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

В браузере будет примерно такая картинка:

Попрактиковались? Теперь подойдем ближе к теоретической стороне рассматриваемого вопроса.

Свойство opacity, которое отвечает за эффект CSS прозрачности, было создано на основе спецификации CSS3. В его значении указывается степень непрозрачности элемента в десятичных долях. Говоря более понятным языком, запись значения 0.9 для изучаемого свойства в нашем примере означает, что элемент, которому присвоено свойство, не прозрачен на 90%. Соответственно, если будет указан в значении 0, то наш блок станет полностью прозрачным и не будет заметен. Не смотря на это, он не исчезает со страницы, так как остается зарезервированное место для него среди элементов.

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

    filter:prog >К нежелательным эффектам использования этих вспомогательных свойств относится их неспособность пройти проверку на валидацию. Кстати само свойство opacity без проблем проходит проверку только в CSS Level 3 (так как свойство было включено именно в эту спецификацию).

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

Это свойство должно относиться к стилю просвечиваемого блока.

На заметку

При назначении родительскому блоку прозрачности все его дочерние элементы становится тоже полупрозрачными, что приводит к ухудшению читабельности текста этого контейнера. Чтобы избежать этого нежелательного эффекта требуется просвечивать только фон. Для этого создается отдельный контейнер для фона, и отдельный – для контента. Не забываем установить уровень наложения контента с помощью свойства z-index, в противном случае требуемый эффект достигнут не будет.

Вот так будет выглядеть наше решение в браузере

Стоит отметить, что прозрачность была увеличена специально, чтобы подчеркнуть тот факт, что контент не подсвечивается.

Затемнение фона

Иногда дизайнер требует затемнить фон страницы. Данная задача абсолютно аналогична предыдущему случаю. Для ее реализации просто необходимо взять черный фон и слегка его осветлить.


Не вижу смысла нагружать Вас новым кодом и предлагаю работать с предыдущим. В прошлой записи меняем только цвет фона с синего на черный и цвет шрифта на красный, чтобы сохранялся контраст. Да, еще думаю, для более эффективного затемнения повысим уровень непрозрачности до 0.7. Теперь, чтобы создать эффект затемнения, контейнер с черным фоном должен накладываться на контент, что также достигается через z-index.

Наш предыдущий код принимает вид (HTML оставляем без изменений):

Свойство css «прозрачность» — простой способ сделать дизайн сайта интереснее

Сегодня создание дизайна сайта становится настоящим искусством. Это не просто набор элементов страницы определенного цвета и размера, шрифты разных стилей и тематические рисунки. Для того чтобы сделать сайт непохожим на другие, привлечь внимание посетителей и направить его на те или иные элементы, используется огромное количество способов и инструментов. Среди них имеется очень популярное свойство css — прозрачность. Эта техника довольно модная и эффектная, а потому применяется часто. Придать прозрачность можно различным объектам страницы сайта — тексту, целому блоку или картинке, например. Достигается она также разными способами. Рассмотрим их ниже.

Параметры задания прозрачности элементов

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

  • opacity;
  • filter;
  • PNG-изображение в качестве фона.

Значения свойства css «прозрачность» изменяются следующим образом: чем больше цифра, тем ниже уровень прозрачности элемента. В opacity она варьируется от 0 до 1, в filter — от 10 до 100. Причем последний используется для браузера Interet Explorer, а для всех остальных применяется свойство opacity.

Прозрачность изображения (изменяющаяся)

Начнем с варианта, когда прозрачность будет проявляться при наведении на элемент курсора мышки.

Рассмотрим, как задавать прозрачность картинки. CSS предлагает два варианта. Для этого необходимо прописать ее непосредственно в коде html-документа следующим образом:

      1. Указываем путь к изображению.
      2. Определяем параметры прозрачности при наведении курсора и нет. Для этого используем свойства onmouseover и onmouseout, в которых прописываем значения opacity и filter.

Эти же характеристики можно прописать в css-документе, а в исходном коде добавить лишь ссылку на него. Результаты получатся одинаковые.

Прозрачность текста и блоков страницы

Что касается текста или блока (прозрачность div), css предлагает воспользоваться вариантом, аналогичным созданию прозрачности изображения, то есть использовать подключенный css-файл, в котором будут задаваться нужные параметры. Можно пойти и более простым путем. При задании стилей блока div style или текста p прописать следующий html-код для элементов onmouseover и onmouseout. Оба варианта работают и дают нужный результат.

Прозрачность постоянная

В некоторых случаях прозрачность объекта, элемента дизайна или текста требуется задать на постоянной основе. В данной ситуации решение еще проще, чем при наведении курсора мыши.

Для элемента css прозрачность будет задаваться следующим кодом. В блоке div style прописываем значения для background (например, #ff8800), opacity (н-р, 0.5), а также ширину (width) и отступ (padding).

Для картинки в код вносим значения opacity и filter, а также указываем путь к изображению.

RGBA-метод

Существуют и другие варианты использования данного свойства css: прозрачность можно применить к фоновому цвету какого-либо элемента дизайна. Для этого используется метод RGBA. Первые три буквы означают основные цвета (красный, целеный, синий), а последняя — alpha, которая и задает уровень прозрачности. Используя RGBA-формат, прописываем степень прозрачности, указывая ее в последней цифре. Например, так: background:rgba(240,2,33,0.4035).

Заключение

Таким образом, используя в ходе работы над дизайном сайта простое, но эффектное свойство css «прозрачность», можно сделать его элементы интереснее и заметнее, приложив минимум усилий. Описанные варианты задания характеристик прозрачности вам в этом помогут.

Изменение прозрачности отдельного участка блока

Здравствуйте. Подскажите, как реализовать нечто подобное. См. картинку. При наведении на красный блок, вертикальная полоса под ним меняет прозрачность. Проблема в том, что полупрозрачный фон занимает 100% ширины окна. Благодарю за советы.


2 ответа 2

В css можно прописывать background для блока в формате RGBA , то есть учитывать не только цвет background , но и его прозрачность. И эта прозрачность не будет влиять на содержимое в отличии от параметра opacity .

«Да» и «Нет»: применение прозрачности в веб-дизайне

Дата публикации: 2013-02-01

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

Веб-дизайн с прозрачностью может оказаться великолепным, и в то же время иметь подводные камни. Прозрачность – это эффект, создаваемый, когда цветная область, текст или изображение «истончается», или как будто «промокает», так что цвет разбавляется и проявляется то, что скрыто под ним.

При правильном применении эффект может оказаться ошеломляющим – при этом создавая отличное место для текста или привлекая внимание к определенной части изображения.

Однако при использовании прозрачности дизайнеру следует быть осторожным. Эффект может оказаться сложным для восприятия, и проблема здесь – читаемость текста. Кроме того, прозрачные блоки и текст на неправильных уровнях могут отвлекать от общей идеи.

Далее следует набор «да» и «нет» – своеобразных «за» и «против» – с примерами сайтов, где великолепно применяется прозрачность.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

«Да»: применение прозрачности для создания контраста

Преимущество №1 использования прозрачности как дизайнерского приема – создание контраста. Эффект дает дизайнеру возможность ввести фокусную точку с цветовым импульсом, крупным текстом поверх изображения или объемный изменчивый цветной экран.

Прозрачность также можно применять для выделения текста на таком фоне, который неспособен показать его лучшим образом.

Особенно важно при работе с прозрачностью обдумать контраст. Прозрачность будет хорошо работать только с удобочитаемыми изображением (или фоном) и текстом. При обдумывании этого эффекта спросите себя: Станет ли таким образом текст/изображение более понятным для пользователей?

«Нет»: перекрытию существенных деталей изображения

Прозрачность не должна закрывать те части фона или изображения, которые важны для передачи основной идеи. При размещении границ прозрачности отчетливо осознавайте, что «потеряется».

«Да»: использованию разных уровней прозрачности

Не существует идеального уровня прозрачности. Для некоторых проектов отлично подходит прозрачность в 80 процентов; для других лучше всего будет 15 процентов. Для каждого проекта «поиграйте» с различными уровнями прозрачности.

«Нет»: мыслям о том, что прозрачность сделает текст удобочитаемым

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

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

«Да»: использованию прозрачности в небольших областях

Прозрачность предназначена не только для основной части вашего сайта. Этот эффект отлично смотрится в маленьких пространствах.

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

«Нет»: размещению прозрачности поверх сильно контрастирующих изображений

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!


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

«Да»: применению прозрачности как искусства

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

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

«Нет»: применению прозрачности в качестве украшения

Прозрачность – не тот эффект, который можно добавить потом, если дизайн вдруг покажется вам скучным. Его применение в качестве украшения – вернейший способ оказаться в дизайнерском плачевном состоянии.

Использование прозрачности должно быть спланировано и обдумано заранее. Это не такой простой эффект, как выделение шрифта и, будучи некачественно сделанным, смотрится «сыро» и непрофессионально.

«Да»: применению прозрачности в фоне

Прозрачность – не только для элементов переднего плана дизайна, этот эффект также применим к фоновым изображениям. Самые лучшие прозрачные элементы – тонкие, едва различимые.

Некоторые прозрачные элементы могут лежать между слоями изображения. На сайте Тони Честера (Tony Chester) для создания многомерного дизайна, например, используется великолепный набор слоистых техник с применением прозрачности.

«Нет»: одновременному использованию слишком большого количества эффектов прозрачности

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

«Да»: применению прозрачности со статичными и/или чередующимися изображениями

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

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

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

Заключение

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

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

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

Автор: Carrie Cousins

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

CSS прозрачность (css opacity, javascript opacity)

Эффект прозрачности — это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим. Вдобавок рассмотрим готовое решение постепенного изменения прозрачности с помощью javascript.

CSS opacity (CSS прозрачность)


W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы.

Пример (задана прозрачность 0.2, 0.5 и 1.0):

Нравится? Да? Так что самое время подпортить настроение. Понятное дело, что разные браузеры по-разному реализуют данное свойство: кто вообще не реализует, кто реализует, используя свое собственное название для данного свойства, а кто фильтры использует.

Браузеры поддерживающие CSS3 opacity

Понимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.

Для установки прозрачности через скрипт используем: object.style.opacity

Mozilla 1.6 и ниже, Firefox 0.8

Старые Mozilla и Firefox 0.8 используют своё название данного свойства: -moz-opacity

Для установки прозрачности через скрипт используем: object.style.MozOpacity

Safari 1.1, Konqueror 3.1

Данные товарищи, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity

Для установки прозрачности через скрипт используем: object.style.KhtmlOpacity

Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел поддержку CSS3 opacity.

В январе 2003 года корпорация Apple представила новый браузер для Mac OS X, основанный на движке KHTML, Safari. Благодаря лицензии, на условиях которой распространяется KHTML, все изменения, вносимые в него разработчиками Apple, публикуются в виде патчей, которые, после пересмотра, добавляются в основную ветку KHTML.

Причиной по которой Konqueror утратил возможность реализации эффекта прозрачности как раз и заключается во внесение в ядро KHTML патчей от Safari, т.к. Safari использует возможности присутствующие в Mac OS X, но которых нет в KDE.

Конечно рано или поздно эта ситуация будет исправлена, но на данный момент в последней версии 3.5 ситуация остается прежней.

Internet Explorer 5.5+

Данный браузер, начиная с версии 5.5 и включая последнюю на сегодняшний день версию Internet Explorer 7, реализует прозрачность через Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же отмечу, что фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.

Пример (устанавливаем прозрачность на половину):

Для установки прозрачности через скрипт используем: object.style.filter = «prog >

CSS opacity симбиоз

Под симбиозом я подразумеваю объединение разных стилей для разных браузеров в одном CSS правиле для получения нужного эффекта, т.е. для реализации кросс-браузерности.

По сути, нужными являются первое и последнее правила, для IE5.5+ и браузеров понимающих CSS3 opacity, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам).

Javascript opacity симбиоз

Теперь попробуем установить прозрачность через скрипт с учетом особенностей разных браузеров описанных выше.

Функция принимает два аргумента: sElemId — id элемента, nOpacity — вещественное число от 0.0 до 1.0 задающее прозрачность в стиле CSS3 opacity.

Думаю, что стоит пояснить часть кода функции setElementOpacity относящуюся к IE.

Может возникнуть вопрос, а почему бы ни устанавливать прозрачность путем присваивания (=) свойству elem.style.filter = ‘. ‘; ? Зачем используется «+=» для добавления в конец строки свойства filter ? Ответ прост, для того чтобы не «затереть» другие фильтры. Но при этом, если добавить фильтр таким образом второй раз, то он не изменит ранее установленные значения этого фильтра, а будет просто добавлен в конец строки свойства, что не корректно. Поэтому, если фильтр уже установлен, то нужно им манипулировать через коллекцию примененных к элементу фильтров: elem.filters (но учтите, если фильтр ещё не был назначен элементу, то управлять им через данную коллекцию невозможно). Доступ к элементам коллекции возможен либо по имени фильтра, либо по индексу. Однако фильтр может быть задан в двух стилях, в коротком стиле IE4, или в стиле IE5.5+, что и учтено в коде.

Плавное изменение прозрачности элемента


Готовое решение. Используем библиотеку opacity.js

Основные шаги:

  1. Подключаем библиотеку функций;
  2. Определяем правила используя метод fadeOpacity.addRule();
  3. Вызываем метод fadeOpacity() для изменения прозрачности от начального значения к конечному, или fadeOpacity.back() для возврата к начальному значению уровня прозрачности.

Разжевываем

Как подключать библиотеку, думаю, видно из примера выше. Теперь стоит пояснить определение правил. До того как вызывать методы плавного изменения прозрачности, нужно определить правила, по которым будет выполняться процесс: нужно определить начальную и конечную прозрачность, а также, при желании, указать параметр задержки, который влияет на скорость процесса смены прозрачности.

Правила определяются с помощью метода fadeOpacity.addRule

Синтаксис: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Аргументы:

  • sRuleName — имя правила, задаётся произвольно;
  • nStartOpacity и nFinishOpacity — начальная и конечная прозрачность, числа в диапазоне от 0.0 до 1.0 ;
  • nDelay — задержка в миллисекундах (необязательный аргумент, по умолчанию равен 30).

Сам вызов фейдинга прозрачности делаем через методы fadeOpacity(sElemId, sRuleName), где sElemId это id элемента, а sRuleName имя правила. Для возврата прозрачности в исходное состояние используется метод fadeOpacity.back(sElemId).

:hover для простой смены прозрачности

Ещё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover, который позволяет определить стили для элемента, в момент наведения на него мыши.

Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор :hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено).

Прозрачность и зазубренный текст в IE

С выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания. Касательно нашего случая, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст — bold, например, двоится, могут так же появляться различные артефакты, например, в виде чёрточек, зазубренного текста). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен.

CSS прозрачность

Задача

Сделать элемент HTML (например выпадающее меню) полупрозрачным.

Выпадающее меню с полупрозрачностью
(opacity=0.5) Выпадающее меню без прозрачности

Решение

В стилях для нужного элемента задаем:

Теория

W3C в своей рекомендации CSS3 задает свойство opacity для применения эффекта прозрачности элементов. Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

К сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

    filter:prog >filter, -moz-opacity, -khtml-opacity валидации не проходят. Opacity — только CSS Level 3.

Возможные проблемы

Не работает в IE. Причина — не указаны width и height. Или можно добавить zoom: 1

Делаем полупрозрачный фон

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

Мастер Йода рекомендует:  Всё, что необходимо знать про паблик ВКонтакте
Добавить комментарий