Почнемо з опису атрибута opacity. Цей атрибут (властивість) включений W3C в рекомендації для CSS3. Значеннями атрибута можуть бути тільки числа від 0 до 1. Тут - 0 означає повну прозорість (невидимість) об'єкта, а 1 - стандартний стан, без прозорості. Властивість може бути застосоване до будь-якого об'єкту. Приклад використання:
Якщо преминемо це властивості до нашої піддослідної зображенні, отримаємо такий ефект:
Розглянемо варіант реалізації прозорості в старих версіях Internet Explorer (5.5 - 7). Прозорість в IE задавалася через Alpha DirectX фільтр. Даний фільтр приймає значення прозорості в діапазоні від 0 до 100 (а не від 0 до 1). Використання Alpha DirectX передбачає наявності у об'єкта певних атрибутів: встановлений height або width, або встановлений атрибут position зі значенням absolute, або атрибут writingMode зі значенням tb-rl, або з contentEditable встановленим значенням true.
Приклад реалізації (отримаємо той же ефект, що і в першому прикладі):
Opacity не працює в старих версіях і інших браузерів і для забезпечення також застосовуються спеціальні скрипти. Для забезпечення повної (максимально можливої) крос-браузерності прозорості використовується така зв'язка (для нашого прикладу):
opacity: 0.5;
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
Тепер прозорість буде відмінно працювати практично у всіх, навіть не дуже актуальних браузерах. Повторюся, що конструкція не правильна.
Зробимо для нашої картинки такий перехід від 0.5 до 1.0:
В HTML запишемо код:
Можна було записати і розміри в стилі, але можна і так, як в прикладі. Запишемо в таблицю стилів:
a opacity: 0.5;
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
>
a: hover opacity: 1.0;
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 100);
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
>
opacity opacity: 0.5;
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
>
3. Напівпрозорі вікна. Часто при поданні інформації у спливаючому вікні, його роблять напівпрозорим. В даному випадку, вікно - блок, який повинен знаходитися над іншим контентом (не забуваємо про z-index). приклад:
В HTML записуємо таке (для вікна):
У таблицю стилів пишемо таке (наприклад):
opacity: 0.5;
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
>
4. Одне з найдосконаліших застосувань прозорості. М'який перехід об'єкта від напівпрозорого стану до нормального. Тут - існує кілька шляхів реалізації: або через спеціальну бібліотеку opacity, або через стандартну jQuery. З огляду на те, що на сайті, де є потреба у такий ефект як правило jQuery вже підключена, їй і скористаємося. Підключимо бібліотеку і запишемо в HTML такий скрипт:
var opacity = 0.5 - початкова прозорість
toOpacity = 1.0 - кінцева прозорість
duration = 400 - час переходу
Туди ж запишемо код нашої картинки:
Якщо не потрібні додаткові стилі, CSS можна не писати. Ефект можна подивитися в "Демо".
Ось і все на сьогодні. Дякую за увагу!