Главная » Статьи » Дополнения

Градиенты в веб дизайне. Тренды и примеры.

81

0



Тенденция градиента началась с web 2.0 и с тех пор продвинулась довольно далеко. Современные градиенты могут быть разработаны исключительно в CSS3, поэтому их легче встроить в кнопки, фоны и даже типографику.

 

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

Фоновый градиент

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

 

Градиенты веб-дизайна

Некоторые популярные сайты имеют пример с очень простым фоновым градиентом. Он разрабатывается с использованием чистого CSS3, а также использует статический цвет в качестве запасного метода.

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

 

Градиенты

Динамические эффекты

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

 

 

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

Градиент эффект

Сайт One John St в этом деле полная противоположность. На заднем плане закреплен один основной градиент, и он следует за вами во время прокрутки. 

 

Логотипы и текстовые эффекты

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

Градиенты по тексту

Real Future Fair, пожалуй, мой любимый пример. В заголовке используется фиксированный градиент цвета, но при прокрутке вниз этот градиент смещается к логотипу.Это остается неизменным на протяжении всего пути, и дизайнер уделял пристальное внимание положению логотипа при прокрутке сайта. 

 

 

Таким образом, если логотип находится посередине между заголовком и главной страницей, он будет показывать только часть градиентного логотипа. Довольно круто, верно?

 

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

Оцените материал:
Не забудьте поделиться с друзьями:
Комментарии
Войдите: