Привет! CSS3 предоставляет нам все больше возможностей для более гибкой верстки веб-сайтов, и сегодня хочу рассказать Вам о новых возможностях задания цвета фона и его прозрачности.
Для задания цвета фона, нам нужно выставить значения для трех основных цветов: красного (r - red), зеленого (g - green) и синего (b - blue). Но так, как мы заговорили о RGBA, то помимо трех RGB-цветов, мы еще выставим прозрачность (a - alpha).
Значение для всех цветов выставляем в числах от 0 до 255, а значение прозрачности выставляем в пределах от 0.0 (0%) до 1.0 (100%).
Если Вы не знаете, где взять значения всех 3 цветов, тогда в Photoshop-e Вам нужно зайти в панель выбора цвета (Color Picker), там отображаются все значения цветов.
Кстати, хаки под популярные браузеры писать не надо, на данный момент это свойство воспринимают все последние версии популярных браузеров, кроме Ослика IE (даже версии 8).
Код будет выглядить следующим образом:
.mycontainer1 { background:rgba(129, 13, 193, 0.1); }
Значение для красного цвета я установил - "129", для зеленого - "13", для синего - "193", ну, и, соответственно, выставил непрозрачность (выделите пустое место курсором ) - "0.1" (10%), то есть, фон практически прозрачный.
Ниже я привел скриншот 5 фонов с разной глубиной прозрачности, но цвета одни и те же:
DEMO-страничка, если хотите вживую "пощупать" результат
На данный момент это свойство поддерживается браузерами: Firefox 3.6.2 (начиная с 3.0); Opera 10.50 (с 9.50); Chrome 4.1.249.1042 (с 1.0); Safari 4.0.4 (Windows, с 3.2.1).
Ну вот и все! В принципе, ничего запутанного и сложного)
Stay tuned!
[...] This post was mentioned on Twitter by Oleg Mykhailenko. Oleg Mykhailenko said: Задаем цвет фона и прозрачность с помощью RGBA в CSS3 – http://bit.ly/drbE0e [...]
все есть круто, ток изначально разработчикам ЦСС3 надо сесть и написать супер вирь, который убивает ИЕ любой версии на пользовательской машине без возможности востановления и забпустить его в посещаемых ресурсах, а потом все спокойно бу юзать прелести ЦСС3
Ага – надо такой вирь, который в себе несет готовый браузер, в котором сайт открывается после убийства осла ))) тогда точно наступит вселенское щастье.
Круто, только на сколько я знаю css3 пока не одним браузером не поддерживается. Разве что IE9, который находится в глубокой стадии разработки, хотя и сейчас его можно скачать, но на свой страх и риск.
Я же в конце поста написал:
На данный момент это свойство поддерживается браузерами: Firefox 3.6.2 (начиная с 3.0); Opera 10.50 (с 9.50); Chrome 4.1.249.1042 (с 1.0); Safari 4.0.4 (Windows, с 3.2.1).
Все браузеры, которые на движке WebKit уже поддерживают большинство свойств CSS3.
Человек видно патриот, любит IE или в Microsoft работает.
Кстати вариант для осла думаю тоже бы стоило указать (универсальный вариант):
background-color: rgba(255,255,255,0.25);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#25ffffff,endColorstr=#25ffffff);
Очень хороший туториал! Молодец! Так держать!
Спасибо! Стараюсь
Помойму единственный плюс от rgba – это прозрачность, а так и в x16 легко наловчится задавать цвета
Ну да, на то он и rgbA