Прозрачность элементов
Свойство "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 - 1 №2 - 0.5 №3 - 0.2
Конечно, такой "фокус" легче сделать с помощью фотошоп, но есть большая разница. В этом случае браузеру пришлось бы
загружать 3 рисунка с сервера. А так он грузит только один-единственный.
Применение программы "Фотошоп" для разных целей, найдёте по данной ссылке.
Пример практического использования прозрачности
Самое интересное - это комбинированное использование текста и фоновых рисунков для веб-дизайна страниц сайтов.
Использование прозрачности в веб-дизайне
(здесь могла быть реклама)
Решил сделать такую вставку, чтобы показать возможности практического использования
прозрачности элементов веб-страницы.
Свойству "opacity" дал значение 0.6, что позволяет видеть под рекламным блоком нижний фоновый рисунок.
Посмотреть ещё примеры применения 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" (невидимка).
* * *
Надеюсь, тему видимости элементов и управления ею, раскрыл достаточно подробно.
Вернуться в раздел учебных сайтов можно по синей стрелке НАЗАД. Зелёная вернёт Вас в фотошоп.
ВВЕРХ
| 