Свойства CSS3! Часть 4 – rgba, hsla и прозрачность фона

« Предыдущая запись
 
  Следующая запись »
 

transparent thumb Свойства CSS3! Часть 4 – rgba, hsla и прозрачность фонаСегодня я хочу поговорить о прозрачном фоне блока текста, как его делать, и что для этого предлагает CSS3. Перед тем, как перейти к rgba и hsla, рассмотрим примеры использования полупрозрачного фона для блока с текстом, а точнее то, как это достигается и какие проблемы возникают. Для демонстрации будем использовать вот эту картинку, обработанную какой-то программой на java, и линк на которую, к сожалению, был давно утерян.

Смотрим на картинку ниже. Имеется графический фон, на который требуется наложить полупрозрачный блок с текстом. В идеале должно быть то, что на рисунке под цифрой 2, но иногда может возникать то, что под цифрой 3. Есть ещё один дефект, но о нём упомяну словесно чуть ниже, т.к. отскриншотить его не было возможности.

transparent block Свойства CSS3! Часть 4 – rgba, hsla и прозрачность фона

 

Полупрозрачный фон без rgba и hsla

  1. Полупрозрачный PNG. Оптимальный вариант, т.к. на сегодняшний день он самый кроссбраузерный и самый простой. Для того, чтобы блок был прозрачен, необходим однопиксельный полупрозрачный PNG, который задан в качестве бэкграунда блока. И всё.

    Недостатки
    : Только один – требуется хак для IE6 и младше, устраняющий проблему с полупрозрачностью.

  2. Прозрачность через opacity. Прозрачность блока задаётся кроссбраузерно следующим образом:
    opacity:0.5;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;

    где 0,5 и 50 – это 50% прозрачности. Но есть проблема. Если мы зададим нужному нам блоку такую полупрозрачность, то мы увидим тот третий вариант на изображении выше – контент блока также станет полупрозрачным. Однако выход есть – свободное позиционирование, при помощи которого под блок текста кладётся другой блок, которому и задана полупрозрачность..

    Рассмотрим пример. Пусть блок с оранжевой картинкой – это тег body, контейнер, в котором будет и текст и прозрачная подложка – #block_bg, внутри которого блок с полупрозрачным фоном #block_transparent, а блок с текстом – #block_text.  

    <div id="block_bg">
       <div id="block_transparent">&nbsp;</div>
       <div id="block_text">Текст текст текст, много-много текста</div>
    </div>
    body { background: url(image.jpg); }
    #block_bg { 
       position: relative;
       overflow: hidden;
       width: 400px;
       padding: 10px; 
    }
       #block_text { position: relative; z-index: 100; }
       #block_transparent {
          opacity: 0.5;
          filter: alpha(opacity=50);
          -moz-opacity: 0.5;
          background: #fff;
          position: absolute;
          top: 0;
          left: 0; 
          z-index: 90; 
          height: 5000px;
          width: 400px;
       }

    Обращаю внимание, что необходимо задавать ширину прозрачного блока (строка 19), иначе он свернётся в 1 пиксел, и ширину общего блока (строка 5), иначе текст будет выходить за пределы прозрачного блока (хотя ширину можно и тексту задать, но принципиальной разницы не будет). Чтобы были отступы от текста и края прозрачного блока, используем паддинг в шестой строке. Чтобы прозрачность была регулируема по высоте, задаём ей высоту побольше (строка 18) и перекрытие для общего блока (строка 4).
    Итак, мы запихнули всё в один блок, который можно пихать в любую часть страницы, где есть интересная подложка. Да, может возникнуть желание поставить бэкграунд общему блоку block_bg, но лучше не стоит – осложните себе жизнь (в зависимости, конечно, от задачи). Иными словами, лучше всю эту конструкцию запихнуть в отдельный блок, которому задать паддинг и не мучиться. 
    Недостатки: Слишком громоздко.

 

rgb и hsl, rgba и hsla – свойства CSS3

Точнее это не совсем свойства – это новая возможность задавания цвета для таких свойств как background, color, border и т.д.

Название свойств пошли от цветовых систем RGB (Red, Green, Blue) и от HSL (Hue, Satutation, Lightness). Первая система описывает цветовое пространство посредством смешивания основных цветов – красного, зелёного и синего. Во второй системе компоненты цвета отображают информацию о цвете в более привычной для человека форме: Что это за цвет? Насколько он насыщенный? Насколько он светлый или тёмный?

 

rgb и rgba

Начнём с rgb и rgba. Значения r, g, b могут задаваться от 0 до 255 или от 0% до 100%. Значение a (alpha, прозрачность) измеряется от 0 до 1 (дробные значения задаются через точку – 0.4, 0.7 и т.д.). Если для r, g и b будут задаваться значения, превышающие их допустимый диапазон (например, 300 или 110% или -5), то они сократятся к ближайшему допустимому значению.

Рассмотрим всё на примере свойства background (хотя желающие могут взять color или border).

background: rgb(0, 0, 255); /*чисто синий цвет*/
background: rgb(100%, 50%, 0%); /*чисто синий цвет*/
background: rgb(10, 145, 500); /*будет распознано как 10, 145, 255*/
background: rgba(10, 145, 255, 1); /*тоже самое, что и предыдущее*/
background: rgba(100, 50, 255, 0.1); /*очень прозрачный оттенок сиреневого*/

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

 

hsl и hsla

И несколько слов о hsl и hsla. Значение a задаётся также, как и у rgb и rgba, а с первыми тремя параметрами дело обстоит немного по другому. h задаётся от 0 до 360, а s и l – от 0% до 100%.

И самое главное. Если в rgb определить цвет из головы очень сложно (почти всегда необходима сторонняя программа с "пипеткой"), то здесь достаточно иметь одну картинку перед глазами, чтобы всё стало на свои места. Картинка показывает оттенки параметра h.

hue Свойства CSS3! Часть 4 – rgba, hsla и прозрачность фона 

Чтобы прикинуть необходимый цвет, выбираем оттенок, затем прикидываем s, насыщенность цвета (где 0% – это ненасыщенный цвет (оттенок серого), а 100% – самая насыщенность) и его светлоту (0% – при нём цвет всегда будет чёрный, а при 100% - белый). Исходя из вышесказанного, на картинке показаны световые тона при насыщенности 100% и светлоте 50%.

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

И буквально пара примеров

background: hsl(180, 100%, 50%); /*насыщенный голубой цвет*/ 
background: hsla(140, 50%, 30%, 0.5); /*полупрозрачный, едва заметно, что оттенок зелёного*/

 

Недостатки: все 4 свойства не поддерживаются ишаком и старыми браузерами.

 

 

Завершение

В общем, CSS3 даёт очередные очень полезные вещи, но как всегда, IE – основной тормоз прогресса. Для сайтов клиентов я бы пока воздержался от использования (ещё мозг зазря будут выносить) и брал бы вариант с PNG. А на своём сайте – почему бы и нет. Особенно, если его посещают продвинутые люди, не сидящие на ишаках или каких-либо осколках древности.


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 6, средний: 4.83 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 7 на запись

"Свойства CSS3! Часть 4 – rgba, hsla и прозрачность фона"

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

  2. Ну покажите чтоль сайт, чтобы по существу говорить, а не пальцем в небо =)

  3. statusmania.com.ua вот, флеш баннер под меню стоит, пробывал для него отдельный стиль с другими настройками опасити, закрепить. не помогло

  4. мне кажется дело в том, что баннер во фрейме, а там своя разметка с хтмлем и т.д. и т.п. так что надо либо от фрейма избавляться, либо проверять детально все слои с прозрачностью, включая/выключая их.

  5. нет фрейма. там жаваскрипт

  6. жаваскрипт получается создаёт фрейм – советую глянуть через Developer Tools в Хроме, или фаербагом – он наверное тоже увидит тему.
    Раз скрипт не исправить, значит надо менять код страницы и возиться с ним

  7. Огромное спасибо за статью – без этого мучался не знал как изменить фон, а он был прописан не в колорах, а в бэкграунд, да еще не просто номером цвета а через rgba. Репспект автору!

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии