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