HTML Practice

Градиенты, тени и фильтры

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

Градиенты

Градиенты — это плавные перетекания одних цветов в другие, используемые, в основном, для фона. В CSS градиенты бывают двух типов: линейные и радиальные.

Линейные градиенты задаются функцией linear-gradient(), которая принимает в качестве параметров направление градиента (в радианах - deg) и список точек (минимум 2), содержащие цвет и позицию точки (в процентах).

<div class="gradient"></div>

.gradient {
  background: linear-gradient(
    90deg, /* задаём направление градиента */
    blueviolet 0%, /* задаём цвет и позицию первой точки градиента */
    tomato 100% /* задаём цвет и позицию второй точки градиента */
  );
  height: 200px;
}

Подробнее о линейном градиенте можно прочитать здесь: MDN: linear-gradient()

Радиальные градиенты задаются функциейradial-gradient(), которая принимает в качестве параметров форму градиента (circle или ellipse) и список точек, содержащие цвет и позицию точки.

<div class="gradient"></div>

.gradient {
  background: radial-gradient(
    circle, /* задаём форму градиента */
    blueviolet 0%, /* задаём цвет и позицию первой точки градиента */
    tomato 100% /* задаём цвет и позицию второй точки градиента */
   );
  height: 200px;
}

Подробнее о радиальном градиенте можно прочитать здесь: MDN: radial-gradient()

Для быстрого формирования градиентов существуют генераторы градиентов, один из которых я рекомендую своим читателям: CSS Gradient

Тени

Тени в CSS подразделяются на два вида: тени текста и тени блоков.

Тени текста задаются свойством text-shadow, принимающим четыре параметра: сдвиг тени по оси X, сдвиг тени по оси Y, размытие тени и её цвет.

Тени блоков задаются свойством box-shadow, принимающим пять параметров: сдвиг по оси X, сдвиг по оси Y, размытие тени, радиус распространения и её цвет.

Рассмотрим пример:

<div class="shadow">Текст с тенью внутри блока с тенью</div>

.shadow {
  text-shadow: 1px 3px 5px grey;
  box-shadow: 0 5px 10px -3px black;

  max-width: 320px;
  padding: 50px;
  font-size: 18px;
  text-align: center;
  border-radius: 10px;
  color: teal;
  background: white;
  margin: 20px auto;
}

Разберёмся подробнее с параметрами теней. Сдвиги по осям X и Y позволяют перемещать тень относительно текста. Они могут быть как положительными, так и отрицательными,

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

Поиграть с box-shadow можно здесь: Box-Shadow CSS Generator, а с text-shadow тут: Text Shadow CSS Generator.

Фильтры

Фильтры в CSS решают примерно ту же задачу, что и фильтры в фотошопе или инстаграме (кому что ближе). Обычно, фильтры применяются к изображениям, но они могут быть применены

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

blur()— применяет к элементу размытие по Гауссу (px)
brightness()— влияет на яркость изображения. (0% - 100%)
contrast()— изменяет контрастность изображения. (0% - 100%)
drop-shadow()— ведёт себя похожим образом наbox-shadow(), но, применяясь к изображению с прозрачным фоном или сложной геометрической фигуре, образует тень, обтекающую именно фигуру, а не блок. Пример:filter: drop-shadow(1px 1px 5px 0 black);
grayscale()— делает изображение чёрно-белым. (0% - 100%)
hue-rotate()— вращает цвета изображения по HSL-кругу. (0deg - 360deg)
invert()— создаёт негатив изображения. (0% - 100%)
opacity()— ведёт себя так же, как и обычное свойство opacity, изменяя прозрачность изображения. (0% - 100%)
saturate()— устанавливает насыщенность для изображения. (0% - 100%)
sepia()— имитирует эффект "старинного снимка". (0% - 100%)
url()— принимает ссылку на SVG-фильтр и применяет этот фильтр к изображению.

Этот пример от html5book наглядно демонстрирует возможности фильтров: CSS3 Filters