Влад Мержевіч

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

Блок з градієнтом

Зробіть блок, показаний на рис. 1. Блок містить напівпрозору градиентную рамку з градієнтним фоном під заголовком і невеликим покажчиком. Фон на сторінці наведено лише для наочності ефекту напівпрозорості, ви можете вказати будь-яку свою картинку. Мінімальна висота блоку складає 100px.

Як зробити шар напівпрозорим?

Для зміни ступеня прозорості елемента застосовується стильова властивість opacity зі значенням від 0 до 1, де 0 відповідає повній прозорості, а 1, навпаки, непрозорості об'єкта. У браузері Internet Explorer це властивість не працює, тому спеціально для нього доводиться використовувати filter, властивість, що не входить в специфікацію CSS. У прикладі 1 показано, як встановити прозорість шару для всіх браузерів.

напівпрозорий фон

Влад Мержевіч

Часткова прозорість при правильному її використанні досить ефектно виглядає в дизайні сайту. Головне, щоб під напівпрозорими блоками не була однотонний малюнок, а зображення, саме в цьому випадку прозорість стає помітною. Такий ефект досягається різними способами і якщо згадувати все, включаючи старомодні методи, то це використання малюнка PNG в якості фону, створення картатого зображення і властивість opacity. Але як тільки виникає необхідність зробити в блоці напівпрозорий фон, у цих методів виявляються неприємна оборотна сторона. Зроблю невеликий огляд, щоб стало зрозуміло, про що йде мова, а також для тих читачів, які не знайомі з нетрадиційними варіантами створення ефекту напівпрозорості.

Як встановити таблицю напівпрозорої, а частина осередків немає?

Для зміни прозорості елемента в CSS3 передбачено властивість opacity, його значення може змінюватися від 0 до 1. Нуль відповідає повної прозорості елемента, а одиниця, навпаки, непрозорості. Сучасні браузери цілком коректно працюють з цією властивістю за винятком браузера Internet Explorer, тому для нього доводиться використовувати спеціальне властивість filter зі значенням alpha (Opacity = X), де X може змінюватися від 0 до 100.

На цьому уроці ми з вами розберемо такі 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 відповідає за прозорість елементів (картинки, тексту, блоки) в html.

Синтаксис CSS opacity

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

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

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

напівпрозорість елемента

Робимо зображення напівпрозорим при наведенні!

ДемонстраціяСкачать вихідні

Дякую за увагу!

Наступна стаття
Як створити div блок з прокруткою?

Створення прозорого фону в HTML і CSS (ефекти opacity і RGBA)

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

Такий ефект досягається різними способами, включаючи старомодні методи, як використання малюнка PNG в якості фону, створення картатого зображення і властивість opacity. Але як тільки виникає необхідність зробити в блоці напівпрозорий фон, у цих методів виявляються неприємні оборотні боку.

Розглянемо напівпрозорість тексту і фону - як правильно її використовувати в дизайні сайту:

Основна особливість цієї властивості полягає в тому, що значення прозорості діє на всі дочірні елементи всередині, а не тільки на фон. Це означає, що і фон і текст стануть напівпрозорими. Збільшити рівень прозорості можна змінюючи команду opacity від 0.1 до 1.

HTML 5 CSS 3 IE 9

Створення та просування сайтів в інтернеті

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

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

Напівпрозорий фон HTML 5 CSS 3 IE 9

Створення та просування сайтів в інтернеті.

Значення непрозорості для фону встановлено 90% - напівпрозорий фон і непрозорий текст.

Властивість 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 розширень тих чи інших браузерів.

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

браузер	префікс
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 і вище	-ms-
Safari до версії 3, Konqueror	-khtml-
Safari 3 і вище, Google Chrome	-webkit-

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

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

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

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

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

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

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

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