Веб-разработка предоставляет нам множество инструментов для создания различных визуальных элементов. Одним из таких элементов является шахматная доска, которая может быть использована в различных проектах: от игр до декоративных элементов. В этой статье мы подробно рассмотрим, как создать фон шахматной доски с закругленными углами и стилями при наведении с использованием 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>
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
Создание стилей для шахматной доски
Теперь перейдем к созданию 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.
- Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
- УЧАСТВОВАТЬ ЗА 0 РУБ.
- Расскажем, как получить подписку
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
