Главная›Начинающий web-дизайнер›Урок 12

Цветовые палитры в веб-дизайне

Хороший сайт — это не только код, но и красивые цвета. Учимся подбирать палитру и записывать цвета по-разному.

📋 Заданий: 6✅ С автопроверкой: 3✨ Новых: 3

🌈Задания

1

Заполни таблицу CSS-свойств

легко

Скачай таблицу и заполни значения CSS-свойств.

3

138 CSS-заданий

средне

Прорешай упражнения на w3schools — хотя бы по одному на каждую тему, которую мы прошли.

4

Своя палитра

легконовоеавтопроверка

Сделай полоску из пяти блоков .color, покрашенных в цвета палитры: #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51. Внутри каждого блока напиши его HEX-код.

Показать ответ (сначала попробуй сам!)
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        .palette { display: flex; }
        .color { flex: 1; height: 150px; color: white; font-family: monospace; padding: 10px; }
    </style>
</head>
<body>
    <div class="palette">
        <div class="color" style="background-color: #264653">#264653</div>
        <div class="color" style="background-color: #2a9d8f">#2a9d8f</div>
        <div class="color" style="background-color: #e9c46a">#e9c46a</div>
        <div class="color" style="background-color: #f4a261">#f4a261</div>
        <div class="color" style="background-color: #e76f51">#e76f51</div>
    </div>
</body>
</html>
5

Один цвет — три записи

средненовоеавтопроверка

Покрась три квадрата в один и тот же цвет, но запиши его тремя способами: .hex — HEX-кодом, .rgb — через rgb(), .hsl — через hsl(). Возьми цвет #ff6347.

Подсказка

Перевести цвет можно в DevTools: щёлкни по квадратику цвета с зажатым Shift. Или воспользуйся любым онлайн-конвертером.

Показать ответ (сначала попробуй сам!)
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        .box { width: 120px; height: 120px; display: inline-block; color: white; }
        .hex { background-color: #ff6347; }
        .rgb { background-color: rgb(255, 99, 71); }
        .hsl { background-color: hsl(9, 100%, 64%); }
    </style>
</head>
<body>
    <div class="box hex">HEX</div>
    <div class="box rgb">RGB</div>
    <div class="box hsl">HSL</div>
</body>
</html>
6

Полупрозрачная плашка

средненовоеавтопроверка

Положи на картинку плашку .caption с белым текстом и полупрозрачным чёрным фоном: rgba(0, 0, 0, 0.5). Картинка должна просвечивать!

Показать ответ (сначала попробуй сам!)
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        .photo { width: 400px; height: 260px; background-image: url('img/night.jpg'); background-size: cover; position: relative; }
        .caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; font-size: 22px;
                   color: white; background-color: rgba(0, 0, 0, 0.5); }
    </style>
</head>
<body>
    <div class="photo">
        <div class="caption">Ночное небо</div>
    </div>
</body>
</html>

Что почитать

🎨Готовые цветовые палитры #1colorhunt.co 🎨Готовые цветовые палитры #2colorsinspo.com 🎮Игра для изучения HEX-цветовhexinvaders.com 🎨Выбор цветовой палитры #1canva.com 🎨Выбор цветовой палитры #2paletton.com 🎨Готовые цветовые решения для сайтаcolor.romanuke.com 📚4 рекомендации к выбору цветаspyserp.com

Где потренироваться

🏋️Цвета #1w3schools.com 🏋️Цвета #2w3schools.com 🏋️Цвета #3w3schools.com 🏋️Цвета #4w3schools.com