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

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

1. На своем блоге опубликовать перевод (можно вольный, с комментариями и дополнениями) статьи из представляемого ресурса.

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

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

4. Сроки эстафеты не устанавливаются; обязательно найдется тот, кто прекратит эту вакханалию.

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

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

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

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

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

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

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

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

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

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

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

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

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

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-дизайне.

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

Скажем прощай oveflow: hidden!

Фантастическая CSS3 лайтбокс галерея с помощью jQuery