Сьогодні я хочу поговорити про прозорому тлі блоку тексту, як його робити, і що для цього пропонує CSS3. Перед тим, як перейти до rgba і hsla, розглянемо приклади використання напівпрозорого фону для блоку з текстом, а точніше те, як це досягається і які проблеми виникають. Для демонстрації будемо використовувати ось цю картинку, оброблену якоюсь програмою на java, і лінк на яку, на жаль, був давно загублений.
Дивимося на картинку нижче. Є графічний фон, на який потрібно накласти напівпрозорий блок з текстом. В ідеалі має бути те, що на малюнку під цифрою 2, але іноді може виникати то, що під цифрою 3. Є ще один дефект, але про нього згадаю словесно трохи нижче, тому що отскріншотіть його не було можливості.
Напівпрозорий фон без rgba і hsla
- Напівпрозорий PNG. Оптимальний варіант, тому що на сьогоднішній день він самий кросбраузерності і найпростіший. Для того, щоб блок був прозорий, необхідний однопіксельний напівпрозорий PNG, який заданий в якості бекграунду блоку. І все.
Недоліки. Тільки один - потрібно хак для IE6 і молодше, що усуває проблему з полупрозрачностью.
opacity: 0.5;
filter: alpha (opacity = 50);
-moz-opacity: 0.5;
де 0,5 і 50 - це 50% прозорості. Але є проблема. Якщо ми поставимо потрібного нам блоку таку напівпрозорість, то ми побачимо той третій варіант на зображенні вище - контент блоку також стане напівпрозорим. Однак вихід є - вільний позиціонування, за допомогою якого під блок тексту кладеться другий блок, якому і задана напівпрозорість.
Розглянемо приклад. Нехай блок з помаранчевої картинкою - це тег body, контейнер, в якому буде і текст і прозора підкладка - #block_bg, всередині якого блок з напівпрозорим фоном #block_transparent, а блок з текстом - #block_text.
body
#block_bg position: relative;
overflow: hidden;
width: 400px;
padding: 10px;
>
#block_text
#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. Значення 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. Значення a задається також, як і у rgb і rgba, а з першими трьома параметрами справа йде трохи по іншому. h задається від 0 до 360, а s і l - від 0% до 100%.
І найголовніше. Якщо в rgb визначити колір з голови дуже складно (майже завжди необхідна стороння програма з "піпеткою"), то тут досить мати одну картинку перед очима, щоб все стало на свої місця. Картинка показує відтінки параметра h.
Щоб прикинути необхідний колір, вибираємо відтінок, потім прикидаємо s, насиченість кольору (де 0% - це ненасичений колір (відтінок сірого), а 100% - сама насиченість) і його світлин (0% - при ньому колір завжди буде чорний, а при 100% - білий). Виходячи з вищесказаного, на зображенні показані світлові тони при насиченості 100% і світлин 50%.
Тепер все колірне простір в голові як на долоні. Звичайно ручної підбір не замінює піпетку, та й не всім потрібно в голові мати "колірний простір", але іноді, щоб швидко прикинути що треба і потестить - воно підходить.
І буквально кілька прикладів
background: hsl (180, 100%, 50%); / * Насичений блакитний колір * /
background: hsla (140, 50%, 30%, 0.5); / * Напівпрозорий, ледь помітно, що відтінок зеленого * /
Недоліки. всі 4 властивості не підтримуються віслюком і старими браузерами.
Загалом, CSS3 дає чергові дуже корисні речі, але як завжди, IE - основне гальмо прогресу. Для сайтів клієнтів я б поки утримався від використання (ще мозок даремно будуть виносити) і брав би варіант з PNG. А на своєму сайті - чому б і ні. Особливо, якщо його відвідують просунуті люди, які не сидять на віслюках або будь-яких осколках давнини.