RGBA в CSS3

29
Март
2010

RGBA в CSS3

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

Для задания цвета фона, нам нужно выставить значения для трех основных цветов: красного (r - red), зеленого (g - green) и синего (b - blue). Но так, как мы заговорили о RGBA, то помимо трех RGB-цветов, мы еще выставим прозрачность (a - alpha).

Demo RGBA CSS3

Значение для всех цветов выставляем в числах от 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 фонов с разной глубиной прозрачности, но цвета одни и те же:

RGBA и Opacity (прозрачность) в CSS3

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).

Ну вот и все! В принципе, ничего запутанного и сложного)

Download (скачать) RGBA CSS3

Stay tuned! ;)

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (11) к “RGBA в CSS3”

  1. [...] This post was mentioned on Twitter by Oleg Mykhailenko. Oleg Mykhailenko said: Задаем цвет фона и прозрачность с помощью RGBA в CSS3 – http://bit.ly/drbE0e [...]

  2. galaxy пишет:

    все есть круто, ток изначально разработчикам ЦСС3 надо сесть и написать супер вирь, который убивает ИЕ любой версии на пользовательской машине без возможности востановления и забпустить его в посещаемых ресурсах, а потом все спокойно бу юзать прелести ЦСС3 :D

  3. Денис пишет:

    Ага – надо такой вирь, который в себе несет готовый браузер, в котором сайт открывается после убийства осла ))) тогда точно наступит вселенское щастье.

  4. АлаичЪ пишет:

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

    • Oleg Mykhailenko пишет:

      Я же в конце поста написал:
      На данный момент это свойство поддерживается браузерами: 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.

      • Kaktus пишет:

        Человек видно патриот, любит IE или в Microsoft работает.

        Кстати вариант для осла думаю тоже бы стоило указать (универсальный вариант):

        background-color: rgba(255,255,255,0.25);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#25ffffff,endColorstr=#25ffffff);

  5. Demedes пишет:

    Очень хороший туториал! Молодец! Так держать! =)

  6. Пашко пишет:

    Помойму единственный плюс от rgba – это прозрачность, а так и в x16 легко наловчится задавать цвета