Як змінити прозорість тексту в CSS?
Прозорість у CSS досить модна техніка останнім часом, яка викликає труднощі у кросбраузерній реалізації. До цих пір не існує універсального методу, який дозволяв би реалізувати прозорість для всіх браузерів. Проте останнім часом ситуація помітно покращала.
У цій статті детально розглянуто існуючі підходи, а також наведено приклади коду та пояснення, які допоможуть вам досягти однакового результату у всіх браузерах з мінімальними витратами праці.
Варто згадати наступний момент: незважаючи на те, що прозорість використовується вже протягом декількох років, вона ніколи не була частиною стандарту CSS. Це нестандартна властивість, яка має стати частиною специфікації CSS3.
Старий підхід
У старих версіях Firefox та Safari необхідно застосовувати властивість таким чином:
Властивість -khtml-opacity використовувалося у старих версіях webkit-браузерів. Ця властивість застаріла і більше не потрібна, крім випадків, коли ви впевнені, що значна частина трафіку вашого сайту походить від відвідувачів, які використовують Safari 1.x, що, звичайно, малоймовірно.
У наступному рядку використовується властивість -moz-opacity, яке працювало на ранніх версіях двигуна Mozilla. Firefox припинив його підтримку у версії 0.9.
CSS прозорість у Firefox, Safari, Chrome та Opera
Для більшості сучасних браузерів достатньо використовувати таку властивість:
У наведеному прикладі, елементу встановлюється значення непрозорості 70% (30% прозорості). Тобто, якщо ми встановимо значення в одиницю, то елемент буде непрозорим, і, відповідно, встановлення цього значення в нуль, зробить його невидимим.
Властивістю opacity обробляється 2 десяткові цифри. Тобто значення ".01" відрізнятиметься від значення ".02", хоч це й мало помітно.
CSS прозорість для Internet Explorer
Як завжди, Internet Explorer не товаришує з іншими браузерами. До того ж, у нас зараз у досить широкому використанні три версії цього браузера, установка прозорості в кожній з яких різна і іноді вимагає додаткових зусиль для отримання позитивного результату.
У цьому прикладі використовується властивість filter, що працює у версіях 6-8, однак для версій 6 і 7 є одне обмеження: елемент має властивість hasLayout має бути встановлено у true. Ця властивість є тільки в IE і докладніше про неї можна почитати, наприклад, на Хабрі.
Ще один спосіб встановити прозорість використовуючи CSS в IE8 - це використовувати наступний підхід (зверніть увагу на коментарі):
Перший рядок буде працювати у всіх версіях, що зараз використовуються, другий же - тільки в IE8. Зверніть увагу, що у другому рядку використовується префікс -ms-, а значення взято у лапки.
Встановлення та зміна CSS прозорості за допомогою JavaScript або jQuery
Ви можете використовувати наступний код для встановлення прозорості:
document.getElementById("myElement").style.opacity = ".4"; // Більшість браузерів document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // для IE
Звичайно ж, у цьому випадку набагато простіше використовувати jQuery, крім того, працюватиме у всіх браузерах:
$("#myElement").css(< opacity: .4 >); // працює у всіх браузерах
Ви можете анімувати цю властивість:
$("#myElement").animate(< opacity: .4 >, 1000, function() < // Анімація завершена; цей код працює у всіх браузерах. >);
Функція RGBA
У CSS3 планується підтримка альфа-каналу за допомогою функції rgba. Ця функція працює у Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Використовується вона так:
У цьому випадку останній параметр вказує на рівень непрозорості.
Функція HSLA
Подібно до попередньої функції, CSS3 також дозволяє задати напівпрозорий колір за допомогою функції HSLA, параметри якої означають тон (Hue), насиченість (Saturation), яскравість (Lightness) та альфа-канал (Alpha).
Докладніше про цю функцію можна почитати на сайті W3.org.
Важливий момент під час використання функцій rgba і hsla - це те, що встановлення прозорості не застосовується до дочірніх елементів, тоді як використання властивості opacity - успадковується.
- Ефект Bubble за допомогою CSS
- Стікери з ASP.NET MVC та jQuery
- Розподілені посилання
- Трюки з textarea
- Верстка сайту. Ще один підхід.
- Способи вертикального вирівнювання по центру CSS.
- Трюки з textarea
- Пишемо текст поверх зображення
Прозорість елементів CSS
У CSS є три способи змінити прозорість елемента:
за допомогою властивості opacity ,
за допомогою функції rgba() ,
за допомогою функції hsla().
1. Властивість opacity
Властивість opacity дозволяє зробити будь-який елемент веб-сторінки частково або повністю прозорим. Ця властивість змінює прозорість елементів, для яких встановлено фонове зображення (картинка) або фон за допомогою кольору або градієнта. Якщо елемент, для якого застосовано властивість opacity, містить у собі інші елементи, то вони також змінять свою прозорість.
Властивість opacity набуває значення в діапазоні від 0 (повністю прозорий) до 1 (непрозорий), наприклад:
2. Функція rgba()
Колірна модель RGBA створює колірний відтінок шляхом змішування у необхідних пропорціях червоного (Red), зеленого (Green) і синього (Blue) квітів, а альфа-канал (Alpha) відповідає за ступінь прозорості кольору. На відміну від властивості opacity для блоку, що містить інші елементи, функція rgba() змінить прозорість тільки блоку.
Мал. 2. Колірна модель RGB
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 прозорість ("transparent")
Використовується для визначення рівня прозорості елемента веб-сторінки. Це дозволяє створити ефекти перекриття та накладання елементів, а також використовувати напівпрозорі кольори для фону чи тексту.
У CSS є кілька способів прозорості. Один із них - використання властивості "opacity". Воно приймає значення від 0 до 1 де 0 означає повну прозорість, а 1 - повну непрозорість.Наприклад, щоб зробити елемент напівпрозорим можна задати йому значення "0.5":
В результаті елемент буде видно через половину своєї вихідної прозорості.
Однак, використання властивості "opacity" застосовується до всього елемента та його вмісту. Іноді потрібно зробити прозорими лише деякі елементи всередині інших елементів. У таких випадках можна використовувати властивість "background-color" зі значенням "rgba". На відміну від звичайного "rgb", "rgba" дозволяє задавати четверте значення - ступінь прозорості, який також визначається від 0 до 1. Наприклад, щоб задати напівпрозоре тло елемента:
В даному прикладі елемент матиме чорний фон з прозорістю в 50%.
Для тексту також можна встановити прозорість, використовуючи властивість "color" зі значенням "rgba". Застосувати прозорість тільки до тексту дозволяє властивість "color" із зазначенням напівпрозорого кольору:
У цьому випадку текст буде відображатися червоним із прозорістю 50%.
Ще один спосіб встановлення прозорості – використання властивості "filter" з функцією "alpha". Функція "alpha" приймає значення від 0 до 1 та застосовує прозорість до всього елемента та його вмісту. Приклад використання:
В даному прикладі елемент матиме прозорість 50%.
Насамкінець, CSS прозорість ("transparent") надає можливість створення ефектів перекриття і накладання елементів, і навіть використання напівпрозорих кольорів для фону чи тексту. Вона може бути реалізована з використанням властивостей "opacity", "background-color", "color" та "filter". Всі ці способи дозволяють контролювати прозорість різних елементів веб-сторінки за допомогою значень від 0 до 1.
