Урок 2: CSS оформление игры

🎯 Цель урока

В этом уроке мы превратим простую HTML разметку в красивую и современную игру. Научимся использовать CSS Grid, градиенты, анимации и создавать адаптивный дизайн.

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

Результат стилизации

Посмотри, как будет выглядеть игра после применения CSS:

5 Победы

2 Поражения

1 Ничьи

3 Серия

👤 Игрок

✊

🤖 Компьютер

✌️

🏗️ Базовые стили и сброс

Начнём с базовых стилей и сброса браузерных стилей по умолчанию. Это обеспечивает одинаковый вид во всех браузерах.

🏗️ Базовые стили

/* Сброс браузерных стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Включает границы в размер */
}

/* Стили body */
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B73FF 100%);
    margin: 0;
    padding: 10px;
    min-height: 100vh; /* Минимум на всю высоту экрана */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Основной контейнер игры */
.game-container {
    background: rgba(255, 255, 255, 0.95); /* Полупрозрачный белый */
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-width: 700px;
    backdrop-filter: blur(10px); /* Размытие фона */
}

box-sizing: border-box включает отступы и границы в размер элемента. backdrop-filter создаёт эффект матового стекла.

🌈 Магия градиентов

Градиенты делают интерфейс современным и привлекательным:

🌈 Примеры градиентов

/* Линейные градиенты для разных элементов */
.stat-card {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.battle-arena {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
}

.choice-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Радиальный градиент для особых эффектов */
.special-effect {
    background: radial-gradient(circle, #ff9a9e, #fecfef);
}

📊 CSS Grid для статистики

CSS Grid идеально подходит для создания сетки статистических карточек. Он автоматически адаптируется под размер экрана.

📊 Сетка статистики

/* Сетка для статистических карточек */
.game-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 равные колонки */
    gap: 10px; /* Отступ между карточками */
    margin-bottom: 15px;
}

/* Стили отдельной карточки статистики */
.stat-card {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    padding: 12px;
    border-radius: 15px;
    color: white;
    font-weight: bold;
    text-align: center;
    border: 2px solid #4facfe;
    transition: all 0.3s ease; /* Плавные переходы */
}

/* Эффект при наведении */
.stat-card:hover {
    transform: translateY(-3px); /* Поднять карточку */
    box-shadow: 0 8px 20px rgba(79, 172, 254, 0.4);
}

/* Стили для числа и подписи */
.stat-number {
    font-size: 1.5rem;
    display: block;
}

.stat-label {
    font-size: 0.8rem;
    opacity: 0.9;
}

⚔️ Стилизация боевой арены

Создадим эффектную боевую арену с использованием CSS Grid для размещения игрока, компьютера и разделителя "VS".

⚔️ Боевая арена

/* Контейнер боевой арены */
.battle-arena {
    background: linear-gradient(135deg, #ffecd2, #fcb69f);
    border-radius: 25px;
    padding: 20px;
    margin: 20px 0;
    border: 3px solid #ff8a65;
    position: relative;
    overflow: hidden; /* Скрыть выходящие эффекты */
}

/* Сетка VS секции */
.vs-section {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Боковые колонки равные, центр по содержимому */
    gap: 20px;
    align-items: center;
    margin: 20px 0;
}

/* Стороны игрока и компьютера */
.player-side, .computer-side {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 20px;
    border: 3px solid #ddd;
    text-align: center;
    transition: all 0.3s ease;
}

/* Эффект при наведении */
.player-side:hover, .computer-side:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Отображение выборов */
.choice-display {
    font-size: 6rem;
    margin: 15px 0;
    transition: all 0.5s ease;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2)); /* Тень для эмодзи */
}

/* VS разделитель */
.vs-divider {
    font-size: 3rem;
    color: #ff6b6b;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(255, 107, 107, 0.5);
    animation: glow 3s ease-in-out infinite alternate; /* Эффект свечения */
}

/* Анимация свечения */
@keyframes glow {
    from { 
        text-shadow: 0 2px 4px rgba(255, 107, 107, 0.5); 
    }
    to { 
        text-shadow: 0 2px 4px rgba(255, 107, 107, 0.9), 0 0 20px rgba(255, 107, 107, 0.3); 
    }
}

🎮 Интерактивные кнопки

Создадим красивые и отзывчивые кнопки выбора с эффектами наведения, нажатия и блеском.

🎮 Кнопки выбора

/* Сетка кнопок выбора */
.choice-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 равные колонки */
    gap: 15px;
    margin: 20px 0;
}

/* Базовые стили кнопки */
.choice-btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 20px;
    font-size: 3rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Эффект блеска */
.choice-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

/* Эффекты при наведении */
.choice-btn:hover {
    transform: scale(1.1); /* Увеличить кнопку */
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}

.choice-btn:hover::before {
    animation: shine 0.6s ease-in-out; /* Запустить блеск */
}

/* Анимация блеска */
@keyframes shine {
    0% { 
        transform: translateX(-100%) translateY(-100%) rotate(45deg); 
        opacity: 0; 
    }
    50% { 
        opacity: 1; 
    }
    100% { 
        transform: translateX(100%) translateY(100%) rotate(45deg); 
        opacity: 0; 
    }
}

/* Эффект нажатия */
.choice-btn:active {
    transform: scale(0.95); /* Уменьшить при нажатии */
}

/* Стили для подписи кнопки */
.choice-label {
    display: block;
    font-size: 0.9rem;
    margin-top: 5px;
    font-weight: bold;
}

✨ Анимации для живости

Добавь анимации, чтобы сделать игру более живой и отзывчивой:

Bounce

Pulse

Rotate

Shake

✨ Полезные анимации

/* Анимация пульсации для результата */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Применение анимации к результату */
.result-display {
    animation: fadeIn 0.5s ease-out;
}

/* Анимация победы */
.win-animation {
    animation: pulse 0.6s ease-in-out 3; /* Повторить 3 раза */
}

📱 Адаптивный дизайн

Мобильные устройства: На экранах меньше 768px меняем сетку статистики на 2x2 и делаем боевую арену вертикальной.

CSS Grid: Используй grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) для автоматической адаптации количества колонок.

Кнопки: На мобильных делай кнопки больше для удобства касания - минимум 44px высоты по рекомендациям Apple.

📱 Медиа-запросы

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    .game-stats {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки вместо 4 */
    }
    
    .vs-section {
        grid-template-columns: 1fr; /* Вертикальный layout */
        gap: 15px;
    }
    
    .vs-divider {
        order: 2; /* Разместить VS между сторонами */
        margin: 10px 0;
    }
    
    .choice-btn {
        padding: 25px 20px; /* Больше отступы для касания */
        font-size: 2.5rem;
    }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
    .game-container {
        padding: 15px;
        margin: 10px;
    }
    
    .choice-display {
        font-size: 4rem; /* Меньше эмодзи */
    }
}

🎨 Твоё задание

Примени CSS стили к своей HTML разметке:

Базовые стили и сброс браузерных стилей по умолчанию
Красивый градиентный фон для body и контейнеров
CSS Grid сетку для статистических карточек
Стилизацию боевой арены с градиентами и эффектами
Интерактивные кнопки с эффектами наведения и блеском
Анимации для пульсации, появления и других эффектов
Адаптивный дизайн с медиа-запросами
Тени, скругления и современные эффекты

💡 Экспериментируй с градиентами и анимациями!

Следующий урок: JavaScript логика →

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