Лучшие статьи категории «Веб-сайты»

Подписка

Эффект прозрачности в дизайне

Раньше, задать прозрачность можно двумя способами: использовать свойство opacity или назначить элементу в качестве фона специально подготовленное изображение. Оба свойства имели минусы, с которыми приходилось мириться. Так, свойство opacity задавало прозрачность всему блоку, включая его содержимое. Изображение же было неудобным т.к. для каждой новой вариации нужна была новая картинка. Положение усугублялось еще и тем, что при желании изменить процент прозрачности, нужно было переделывать картинку, что занимало время. Несмотря на эти и другие ограничения многие старались не использовать прозрачность, а если использовали, то с учетом всех особенностей.

Именно поэтому один с первых нововведений в CSS3 была новая цветовая модель — RGBA. Буква «A» здесь означает не что иное как альфа (прозрачность). Благодаря нововведению разработчики получили простой функционал для управления прозрачностью элемента, который разом решал все прошлые проблемы. С этого момента прозрачность стала широко применяться и до сих пор остается очень популярным эффектом.

Её можно задать к абсолютно любым блокам на сайте в независимости от того, какая информация находится внутри. Прозрачность помогает различать уровни благодаря контрасту, который создается между фоном и блоком. Этот эффект можно часто увидеть на сайтах, где используются большие фоновые изображения. Поверх изображения помещается блок с текстом, через который виден фон. Мы одновременно можем видеть текстовую часть и фотографию. Причем оба блока не мешают, а дополняют друг друга, создавая гармонию и надлежащий между элементами баланс.

Ниже мы подготовили примеры сайтов, которые отлично демонстрируют преимущества этого крайне полезно эффекта.

Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Эффект прозрачности в дизайне
Категория: Веб-сайты Рубрики: , Автор: Илья Федотов (G+)


Комментарии (3)

Дмитрий / 20 Февраль 2014 в 21:11

Очень полезный материал, спасибо.

Сергей / 19 Май 2014 в 11:38

Сейчас делаю дизайн шапки своего сайта, информация очень помогла.

Витос / 7 Сентябрь 2015 в 19:28

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

Комментирование этой статьи закрыто ...

Поиск

Популярные статьи

Комментарии

  • Дмитрий Решетов: Роман, сервисы меняются, информация устаревает...
  • Богдан: Похоже все стали платными. Информация о бесплатности...
  • Александр: Ссылки супер, некоторые использую при создании...
  • Александр: Да действительно, я бы то же хотел бы видеть на своем...
  • Веб-мастер: Отличная статья, много полезной информации. Я как то...
  • Роман: Вы сами то хоть им пользовались? Половина отправляет...
  • Руслан: Не знал что есть такое понятие как атомарный дизайн.
  • Shky: Как раз искал что-то новенькое для сайта. Благодарю за...

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus