Теневое искусство и линейные градиенты — Тренажёр HTML Academy

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

Бокс с тенью box-shadow

Очень небольшая часть, наверное, одна из самых коротких. Посвящена одному, но достаточно комплексному свойству box-shadow, которое позволяет добавить указанному блоку тень.

Забегая вперед напишу, что есть еще фильтр drop-shadow(), который мы разберём чуть по позже, и свойство text-shadow, которое я уже упоминал в мобильном приложении, а в тренажёрах Академии они будут в самом последнем блоке «Тонкостей».

В этой части именно про box-shadow — тень блока элемента, не текста и не контента. Это свойство само по себе комплексное как, например, рамки border и принимает целый список значений:

• Позиция тени inset — необязательный параметр указывающий, что тень внутренняя, а не внешняя как по умолчанию;
• Смещение по X — обязательный параметр, работающий подобно функции translateX(), но для тени блока;
• Смещение по Y — обязательный параметр, аналогичный параметр для вертикального смещения;
• Размытие — необязательный параметр, принимает величину размытия границ тени — чем больше значение, тем шире и светлее тень;
• Растяжение — необязательный параметр, изменяет площадь тени на указанную величину, по умолчанию она равна размеру блока;
• Цвет тени — необязательный параметр окрашивающий тень, принимаются все варианты — слова, HEX, RGB (a) и так далее.

Важно заменить, что порядок параметров в этом свойстве крайне важен. Несмотря на то, что обязательными являются только значения смещения тени. Например, что бы задать тени только растяжение 5px и цвет red, всё равно нужно указывать нулевые значения смещений и размытия:

.shadow-border {
  box-shadow: 0 0 0 5px red;
}

В этом случае не упоминать можно только параметр inset. Однако, если нужны только смещения и цвет, то запись можно сократить:

.flat-shadow {
  box-shadow: 10px 10px red;
}

По аналогии с фоновыми изображениями background-image, свойство тени элемента box-shadow может принимать сразу несколько наборов параметров, тем самым генерируя несколько теней:

.glitch-shadow {
  box-shadow:
    10px 10px red,
    -10px -10px blue;
}

При этом тень указанная выше по коду будет так же выше по слою отображения, то есть в нашем примере red будет перекрывать blue в местах их соприкосновения.

Особенно хорошо видно как работает этот нюанс с внутренними тенями inset — на этих особенностях свойства построена вторая половина части. Мы с нуля, только с помощью внутренних теней отрисовали кольца логотипа Audi:

.circle {
  margin: 10px auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow:
    inset 2px 2px 2px 0 white,
    inset 0 0 0 4px #4f5054,
    inset 0 0 0 5px black,
    inset -5px -5px 5px 3px white,
    inset 0 0 0 9px #6c6d70,
    inset 0 0 0 10px black;
}

Испытания

Часть сама по себе очень небольшая и очень простая. Первое испытание аналогично — простое и слегка скучное. Нужно просто сделать три кнопки с разными тенями:

А вот по поводу второго испытание мне есть, что сказать. И без мата здесь обойтись трудно. Испытание называется «Зловещие тени», задача на множественные тени — разместить их как на примере.

Все бы ничего, задача на 90% тривиальная, но есть, сука, нюанс. Внутренняя тень кнопки расположенная как бы в шахматном порядке:

С помощью только свойства box-shadow сделать это невозможно, как раз из-за перекрытия теней. Если смещать внутренние тени на половину, они закрасят эту половину кнопки и даже если накорячить сверху синие «тени» как замену заливки, то зелёные тени с другой стороны будут такие же.

И что вы думаете, здесь есть какой-то изящный выход? Какая-то хитрость со свойством? Не-а. Здесь есть дополнительный пустой блок .help который надо тупо налепить поверх:

Ребята на форуме еще городили псевдоэлементы, что менее кастыльный вариант, но, имхо, всё еще какое-то дристалово. Ну вот нафига? Чему это испытание должно научить? Двигать div’ы? Причем тут тени?

В общем, испытание я, конечно, сделал, но осадочек остался:

Линейные градиенты

Градиентами в CSS по сути являются фоновые изображения, генерируемые с помощью градиентных функций. В нашем случае мы разбираем линейный градиент linear-gradient(), радиальный мы, видимо, позже обсудим.

Именно функцию градиента мы подставляем как значение вместо url():

.gradient-box {
  background-image: linear-gradient(yellow, green);
}

Функция принимает минимум два атрибута — два цвета между которыми строится плавный переход. «Минимум» потому, что таких цветов можно задать сколько угодно, таким образом задавая сложный многоцветный градиент. Цвета будут отображаться в том порядке, в котором они указаны в функции.

Направление градиента

У функции линейного градиента linear-gradient() есть еще один необязательный атрибут — направление или угол наклона градиента. Он обязательно указывается первым, перед всеми цветами.

Направление можно задать с помощью ключевых слов top, bottom, right, left с предлогом to перед направлением, например:

.to-top-gradient {
  background-image: linear-gradient(to top, yellow, green);
  /* снизу вверх, от жёлтого к зелёному */
}

.to-angle-gradient {
  background-image: linear-gradient(to right top, yellow, green);
  /* от левого нижнего угла к верхнему правому */
}

Или можно задать угол наклона градиента в градусах deg, по аналогии с функцией поворота rotate(), положительные значения поворачивают по часовой стрелке, отрицательные — против часовой:

.gradient-60deg {
  background-image: linear-gradient(60deg, yellow, green);
}

.gradient-135deg {
  background-image: linear-gradient(-135deg, yellow, green);
}

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

При изменении размера блока, градиент с ключевыми словами направления будет также меняться, так как «правый верхний» to right top угол будет менять свое положение. В случае указания градусов поворота deg, градиент останется в том же положении.

Пропорции и колорстопы

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

Этим поведением цветов в градиенте можно управлять с помощью так называемых колорстопов (color-stop) — значение позиции цвета в градиенте, то с какой или до какой позиции будет распространяться цвет.

Колорстопы записываются сразу после указания цвета, их можно задавать практически в любых размерных единицах, но чаще всего в процентах % или пикселях px. Самый простой двухцветный градиент по умолчанию, формально, тоже имеет колорстопы и выглядит так:

.gradient-colorstop {
  background-image: linear-gradient(to right, yellow 0%, green 100%);
}

Если читать это человеческим языком, то получается градиент от жёлтого в самом начале — 0% от ширины размера блока, до зелёного в самом конце — 100% ширины блока.

Если поменять колорстоп зелёного на 50%, то получится следующее:

.gradient-colorstop50 {
  background-image: linear-gradient(to right, yellow 0%, green 50%);
}

Теперь градиентный переход идёт от жёлтого в 0% до зелёного в 50%, а всё что дальше занимает зелёный как «финальный» цвет перехода.

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

В случае, например, трёхцветного градиента — по умолчанию позиции цветов равно удалены друг от друга, то есть занимают 0%, 50% и 100%:

.gradient-trio {
  background-image: 
     linear-gradient(to right, red 0%, yellow 50%, green 100%);
}

Например, мы хотим, чтобы жёлтый цвет по центру занимал 50% площади. Для этого нам нужно добавить еще один жёлтый колорстоп:

.gradient-trio-50 {
  background-image: 
     linear-gradient(to right, red 0%, yellow 25%, yellow 75%, green 100%);
}

Таким образом, всю площадь между 25% и 50% занимает жёлтый цвет, а между краями задаются градиентные переходы.

Что будет если задать двум цветам одинаковый колорстоп? В этом случае переход будет резкий, без градиентной «размывки». Например, зададим red 25% и green 75% в примере выше, получится такая картина:

Эта особенность помогает в создании огромного количества декоративных эффектов. Чаще всего в этом случае используются колорстопы в пикселях px, так как они позволяют задать точный размер декоративного элемента, а также прозрачность — ключевое слово transparent или с помощью RGBA.

Например, в тренажёре мы сделали вот такой «цветок»:

Повторяющиеся и множественные градиенты

Можно пойти еще дальше, функция линейного градиента имеет своего старшего брата — repeating-linear-gradient() функция повторяющегося линейного градиента.

Синтаксис атрибутов у нее абсолютно такой же, но работает она только с градиентами чей последний колорстоп меньше размера блока. Иначе повтор просто не видно.

С помощью повторяющегося линейного градиента repeating-linear-gradient() можно делать простенькие паттерны, буквально одной строчкой кода:

А можно и не простенькие! Как я уже писал выше — формально, градиент это изображение. А как мы помним из части про фоны, свойство background-image может принимать сразу несколько значений и градиенты не исключение.

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

Еще на градиент работает свойство background-size, которое почему-то в той же части про фоны пропустили (я перепроверил!). Это свойство задаёт размер фонового изображения или, если их несколько, работает аналогично background-position сопоставляя порядок указанный в background-image.

Используя все эти особенности и линейные градиенты можно создавать достаточно сложные фигуры, которые с помощью background-repeat превращаются в уже комплексные паттерны:

.pattern {
  height: 100%;
  background-color: #333333;
  background-image:
    linear-gradient(135deg, white 25%, transparent 25%),
    linear-gradient(225deg, white 25%, transparent 25%),
    linear-gradient(45deg, white 25%, transparent 25%),
    linear-gradient(315deg, white 25%, transparent 25%);
  background-position:
    25px 0, /* смещены вправо */
    25px 0,
    0 0,
    0 0;
  background-size: 50px 50px;
  background-repeat: repeat;
}

Испытания

Испытаний аж четыре штуки. По моему, пока самое большое количество на одну часть, что были в тренажёрах.

Первое супер простенькое, на направление градиента:

Второе на колорстопы и резкие переходы, тоже не сложное, но уже заставляет посидеть. Учимся рисовать флаги:

Третье испытание ломает мозги. И это я сейчас не с негативом! В отличие от испытания с тенями, тут все логически понятно и решается использованием одного инструмента, без костылей. Делаем паттерн сюрикенов:

Просидел я на нём минут 40, наверное, но это тот случай когда сложность испытания какая-то приятная, что ли.

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

Есть подвохи, например, с последним спутником, а есть совсем простые как Титан, где только один градиент. Было увлекательно, главное не запутаться в комментариях в CSS.

На этом закончим. Градиенты были очень интересной темой. От теней немного подпортило впечатление последнее испытание. Следом у нас «Кекстаграм» — посмотрим на CSS-фильтры и возвращаемся к JavaScript!

Вам большое спасибо за внимание! Прошу прощение, за негатив, но без него было бы, наверное, слишком обезличено.

Ссылки на предыдущие статьи по HTML Academy:

Знакомство с Веб-разработкой
Знакомство с HTML и CSS
Знакомство с JavaScript
Знакомство с PHP
Таблицы и подробно о формах
Наследование, каскады и селекторы
Блочная модель, поток и сетка на float
Гибкие флексбоксы display: flex
Удобные сетки на гридах display: grid
Пропуск блока «Погружение»
Позиционирование и двумерные трансформации
Теневое искусство и линейные градиенты <- Вы здесь
CSS-фильтры и Кекстаграм
Мастерские
Продвинутые Мастерские
...

Также мои соц. сетки, которые я продолжаю вести:

Мой Twitter
Мой Telegram
Мой Паблик ВК

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!