Завершение узора шахматной доски
Теперь добавим второй линейный градиент, чтобы завершить узор шахматной доски и сделать его повторяющимся на всем элементе.
-
Откройте снова файл style.css
.
-
Измените класс .checkerboard
, чтобы включить второй линейный градиент, который создаст чередующийся узор:
.checkerboard {
width: 240px;
height: 240px;
background-color: #fff;
background-image:
linear-gradient(
45deg,
#000 25%,
transparent 25%,
transparent 75%,
#000 75%,
#000
),
linear-gradient(
-45deg,
#000 25%,
transparent 25%,
transparent 75%,
#000 75%,
#000
);
background-size: 60px 60px;
background-repeat: repeat;
}
Что мы добавили:
- Второй
linear-gradient()
, который похож на первый, но с углом -45deg
, чтобы создать чередующийся узор.
- Свойство
background-repeat: repeat
гарантирует, что узоры повторяются на всем элементе.
Сочетание этих двух градиентов под разными углами создает классический узор шахматной доски. Первый градиент создает один набор диагональных квадратов, а второй градиент создает другой набор, который заполняет промежутки.
-
Сохраните файл style.css
.
-
Обновите вкладку Web 8080, чтобы увидеть итоговый результат.
Теперь вы должны увидеть полноценный узор шахматной доски с чередующимися черными и белыми квадратами. Узор должен повторяться на всем элементе размером 240 на 240 пикселей.
Как работает узор
Эффект шахматной доски создается следующим образом:
- Используются два линейных градиента с противоположными углами (45deg и -45deg).
- Каждый градиент создает узор черных квадратов в углах.
- Прозрачные области позволяют просвечивать белый фон.
- Свойство
background-size
контролирует размер каждого квадрата в узоре.
- Свойство
background-repeat
делает узор повторяющимся на всем элементе.
Эта техника демонстрирует мощь CSS-градиентов для создания сложных узоров без необходимости использования изображений, что приводит к более быстрому времени загрузки и лучшей масштабируемости.