Медная поляна

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

  1. На своем блоге опубликовать перевод (можно вольный, с комментариями и дополнениями) статьи из представляемого ресурса.
  2. Переводы как и их источники не должны повторяться, чтобы обеспечить охват и разнообразие информации.
  3. Ссылочно упомянуть блогера, от которого получена благая весть и, по возможности, передать эстафетную палочку дальше.
  4. Сроки эстафеты не устанавливаются; обязательно найдется тот, кто прекратит эту вакханалию.

Первоисточником данного поста послужила одна из заметок Дрю МакЛеллана на коллективно-календарном блоге 24ways. Поехали!

Что такое RGBA-цвет? #

Не открою секрета если скажу, что необходимый цветовой оттенок создается в CSS путем смешивания в необходимых пропорциях красного зеленого и синего. Существует, правда, один нюанс — какой бы цвет мы не выбрали, он всегда будет сплошным и непрозрачным.

Плоские, сплошные RGB-цвета

CSS3 предлагает пару новых способов задания цвета, один из которых — использование цветовой модели RGBA. Буква «A» в аббревиатуре означает «Альфа»; ее значение отвечает за величину прозрачности цвета. С помощью данной модели мы можем установить не только необходимое сочетание красного, зеленого и синего, но также определить, насколько цвет «просвечивает». Что-то подобное можно наблюдать при работе со слоями в Photoshop.

Для чего тогда свойство оpacity? #

Дело в том, что определение прозрачности для цвета отличается от настройки прозрачности для элемента, заданное с помощью css-свойства opacity . Давайте посмотрим на примере.

У нас имеется заголовок h1 c определенными цветами для текста и фона, находящийся на странице с фоновым рисунком.

Непрозрачный заголовок

h1 {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

Путем установки свойства opacity, можно применить прозрачность ко всему элементу в целом:

Заголовок с прозрачностью в 50%

h1 {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    opacity: 0.5;
}

RGBA-модель предоставляет нам более гибкую возможность — проконтролировать лишь цветовую прозрачность, а не весь элемент. Например, можно установить прозрачность только для фонового цвета:

50% прозрачность только для фонового цвета

h1 {
    color: rgb(0, 0, 0);
    background-color: rgba(255, 255, 255, 0.5);
}

Или оставить фон без изменений и присвоить прозрачность только тексту:

50% прозрачность только для цвета текста (переднего плана)

h1 {
    color: rgba(0, 0, 0, 0.5);
    background-color: rgb(255, 255, 255);
}

Вероятно, использование синтаксиса rgb () для определения цвета менее распространено чем шестнадцатеричная запись (вроде #fff ), однако, в данном случае это железная необходимость, поскольку невозможно записать RGBA-значение в шестнадцатеричной нотации. Поэтому, задаем rgba () именно так:

color: rgba(255, 255, 255, 0.5);

Так же как в rgb () , первые три значения отвечают за сочетание красного, зеленого и синего. Они могут принимать как целочисленные значения в диапазоне 0–255 так и процентные соотношения в промежутке от 0 до 100 %. Четвертое значение определяет степень прозрачности в диапазоне от 0 (абсолютно прозрачный) до 1 (совершенно непрозрачный).

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

Поддержка в браузерах #

Большинство современных браузеров (Firefox, Safari, Opera, Google Chrome) поддерживают RGBA-цвета, но не Internet Explorer.

Ничего не остается, как указывать RGBA-цвета для браузеров, которые их поддерживают, а для остальных придумать свои «костыли».

CSS-парсинг работает в браузерах так, что если при разборе правил встретиться какое-либо неизвестное значение, оно будет проигнорировано. Воспользуемся этим знанием, чтобы отдавать для «непонимающих» браузеров обычный непрозрачный цвет. Для этого достаточно первым объявлением указать цвет в формате RGB, а вторым задать цветовой оттенок в формате RGBA — для браузеров поддерживающих данную цветовую модель.

h1 {
    color: rgb(127, 127, 127);
    color: rgba(0, 0, 0, 0.5);
}

В случаях, когда вы хотите применить прозрачность для свойства background-color можно прибегнуть к использованию PNG-рисунка с альфа-каналом, чтобы добиться точно такого же эффекта. Конечно, это более затратный способ, в отличие от «чистого» CSS, поскольку придется создавать свой PNG для каждого уровня прозрачности, но на безрыбье и рак рыба.

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

h1 {
    background: transparent url(black50.png);
    background: rgba(0, 0, 0, 0.5) none;
}

Следует отметить, что такая конструкция работоспособна, поскольку мы используем сокращенную форму записи background , позволяющую одновременно установить и фоновый цвет и фоновое изображение. Браузеры, столкнувшиеся с неизвестным значением rgba () целиком проигнорируют второю строку и будут обрабатывать первое объявление.

Кое-что еще #

Главное преимущество RGBA — возможность создания различных дизайнерских решений без использования рисунков. Выгода здесь не только в более легких (как следствие — более быстрых) страницах, но и в выигрыше во времени: сайты с использование упомянутой технологии проще создавать и поддерживать. Под влиянием Javascript или в ответ на пользовательские действия значения в CSS могут с легкостью изменяться. Рисунки в нашем случае могут затруднить такие преобразования.

Изменение прозрачности при наведении курсора

div {
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(142, 213, 87, 0.3);
}    
div:hover {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(142, 213, 87, 0.6);
}

Разумное применение прозрачности для рамочных цветов поможет выглядеть некоторым элементам на странице более органично:

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

div {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border: 10px solid rgba(255, 255, 255, 0.3);
}

В заключение #

Как это часто бывает, передовые нововведения в области CSS поддерживают передовые браузеры. Будем надеяться, что парни из Редмонда, кое-что осознают в жизни и присоединятся к большинству.

Передаю эстафету Ольге и Евгению, автору блога Проблемы и решения в Web-дизайне.

Постепенно буду подбивать список опубликованных материалов:

4 комментария

Sam

IE умеет:

div {
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#99FFFFFF); /*AARRGGBB*/
 zoom: 1;
}

Ого! Да, я недавно читал об этом решении у Вадима Макишвили. Не думал, что его предложат так быстро. Спасибо. Возможно, добавлю в заметку.

Artqookie

Я обычно слежу за каждым байтом в CSS, а rgb способ задания цвета более громоздок, чем в шестнадцатеричный. Однако теперь есть оправданное применение rgba записи. Спасибо!

Владимир

Спасибо,Вам за статью. Буду знать.