Логотип Валидатор Валидатор Качество создания сайта

Прозрачность элементов

Свойство "opacity"

Отличные возможности для веб-дизайна даёт свойство CSS "opacity", что по данным "Википедии", переводится как непрозрачность.

Прозрачность элемента

"По умолчанию", у этого свойства стоит значение "1", т.е. полностью НЕ прозрачен.  Но такое легко сменить.
Значения свойства opacity можно изменять от 0 (невидимка) до 1 (виден полностью).

Причём! Менять можно очень-очень плавно. К примеру, выставить значение: 0.985, что совсем немного "потушит" элемент.

Внимание! Это свойство понимают браузеры Firefox и Opera, и все современные устройства: планшеты, смартфоны. А вот Internet Explorer 8 его не понимает, НО!
Зато, он понимает фильтр "alpha". Пример использования показал в конце страницы.

Ради изучения полных возможностей этого свойства, подключил к основному файлу CSS ещё один дополнительный. Он в папке CSS. Назвал его style_opacity.css

Схематически, коды в нём имеют вид: #opc05 {opacity: 0.5;}


Прозрачность текста

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

Разные значения через отдельный файл CSS

Примеру №1 установил непрозрачность 0.5

Примеру №2 установил непрозрачность 0.2

Разные значения через атрибут style

Пример №1 с непрозрачностью 0.5

Пример №2 с непрозрачностью 0.2

Хорошо видно, что любым способом свойство работает абсолютно одинаково.


Прозрачность рисунков

Пример №1 Пример №2 Пример №3

Аналогично. Рисунки, используя подключённую таблицу стилей, сделал с непрозрачностью, соответственно: №1 - 1   №2 - 0.5   №3 - 0.2

Конечно, такой "фокус" легче сделать с помощью фотошоп, но есть большая разница. В этом случае браузеру пришлось бы загружать 3 рисунка с сервера. А так он грузит только один-единственный.
Применение программы "Фотошоп" для разных целей, найдёте по данной ссылке.


Пример практического использования прозрачности

Самое интересное - это комбинированное использование текста и фоновых рисунков для веб-дизайна страниц сайтов.

Использование прозрачности в веб-дизайне
(здесь могла быть реклама)


Решил сделать такую вставку, чтобы показать возможности практического использования прозрачности элементов веб-страницы.
Свойству "opacity" дал значение 0.6, что позволяет видеть под рекламным блоком нижний фоновый рисунок.

Посмотреть ещё примеры применения CSS для веб-дизайна страниц можно, кликнув по нижнему зелёному квадрату
(откроется в новом окне).

Результат тренировок по CSS

Показал здесь принципы практического использования прозрачности элементов, т.е. свойства CSS "opacity".

Дальше расскажу о некоторой особенности этого свойства, с которой столкнулся, изучая его применение.


Особенности использования свойства "opacity"

Ниже разместил 3 примера с текстом, цветным фоновым блоком и фоновым рисунком.

Этот пример текста, серого фонового блока и фонового рисунка сделал для сравнения.

К ним ещё никакого свойства не применял.

Здесь, в примере №2, свойству "opacity" дал значение 0.5

Разницу видно.

Это особый случай!

Текста почти не видно, поэтому напишу о нём отдельно.

Хочу особо отметить 3-ий пример с двойным указанием непрозрачности.

Этот пример имеет ту же непрозрачность, что и соседний. Такое прописал ему в таблице стилей CSS.
А вот через атрибут "style", текстовым абзацам указал opacity:0.2, что они и приняли.

НО!  Попробовал дать им через атрибут значение 1, однако они его НЕ применили, а продолжили наследовать от "родителя" 0.5.

Внимание! В то же самое время, МЕНЬШЕЕ значение, чем указано блоку-"родителю" в таблице стилей, текстовые абзацы (нижние) исполнили охотно.   Разборчивые они ... ...! Ещё какие!

И напоследок, покажу действие специального фильтра для установки, и регулирования прозрачности элементов.


Фильтр "alpha"

Внимание! Напомню! Этот, последний пример непрозрачности элемента могут видеть только те, кто зашёл с браузером Internet Explorer 8.
Остальные будут видеть обычный цветной блок с рисунком посередине и текстом так, будто "никакой закон им не писан". Сами по себе!

Вписал текст для демонстрации примера работы спец. фильтра "alpha".
Установил в CSS-коде фильтра значение 50.

Тем не менее, код для этого примера в таблице стилей CSS прописан. Правда, выглядит он несколько иначе.

Кодовая строчка, отвечающая за непрозрачность, имеет вид: filter:alpha(opacity=50); Такая запись означает - видимость элемента составляет 50%.

Для фильтра "alpha" значения указываются в диапазоне от "100" (полностью виден), до "0" (невидимка).

* * *

Надеюсь, тему видимости элементов и управления ею, раскрыл достаточно подробно.
Вернуться в раздел учебных сайтов можно по синей стрелке НАЗАД. Зелёная вернёт Вас в фотошоп.

ВВЕРХ

Учебные сайты Куда? Фотошоп

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru