CSS прозорість - крос-браузерне рішення - 3.8 out of 5 based on 6 votes

У цьому уроці ми розглянемо CSS прозорість, дізнаємося, як надати різним елементам сторінки прозорість і досягти повної крос-браузерності, тобто однакової роботи цього ефекту в різних браузерах.

Як задати прозорість будь-якого елемента

У CSS3 за створення прозорих елементів відповідає властивість opacity, яку можна застосовувати до будь-яких елементів. У цієї властивості є значення від 0 до 1, які визначають ступінь прозорості. Де 0 - це повна прозорість (значення за умовчанням для всіх елементів), а 1 повна непрозорість. Записуються значення дробами: 0.1, 0.2, 0.3 тощо.

Приклад використання:

Крос-браузерність прозорості

Не всі браузери однаково сприймають та реалізують зазначену вище властивість opacity. У деяких випадках необхідно використовувати іншу назву властивості або фільтри.

Властивість CSS3 opacity підтримують такі види браузерів Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Такий хороший:) браузер як Internet Explorerаж до версії 9,0 не підтримує властивість opacity і створення прозорості для цього браузера потрібно використовувати властивість filter і значення alpha(Opacity=X), у якому Х - це ціле число в діапазоні від 0 до 100 за допомогою якого визначається рівень прозорості. 0 – це повна прозорість, а 100 – повна непрозорість.

Що стосується браузера Firefox до версії 3.5, він підтримує властивість -moz-opacity замість opacity.

Такі браузери як Safari 1.1 і Konqueror 3.1, побудовані на движку KHTML, використовують для керування прозорістю якість: -khtml-opacity.

Як же задати CSS прозорість, щоб це виглядало у всіх браузерах однаково? Для створення крос-браузерного рішення для прозорості елементів їм потрібно прописувати не тільки одну властивість opacity, а наступний набір властивостей:

filter: alpha (Opacity = 50); /* Прозорість для IE */ -moz-opacity: 0.5; /* Підтримка Mozilla 3.5 та нижче */ -khtml-opacity: 0.5; /* Підтримка Konqueror 3.1 та Safari 1.1 */ opacity: 0.5; /* Підтримка решти браузерів */

Прозорість різних елементів

Розглянемо деякі приклади завдання прозорості певним елементам, які найчастіше використовуються на сторінці.

CSS прозорість зображення.

Розглянемо кілька варіантів створення напівпрозорої картинки. У наступному прикладі першої картинки не задана прозорість, друга має прозорість 50%, третя 30%.

Результат:

Прозорість на CSS під час наведення курсору на картинку.

Часто необхідно зробити прозорим картинку або будь-який інший елемент у той момент, коли на нього наведено курсор. Зробити це можна за допомоги CSSпсевдокласу: hover. Для цього нашій картинці потрібно прописати два класи один звичайний - це буде неактивний стан картинки і другий клас із псевдокласом: hover, тут необхідно вказати прозорість картинки в момент наведення курсору.

Результат можете подивитися у демо.

Прозорість фону на CSS.

Тут необхідно пам'ятати, що прозорість поширюється на всі вкладені елементи і вони не можу мати більшу прозорість ніж вкладений елемент.

Як приклад наведемо варіант з фоном сторінки створеним за допомогою картинки і блоком з фоном створеним за допомогою кольору і прозорістю 50%.

Приклад коду:

Ось результат розміщеного вище коду:

На цьому уроці ми з вами розберемо такі CSSвластивості – opacityі RGBA. Властивість Opacityвідповідає лише за прозорість елементів, а функція RGBA– за колір та прозорість, якщо вказати значення прозорості альфа-каналу.

CSS прозорість Opacity

Цифрове значення для opacityзадано у межах від 0.0 до 1.0, де нуль це повна прозорість, а одиниця навпаки – абсолютна непрозорість. Наприклад, щоб побачити 50% прозорості, треба виставити значення 0.5. Треба мати на увазі, що opacityпоширюється на все дочірні елементибатька. А це означає, що і текст на напівпрозорому тлі теж буде напівпрозорим. А це вже дуже суттєва вада, текст не так добре виділяється.

На скріншоті виразно видно, що чорний текст став таким самим напівпрозорим, як і блакитний фон.

Div (
background: url(images/yourimage.jpg); /* Фон зображення */
width: 750px;
height: 100px;
margin: auto;
}
.blue (
background: #027ав4; /* Колір напівпрозорого фону */
opacity: 0.3; /* Значення напівпрозорості фону */
height: 70px;
}
h1 (
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
}

CSS прозорість у форматі RGBA

Формат для запису кольору RGBAє більш сучасною альтернативою для властивості opacity. R (red), G (green), B (blue)- Значить: червоний, зелений, синій. Остання літера A- означає альфа-канал, який і задає прозорість. RGBAна відміну від Opacityне впливає на дочірні елементи.

Тепер давайте розглянемо наш приклад із використанням RGBA. Замінимо ці рядки у стилях.

Background: ##027ав4; /* Колір фону */
opacity: 0.3; /* значення напівпрозорості фону */

на наступний один рядок

Background: rgba(2, 127, 212, 0.3);

Як бачите значення прозорості 0.3 збігається в обох методів.

Результат прикладу з RGBA:

Другий скріншот набагато краще виглядає, ніж перший.

Граючи з напівпрозорістю фону блоків, можна досягти на сайті цікавих ефектів. Важливо, щоб ці напівпрозорі блоки йшли поверх строкатого малюнка, наприклад фотографії. Тільки в цьому випадку ефект буде помітним. Цей прийом вже давно застосовувався в дизайні, ще до появи будь-яких CSS3, реалізовувався він у графічних програмах.

Якщо замовник вимагає, щоб верстка добре виглядала і у старих версіях браузера Internet Explorerтоді додавайте властивість filterта не забудьте закоментувати, щоб не постраждала валідність коду.

Висновок

Формат RGBAпідтримують усі сучасні браузери, за винятком Internet Explorer. Ще дуже важливо, що RGBAГнучкий, він діє лише на конкретний заданий елемент, не торкаючись дочірніх. Зрозуміло, що для верстальника це зручніше. Мій вибір однозначно на користь формату RGBAдля отримання прозорості в CSS.

Для кращого закріплення матеріалу та більшої наочності пропоную вам пройти .

У CSS є три способи змінити прозорість елемента:
за допомогою властивості opacity ,
за допомогою функції rgba() ,
за допомогою функції hsla().

1. Властивість opacity

Властивість opacity дозволяє зробити будь-який елемент веб-сторінки частково або повністю прозорим. Ця властивістьзмінює прозорість елементів, для яких встановлено фонове зображення(картинка) або фон за допомогою кольору або градієнта. Якщо елемент, для якого застосовано властивість opacity, містить у собі інші елементи, то вони також змінять свою прозорість.
Властивість opacity набуває значення в діапазоні від 0 (повністю прозорий) до 1 (непрозорий), наприклад:

H1 (color: #CD6829;) div (background: #CDD6DB; opacity: .3; )
Рис. 1. Прозорість елементів за допомогою opacity

2. Функція rgba()

Колірна модель RGBA створює колірний відтінок шляхом змішування у необхідних пропорціях червоного (Red), зеленого (Green)і синього (Blue)квітів, а альфа-канал (Alpha)відповідає за рівень прозорості кольору. На відміну від властивості opacity для блоку, що містить інші елементи, функція rgba() змінить прозорість тільки блоку.

3. Функція hsla()

Функція hsla(), параметри якої означають тон (Hue), насиченість (Saturation), яскравість (Lightness)і альфа-канал (Alpha), також дозволяє встановити напівпрозорий колір.

Відтінки кольору задаються у відсотках, використовуючи відповідне значення кольору. Саме коло розбите на сектори, на межах яких знаходяться основні кольори:

0/360° - червоний колір
60 ° - жовтий колір
120 ° - зелений колір
180 ° - блакитний колір
240 ° - синій колір
270 ° - фіолетовий колір
300 ° - пурпурний колір.

Щоб отримати чорний колір, потрібно присвоїти показникам тону, насиченості та яскравості нульове значення - hsla (0, 0%, 0%, 1). Білий колір виходить за 100%-ном значенні яскравості hsla(0, 0%, 100%, 1) , а сірий колір - при нульовому значенні насиченості hsla(0, 0%, 50%, 1) .

Властивість CSS opacity відповідає за прозорість елементів (картинки, тексту, блоки) у html.

Синтаксис CSS opacity

opacity: value;

Де value може набувати речових значень в діапазоні від 0.0 до 1.0. Значення 1.0 означає, що прозорість відсутня (за замовчуванням).

Приклади: як прозорість у html

Приклад №1. Прозоре зображення у html

Перша картинка виведена без прозорості, друга з прозорістю 0.5

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

На странице преобразуется в следующее

Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

object.style.opacity ="VALUE "

Свойство CSS 3 opacity позволяет делать прозрачным тот или иной элемент сайта.

Степень прозрачности элемента определяется значением от 0 до 1 где 0 – полностью прозрачный а 1 – непрозрачный вовсе.. Так например значение 0.5 свойства opacity применённого к картинке будет значить что данное изображение должно быть полупрозрачным.

Прозорість у IE

Internet Explorer не підтримує властивості opacityаж до дев'ятої версії, однак має свій власний фільтр, за допомогою якого можна задати ступінь прозорості:

filter: alpha (opacity = 50)

Значення opacityдля фільтра браузера Internet Explorer може змінюватись від 0 - повністю прозорий до 100 - непрозорий

Блоки цього меню при наведенні курсору будуть напівпрозорими та в IE!!

Префікс.

На цьому можна було б у принципі закінчити розділ про прозорість, але я хотів би Вам ще розповісти про так звані вендорні префікси.. особливого відношення ці товариші до цієї глави не мають, проте далі під час навчання CSS3 вони зустрічатимуться дедалі частіше і десь про них потрібно розповісти – тому розповім тут.

Отже, вендорні префікси – це особливі приставки до властивостей CSS, які використовуються браузерами для експериментальних властивостей, які офіційно не входять до специфікації CSS.

Ми з Вами пам'ятаємо, що специфікація CSS 3 поки що перебуває в стадії розробки та формально властивостей описаних у цьому підручнику не існує в природі, проте браузери на свій страх і ризик їх активно використовують.

Чому на свій страх та ризик? Так тому що є ймовірність, що коли буде офіційно затверджено специфікацію CSS 3, описані в ній властивості по своїй дії будуть відрізнятися від властивостей з таким же ім'ям, які вже використовуються браузерами. Ну от збрендит допустимо розробникам специфікації CSS 3 позначити властивість opacityне як ступінь прозорості блоку, а наприклад як його штрихування або мерехтіння (маячня звичайно пишу), що тоді відображатимуть вже мільйони встановлених браузерівдля яких opacityце саме прозорість!

Або припустимо, розробники браузера вигадали свою власну властивість - нововведення, якого взагалі ніде і ні в кого немає, але документ з такою властивістю не проходить перевірку на валідність тому, що такої властивості у специфікації немає.

З цих та інших причин браузери використовують префікси спочатку властивостей, які не входять до офіційної специфікації. У кожного браузера свій префікс починається зі знака «-» цей знак спочатку властивості, як і цей знак «_», згідно зі специфікацією CSS 2.1 означає, що властивість зарезервована для CSS розширень тих чи інших браузерів.

Ось найбільш популярні браузери та їх префікси:

Використовувати префікси дуже легко достатньо взяти якусь властивість CSS і підставити до нього потрібний префікс, наприклад, до властивості opacityпідставляємо -moz-виходить: -moz-opacity

Хоча насправді мій вираз використовувати префіксиНевірно! насправді нічого нікуди не підставляється, просто є властивість opacity, а є -moz-opacityі це дві різні властивості які необов'язково повинні виконувати одну й ту саму функцію!! - це слід розуміти.

А ще слід розуміти, що ті чи інші конкретні браузери до певних версій можуть підтримувати CSS властивостітільки зі своїми префіксами (знову неправильно висловлююся, правильно говорити свої власні властивості - браузерні CSS розширення), а можуть спочатку покладатися на нехай навіть специфікації, що розробляються. – Кожен конкретний випадок у цьому підручнику ми розглядатимемо окремо.

Що ж до цього розділу про прозорість, то слід зазначити, що браузер Firefox 3.5 та його більше ранні версіївикористовують свою власну властивість -moz-opacity, а браузер Safari до версії 1.1 використовує свою властивість -khtml-opacity .

Так щоб зробити наш приклад повністю кросбраузерним нам знадобиться додати в код ще пару рядків:

Як бачите префікси, значно розтягують код і їх використання не завжди виправдане, якщо версії браузерів, які бажають працювати з тими чи іншими властивостями тільки з використанням своїх префіксів, досить старі, як у випадку з властивістю opacity, то можна їх і не вказувати.. - хоча звичайно це шкідлива порада.

Ну а тепер корисні поради.

Завжди використовуйте префікси (якщо звичайно той чи інший браузер не може обійтися без них) в тих випадках, коли властивість, що використовується, може сильно вплинути на працездатність, читабельність і юзабіліті сайту. Одна справа коли не будуть працювати якісь дрібниці в дизайні сайту і зовсім інша коли, наприклад, не працює меню сайту або на сайті неможливо прочитати текст через те, що браузер не підтримує якусь властивість а замість нього використовує аналогічне своє власне.