Градиенты
Начнем с базовых градиентов. Нам понадобится два цвета и направление градиента.
div {
width:500px;
height: 500px;
background-color: yellow;
background-image:
linear-gradient(
110deg,
red, blue
);
}
110deg - это 110 градусов. Отсчет градусов начинается от верха
Рассмотрим более сложный пример
div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to right,
red,
yellow 25%,
yellow 35%,
green 50%
);
}
У многих возникает вопрос, почему проценты в примере в сумме не дают 100%? Это вызвано тем, что проценты тут указывают не ширину полоски, а отсчет расстояния от начала. То есть представьте, что у Вас маршрут в 100км. Когда Вы проехали 25км - цвет должен стать желтым. Проехали еще 10 или 35 км от начала - цвет по прежнему желтый, но далее он плавно становится зеленым, и к 50км мы видим зеленый. Зеленый цвет сохранится до конца маршрута.
Редактор градиентов
http://www.colorzilla.com/gradient-editor/
http://uigradients.com/#
Радиальные градиенты
background-image:radial-gradient(circle farthest-corner at 45px 45px, white 0%, red 50%);
Повторяющиеся градиенты
Примеры сайтов с градиентами
http://line25.com/articles/web-design-trend-showcase-super-gradients
Полезное чтиво:
CSS-tricks про градиенты https://css-tricks.com/css3-gradients/
CSS patterns http://lea.verou.me/css3patterns/ https://24ways.org/2011/css3-patterns-explained/
Действительно ли Вы понимаете CSS-градиенты https://medium.com/@patrickbrosset/do-you-really-understand-css-linear-gradients-631d9a895caf
Эффект загнутого уголка у листа бумаги https://webformyself.com/sozdajte-prostoj-effekt-zagnutogo-ugolka-na-css/
Практика:
- Создать базовый градиент
- Есть фотография. Нужно наложить на нее полупрозрачный градиент.
- Задать градиент так, чтобы получить следующую картинку
- Создать градиент полосами. Флаг Колумбии
- Сделать «карамельный» фон для progress bar’a
- Делаем круг радиальным градиентом
- Делаем мишень радиальным градиентом
- Делаем круг с бликом
Сделать круг заполненный полосочками
Сделать фотографию с тремя секторами градиентов http://www.coline-game.com/
- Создаем вокруг блока градиентную границу.