Создайте потрясающие фоны шахматной доски с помощью CSS

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/CodingStandardsandBestPracticesGroup(["Coding Standards and Best Practices"]) css/BasicConceptsGroup -.-> css/properties("Properties") css/BasicConceptsGroup -.-> css/values("Values") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/CodingStandardsandBestPracticesGroup -.-> css/comments("Comments") subgraph Lab Skills css/properties -.-> lab-35180{{"Узор фона шахматной доски"}} css/values -.-> lab-35180{{"Узор фона шахматной доски"}} css/colors -.-> lab-35180{{"Узор фона шахматной доски"}} css/width_and_height -.-> lab-35180{{"Узор фона шахматной доски"}} css/backgrounds -.-> lab-35180{{"Узор фона шахматной доски"}} css/comments -.-> lab-35180{{"Узор фона шахматной доски"}} end

Понимание структуры файлов проекта

Перед тем, как мы приступим к созданию узора шахматной доски, давайте рассмотрим файлы проекта, которые были предоставлены в виртуальной машине (VM).

Откройте файл index.html в редакторе, кликнув на него в панели проводника файлов.

Начальный HTML-файл должен выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- You will add your code here -->
  </body>
</html>

Теперь откройте файл style.css в редакторе.

Начальный CSS-файл должен быть пустым или содержать минимальные стили:

/* CSS styles will be added here */

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

Чтобы просмотреть вашу веб-страницу в браузере, нажмите кнопку "Go Live" в правом нижнем углу редактора. Это запустит живой сервер и отобразит вашу веб-страницу во вкладке Web 8080.

На данном этапе вы должны увидеть пустую страницу, так как мы еще не добавили никакого контента или стилей.

Создание HTML-структуры

Теперь, когда мы разобрались в файлах проекта, давайте создадим HTML-структуру для нашего узора шахматной доски.

Откройте снова файл index.html в редакторе.
Нам нужно добавить контейнерный элемент для нашего узора шахматной доски. Внутри тега <body> замените комментарий на элемент <div> с классом "checkerboard":

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="checkerboard"></div>
  </body>
</html>

Сохраните файл index.html, нажав Ctrl+S или выбрав "File > Save".
Теперь давайте добавим базовый CSS для определения размеров нашей шахматной доски. Откройте файл style.css и добавьте следующий код:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
}

Этот CSS-код выполняет следующие действия:

Устанавливает ширину и высоту нашей шахматной доски равными 240 пикселям.
Устанавливает цвет фона в белый (#fff).

Сохраните файл style.css.
Обновите вкладку Web 8080, чтобы увидеть изменения.

Теперь вы должны увидеть белый квадрат шириной и высотой 240 пикселей. Это будет полем для нашего узора шахматной доски.

Создание первого градиента

Теперь мы начнем создавать узор шахматной доски с использованием CSS-градиентов. Добавим первый линейный градиент, чтобы создать часть узора.

Понимание CSS-линейных градиентов

CSS-линейные градиенты позволяют создавать плавные переходы между двумя или более цветами по прямой линии. Функция linear-gradient() принимает угол и последовательность цветовых точек (color stops) в качестве параметров. Мы воспользуемся этой техникой для создания квадратов шахматной доски.

Следуйте этим шагам:

Откройте файл 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
  );
  background-size: 60px 60px;
}

Разберём, что делает этот градиент:

45deg задает угол градиента.
#000 25% создает черный цвет от 0% до 25% доступного пространства.
transparent 25% создает прозрачный цвет, начиная с 25%.
transparent 75% сохраняет прозрачный цвет до 75%.
#000 75% возвращается к черному цвету на 75% и продолжается до конца.
background-size: 60px 60px устанавливает размер каждой повторяющейся ячейки градиента.

Сохраните файл style.css.
Обновите вкладку Web 8080, чтобы увидеть изменения.

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

Завершение узора шахматной доски

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

Откройте снова файл 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-градиентов для создания сложных узоров без необходимости использования изображений, что приводит к более быстрому времени загрузки и лучшей масштабируемости.

Резюме

Поздравляем вас с успешным завершением лабораторной работы по созданию узора фона шахматной доски. В рамках этой лабораторной работы вы:

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

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

Теперь вы можете использовать эти знания для создания других узоров и визуальных эффектов с помощью CSS-градиентов. Вы можете попробовать:

Использовать разные цвета для шахматной доски.
Изменить размер квадратов.
Использовать разные углы для градиентов.
Создать другие геометрические узоры, такие как полосы или точки.

Техники, которые вы освоили в этой лабораторной работе, являются основой для создания сложных фоновых узоров с использованием только CSS.