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

Подготовка HTML-разметки

Для начала создадим HTML-разметку, которая будет содержать блоки для наших шахматных клеток. Разметка будет простой, с использованием <div> элементов для клеток.

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Шахматная доска на CSS</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="chessboard">

<!-- Клетки доски -->

<div class="cell"></div>

<!-- Повторить для всех клеток доски -->

</div>

</body>

</html>

Создание стилей для шахматной доски

Теперь перейдем к созданию CSS-стилей для нашей шахматной доски. Начнем с базовых стилей для шахматной доски и клеток.

/* Основные стили для шахматной доски */

.chessboard {

display: grid;

grid-template-columns: repeat(8, 1fr);

width: 320px;

height: 320px;

margin: 0 auto;

border: 2px solid #000;

border-radius: 10px;

}

/* Стили для клеток */

.cell {

width: 40px;

height: 40px;

background-color: #fff;

}

.cell:nth-child(odd) {

background-color: #000;

}

Закругленные углы

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

/* Закругленные углы для клеток */

.cell {

border-radius: 5px;

}

Добавление стилей при наведении

Теперь добавим стили, которые будут применяться при наведении на клетки доски. Для этого используем псевдокласс :hover.

/* Стили при наведении */

.cell:hover {

box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

cursor: pointer;

}

Использование градиентов для улучшения внешнего вида

Для создания более интересного фона клеток, можно использовать CSS градиенты.

/* Пример с градиентами */

.cell {

background: linear-gradient(135deg, #f5f5f5 25%, transparent 25%) -50px 0,

linear-gradient(225deg, #f5f5f5 25%, transparent 25%) -50px 0,

linear-gradient(315deg, #f5f5f5 25%, transparent 25%),

linear-gradient(45deg, #f5f5f5 25%, transparent 25%);

background-size: 100px 100px;

background-color: #999;

}

Пример с тенями

Для добавления глубины и объема, можно использовать тени.

/* Тени для клеток */

.cell {

box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);

}

Введение в CSS Grid

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

Пошаговая инструкция

Шаг 1: подготовка HTML-разметки

Создаем базовую структуру HTML:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Шахматная доска на CSS</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="chessboard">

<!-- Создаем 64 клетки для шахматной доски -->

<div class="cell"></div>

<!-- Повторить для всех клеток -->

</div>

</body>

</html>

Шаг 2: базовые стили CSS

Добавляем базовые стили для доски и клеток:

.chessboard {

display: grid;

grid-template-columns: repeat(8, 1fr);

width: 320px;

height: 320px;

margin: 0 auto;

border: 2px solid #000;

border-radius: 10px;

}

.cell {

width: 40px;

height: 40px;

background-color: #fff;

}

.cell:nth-child(odd) {

background-color: #000;

}

Шаг 3: закругленные углы

Добавляем закругленные углы к клеткам:

.cell {

border-radius: 5px;

}

Шаг 4: стили при наведении

Добавляем стили при наведении:

.cell:hover {

box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

cursor: pointer;

}

Поддержка различных экранов

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

@media (max-width: 600px) {

.chessboard {

width: 100%;

height: auto;

}

.cell {

width: calc(100% / 8);

height: calc(100% / 8);

}

}

Использование изображений

Для более визуально привлекательного дизайна можно использовать изображения для фона клеток:

.cell:nth-child(odd) {

background-image: url('black-cell.png');

background-size: cover;

}

.cell:nth-child(even) {

background-image: url('white-cell.png');

background-size: cover;

}

Заключение

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