Урок 2: CSS стилизация игры Memory

🎯 Цели урока

Настроить базовые стили для всех элементов
Создать Grid-сетку для игрового поля
Стилизовать карточки с эффектом переворота
Добавить анимации и переходы
Создать адаптивный дизайн

🔨 Что мы создаем

Красивый интерфейс игры Memory в сине-голубых тонах с плавными анимациями, эффектами наведения и адаптивной сеткой для карточек.

1. Базовые стили и сброс

Шаг 1

Сброс стилей и общие настройки

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f8ff;
    padding: 20px;
}

box-sizing: border-box обеспечивает правильный расчет размеров элементов. Фоновый цвет #f0f8ff создает приятный голубоватый оттенок.

Шаг 2

Стили заголовка

h1 {
    color: #333;
    margin-bottom: 20px;
}

Простые стили для заголовка с темным цветом и отступом снизу.

2. Информационная панель

Шаг 3

Стилизация игровой информации

#game-info {
    margin-bottom: 15px;
    font-size: 18px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
}

Панель информации получает белый фон, скругленные углы и выглядит как карточка. display: inline-block позволяет элементу подстраиваться под содержимое.

3. CSS Grid для игрового поля

Шаг 4

Настройка сетки

#game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 500px;
    margin: 0 auto 20px;
}

CSS Grid создает сетку 4x4 для карточек:

repeat(4, 1fr) - 4 колонки равной ширины
gap: 10px - промежутки между карточками
max-width: 500px - ограничение ширины
margin: 0 auto - центрирование

4. Стилизация карточек

Шаг 5

Основные стили карточки

.card {
    width: 100px;
    height: 100px;
    background-color: #4a6fa5;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
    position: relative;
}

Карточка имеет фиксированный размер, синий цвет и плавную анимацию масштабирования. position: relative нужен для позиционирования сторон карточки.

Шаг 6

Стили для сторон карточки

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-front {
    background-color: #ffcc00;
    display: none; /* Изначально скрыта */
}

.card-back {
    background-color: #4a6fa5;
    color: white;
    font-size: 24px;
}

Обе стороны занимают всю площадь карточки благодаря position: absolute. Flexbox центрирует содержимое. Лицевая сторона изначально скрыта.

5. Состояния карточек

Шаг 7

Перевернутая карточка

.card.flipped .card-front {
    display: flex; /* Показываем картинку */
}

.card.flipped .card-back {
    display: none; /* Скрываем рубашку */
}

Когда к карточке добавляется класс flipped, показывается лицевая сторона, а рубашка скрывается.

Шаг 8

Найденная пара

.card.matched {
    cursor: default;
    opacity: 0.8;
}

.card.matched .card-front {
    display: flex;
    background-color: #a5d6a7; /* Зеленый фон */
    border: 3px solid #4CAF50; /* Зеленая рамка */
}

.card.matched .card-back {
    display: none;
}

Найденные пары получают зеленый цвет, рамку и слегка прозрачны. Курсор меняется на default, показывая, что карточка неактивна.

6. Стили для изображений

Шаг 9

Размеры и подгонка изображений

.card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

Изображения получают фиксированный размер 80x80px. object-fit: contain сохраняет пропорции и вписывает изображение в заданные размеры.

7. Стили кнопки

Шаг 10

Кнопка перезапуска

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #45a049;
}

Кнопка выполнена в зеленых тонах с эффектом наведения. При наведении цвет становится темнее.

8. Демонстрация стилей

Различные состояния карточек

🃏 Состояния карточек

Найдено пар: 2 из 8 | Попытки: 5

🐶

🐱

🐰

9. Полный CSS код

Итоговый файл styles.css

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f8ff;
    padding: 20px;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

#game-info {
    margin-bottom: 15px;
    font-size: 18px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 500px;
    margin: 0 auto 20px;
}

.card {
    width: 100px;
    height: 100px;
    background-color: #4a6fa5;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s;
    position: relative;
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-front {
    background-color: #ffcc00;
    display: none;
}

.card-back {
    background-color: #4a6fa5;
    color: white;
    font-size: 24px;
}

.card.flipped .card-front {
    display: flex;
}

.card.flipped .card-back {
    display: none;
}

.card.matched {
    cursor: default;
    opacity: 0.8;
}

.card.matched .card-front {
    display: flex;
    background-color: #a5d6a7;
    border: 3px solid #4CAF50;
}

.card.matched .card-back {
    display: none;
}

.card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #45a049;
}

10. Ключевые CSS концепции

CSS Grid

Создает адаптивную сетку для размещения карточек. Автоматически подстраивается под размер экрана.

Flexbox

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

Transitions

Плавные переходы создают профессиональный вид. Анимация масштабирования при наведении улучшает UX.

Позиционирование

position: relative и absolute позволяют размещать стороны карточки одну поверх другой.

Классы состояний

Классы .flipped и .matched управляют визуальным состоянием карточек через JavaScript.

← Урок 1: HTML структура Урок 3: JavaScript основы →

🎨 Урок 2: CSS стилизация игры Memory