Проста та корисна прозорість - CSS прозорість, Master-web
У багатьох дизайнерських рішеннях для створення прозорості на сайтах використовуються зображення у форматі. Однак, на мою думку, дуже часто верстальники не приділяють належної уваги властивості opacity, яка в багатьох випадках допомагає вирішити потрібні завдання, не вдаючись до використання .png24 (або .png32).
Тим більше, якщо до властивості opacity додати JavaScript, можна отримати дуже цікаві ефекти.
CSS opacity (CSS прозорість)
W3C у своїй рекомендації CSS3 визначає властивість opacity застосування ефекту прозорості до елементів сторінки. Значенням цієї властивості є число діапазоні від 0.0 до 1.0. При значенні рівному нулю елемент стає повністю прозорим, а за значення рівному одиниці, відповідно, зовсім не прозорим. Властивість можна застосовувати до будь-яких елементів сторінки.
Браузери, що підтримують CSS3 opacity
Розуміють CSS3 властивість opacity наступні браузери: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9.
Для встановлення прозорості через скрипт використовуємо: object.style.opacity
Mozilla 1.6 та нижче, Firefox 0.8
Старі Mozilla і Firefox 0.8 використовують свою назву цієї властивості: -moz-opacity
Для встановлення прозорості через скрипт використовуємо: object.style.MozOpacity
Safari 1.1, Konqueror 3.1
Дані товариші, побудовані на движку KHTML, використовують для керування прозорістю якість: -khtml-opacity
Для встановлення прозорості через скрипт використовуємо: object.style.KhtmlOpacity
Однак, майте на увазі, що ця властивість доступна лише в цих версіях цих браузерів. Safari з версії 1.2 використовує CSS3 opacity, але при цьому Konqueror старше за версію 3.1, переставши підтримувати -khtml-opacity, не ввів підтримку CSS3 opacity.
Причиною якої Konqueror втратив можливість реалізації ефекту прозорості якраз і полягає у внесення в ядро KHTML патчів від Safari, т.к. Safari використовує можливості, присутні в Mac OS X, але яких немає в KDE.
Звичайно рано чи пізно ця ситуація буде виправлена, але на даний момент в останній версії 3.5 ситуація залишається незмінною.
Internet Explorer 5.5+
Даний браузер, починаючи з версії 5.5 і включаючи останню на сьогоднішній день версію Internet Explorer 7, реалізує прозорість черезAlpha DirectX фільтр. Варто зазначити, що цей фільтр використовує значення прозорості в діапазоні від 0 до 100 (а не від 0.0 до 1.0). Так само відзначу, що фільтр можна застосовувати лише до елемента зі встановленою властивістю height, або width, або position зі значенням absolute, або writingMode зі значенням tb-rl, або з contentEditable встановленим у true.
Приклад (встановлюємо прозорість наполовину): .img1 < filter:prog >.img2 < filter: alpha (opacity = 50); >/* синтаксис IE4 */ Для встановлення прозорості через скрипт використовуємо: object.style.filter = «prog >
CSS opacity симбіоз
Під симбіозом я маю на увазі об'єднання різних стилів для різних браузерів в одному CSS правил для отримання потрібного ефекту, тобто. для реалізації крос-браузерності. filter:prog > -moz-opacity: 0.5; /* Mozilla 1.6 і нижче */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ opacity: 0.5; /* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9*/ По суті, потрібними є перше і останнє правила, для IE5.5+ і браузерів розуміють CSS3 opacity, а два правила по середині явно погоди не роблять, але й не дуже й заважають (самі вирішуйте, чи потрібні вони вам) .
Javascript opacity симбіоз
Тепер спробуємо встановити прозорість через скрипт з урахуванням особливостей різних браузерів, описаних вище. function setElementOpacity(sElemId, nOpacity) var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId);
if (!elem !opacityProp) return; // Якщо не існує елемент із зазначеним id або браузер не підтримує жоден із відомих функції способів керування прозорістю
if (opacityProp=="filter") // Internet Exploder 5.5+ nOpacity *= 100;
// Якщо вже встановлено прозорість, то змінюємо її через колекцію filters, інакше додаємо прозорість через style.filter var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "prog > else // Інші браузери elem.style[opacityProp] = nOpacity; >
function getOpacityProperty() if (typeof document.body.style.opacity == 'string') // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9) return 'opacity'; else if (typeof document.body.style.MozOpacity == 'string') // Mozilla 1.6 і молодше, Firefox 0.8 return 'MozOpacity'; else if (typeof document.body.style.KhtmlOpacity == 'string') // Konqueror 3.1, Safari 1.1 return 'KhtmlOpacity'; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) // Internet Exploder 5.5+ return 'filter';
return false; //немає прозорості > Функція приймає двааргументу: sElemId - id елемента, nOpacity - дійсне число від 0.0 до 1.0 задає прозорість в стилі CSS3 opacity.
Думаю, варто пояснити частину коду функції setElementOpacity, що відноситься до IE. var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] elem.filters.alpha;
if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "prog ; Може виникнути питання, а чому б не встановлювати прозорість шляхом присвоєння (=) властивості elem.style.filter = '. '; ? Навіщо використовується «+=» для додавання в кінець рядка властивості filter ?Відповідь проста, для того щоб не "затерти" інші фільтри. Але при цьому, якщо додати фільтр таким чином вдруге, то він не змінить раніше встановлені значення цього фільтра, а буде просто доданий в кінець рядка властивості, що не коректно, тому якщо фільтр вже встановлений, то потрібно їм маніпулювати через колекцію застосованих до елемента фільтрів: elem.filters (але врахуйте, якщо фільтр ще не був призначений елементу, то керувати ним через цю колекцію неможливо). елементам колекції можливий або на ім'я фільтра, або за індексом, однак фільтр може бути заданий у двох стилях, у короткому стилі IE4, або в стилі IE5.5+, що і враховано в коді.
Прозорість та зазубрений текст у IE
Насамкінець хочу сказати, застосовуючи прозорість до тексту великого розміру в Internet Explorer, ви зіткнетеся з тим, що цей текст буде зазубреним. Для усунення цього неприємного «спецефекту» слід задати тло текстовому елементу, до якого застосовується прозорість, встановивши CSS властивість background-color.