Использование прозрачности (Transparency) в Веб-Дизайне

Опубликовал: 6 лет назад Веб-Дизайн

Добрый день дорогие друзья.

Вы по прежнему находитесь в песочнице Виктора Доценко. Сегодня я хотел бы с вами поговорить о прозрачности (Transparency) в веб-дизайне. Прозрачность — это такой эффект, который позволяет нам  при разработке дизайна сайта, создать элементы, которые не будут полностью перекрывать другие, расположены под ними изображения или иные объекты дизайна. Так же прозрачность позволяет создать иллюзию, что воссозданная нами область выглядит более просторной, чем на самом деле.Если вы будете делать все правильно, то это поможет сделать общий вид дизайна ваших проектов более элегантным. В Photoshop, этот эффект легко достигается путем уменьшения прозрачности (Opacity) или при помощи инструмента заливки (Fill) , но что касается создания прозрачности в веб-дизайне — это совсем другой вопрос, который сегодня мы изучим. Двигаемся в полную новость. 

В статье мы рассмотрим, как развивалась прозрачность (Transparency) на протяжении многих лет в веб-пространстве. Мы взглянем как все воссоздавалось до появления CSS3.


IEpngfix — Старая школа

Раньше эффект прозрачности получался при помощи использования формата PNG,
который так же известен своими некоторыми недостатками. К примеру в Internet Explorer 6 (как же я его ненавижу), прозрачный PNG отказывался быть прозрачным более чем полностью и был на столько уродливым, что приходилось применять
некоторые костыли. Одним из таких костылей является библиотека JavaScript, которая помогала (помогает) справляется с этими ошибками.

Еще одной проблемой является то, что  когда мы добавляем изображения на наши сайты, мы добавляем больше HTTP запросов браузера. Если изображений много, то соответственно скорость загрузки сайта весьма существенно возрастет.

Плюсы:

  • Довольно легко производить и легко применять эффект прозрачности, если вы знакомы с графическими редакторами к примеру с Photoshop.
  • Хорошая поддержка современными, качественными браузерами.

Минусы:

  • Не красивое отображение в IE6.
  • Возрастают дополнительные запросы HTTP.

CSS прозрачность (Opacity)

Существует более простой способ создания прозрачности для веб-сайтов — opacity CSS.  Это свойство совсем недавно было включено в CSS3, но применение этого свойства намного шире чем может показаться . Прозрачность была добавлена в популярные браузеры еще с версий: Firefox 2 и Chrome 4.

Давайте посмотрим как оформляется прозрачность (Transparency) в CSS:

Этот код выведет белый блок с 0,5 или 50% эффектом  прозрачности, диапазон прозрачности выставляется значениями от 1 до 0, где 1 будет сделает элемент непрозрачным , а 0 сделает элемент полностью невидимым.

Вы должны помнить, что прозрачность элемента будет влиять на другой элемент внутри нашего блока. К примеру некоторый текст, под этим блоком, так же будет на 50% прозрачным.

opacity

 

Так же в IE8 или в более ранних версиях, мы должны заменить это свойство с фильтром. К примеру —

 Плюсы:

  • Простота внедрения.
  • Кросс-браузерная поддержка (IE требует ‘filter’).
  • Нет HTTP запросов.

Минусы:

  • Затрагивает весь элемент (как показано на рисунке выше).

 


Использование Альфа-канала

Другим способом получения прозрачности элементов является применение альфа-канала RGBA и HSLA .

[NOTE]Я надеюсь вы в курсе чем отличается RGB и RGBA?  На всякий случай:

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности. [/NOTE]

 

В отличии от предыдущего способа, которая снижает прозрачность всех элементов, использование альфа-канала влияет лишь только на плотность цвета.

Давайте взглянем на пример:

Мы по-прежнему создали некий белый блок, но в отличии от предыдущего примера, мы заменяем цвет фона с функцией света RGBA и снижаем альфа канал до 0,5. Это даст нам эффект прозрачности только для блока, а текст наш останется таким же и изменения его не затронут.

 

rgba

 

В случае с HSLA работает все точно так же за исключением того, что цвет состоит из тона (Hue), насыщенности (Saturation) и светлоты (Lightness).

[TIP] HSL - (от англ. Hue, Saturation, Lightness (Intensity)) — цветовая модель, в которой цветовыми координатами являются тон, насыщенность и светлота. Следует отметить, что HSV и HSL — две разные цветовые модели (Lightness — светлота, что отличается от яркости). [/TIP]

Если Вы используете в работе Photoshop — это цветовая функция работает аналогично вот такому диалоговому окну Image > Adjustment > Hue/Saturation:

hue

Плюсы:

  • Простота внедрения.
  • Нет HTTP запросов.

Минусы:

  • RGBA и HSLA не будет работать в Internet Explorer 8 и в более ранних версиях.

 


Filter Property – Путь для IE гурманов

Всем известно, что IE никогда (а может когда нибудь и будет) не будет считаться с современными общепринятыми нормами и стандартами. Они идет своим дебильным индивидуальным путем. Как я уже писал выше — IE не хочет воспринимать RGBA и HSLA  в версиях до 9 (аллилуйя! Хоть в 9 исправились! ). Вместо этого «любимая»  программка для скачивания нормальных браузеров, странно использует #ARGB и собственный filter.

Что такое #ARGB? Честно говоря, я не совсем понимаю чем они отличаются с RGBA, но одно могу сказать точно, RGB — принимает значения в диапазоне от 0 до 255, а #ARGB является шестнадцатеричным.

Давайте взглянем на то как мы можем это применять:

Мы все так же работаем с тем же блоком, но на этот раз мы добавили filter и -ms-filter для IE. Обратите внимание так же на то, что шестнадцатеричное число #80FFFFFF это конвертируемая в RGBA (255,255,255,0.5) . Для удобного использования и конвертирования я предлагаю Вам использовать инструменты для конвертирования из одной системы в другую, коих на просторах не мало.

Плюсы:

  • Работает в IE 8 или более ранних версиях.

Минусы:

  • Он работает только в IE.
  • Не понятный синтаксис и цветовой формат.

 


Итог: какое же средство для создания прозрачности (Transparency) лучше?

Это зависит лишь от того, что Вам требуется на определенном сайте и какие есть ограничения. Так, что вам лишь предоставляется выбирать лучшие пути решения данных вопросов. Выбирайте лучшие варианты для себя. Надеюсь статья вам покажется интересной и познавательной. Подписывайтесь пожалуйста на мой блог и комментируйте.  Спасибо за внимание. Всего доброго и до скорых встреч.

 


Новая система комментариев
comments powered by HyperComments