HTML - Цвета HSL и HSLA
Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в красочный мир HSL и HSLA в HTML. Как ваш доброжелательный соседский компьютерный учитель, я рад помочь вам в этом путешествии. Так что возьмите свою виртуальную кисть и lets покрасим наши веб-страницы яркими красками!
Коды цветов HSL в HTML
HSL означает Тон, Наполненность и Светлота. Это как secret recipe для создания цветов в веб-дизайне. Давайте разберем это:
- Тон: Это сам цвет, измеряемый в градусах от 0 до 360 на цветовом круге.
- Наполненность: Представьте это как интенсивность цвета, от 0% (серый) до 100% (полный цвет).
- Светлота: Это определяет, насколько светлый или темный цвет, от 0% (черный) до 100% (белый).
Теперь давайте посмотрим, как мы можем использовать HSL в нашем HTML:
<p style="color: hsl(0, 100%, 50%);">Этот текст pure красный!</p>
<p style="color: hsl(120, 100%, 50%);">Этот текст pure зеленый!</p>
<p style="color: hsl(240, 100%, 50%);">Этот текст pure синий!</p>В этом примере:
- 第一行 создает pure красный цвет (тон 0, полная наполненность, 50% светлота).
- Вторая строка дает нам насыщенный green (тон 120, полная наполненность, 50% светлота).
- Третья строка создает deep синий (тон 240, полная наполненность, 50% светлота).
Давайте поиграем с наполненностью и светлотой:
<div style="background-color: hsl(120, 50%, 50%); padding: 10px;">
Полунасыщенный green
</div>
<div style="background-color: hsl(120, 100%, 25%); padding: 10px; color: white;">
Темный green
</div>
<div style="background-color: hsl(120, 100%, 75%); padding: 10px;">
Светлый green
</div>Здесь мы поддерживаем постоянный тон (120 для green) и корректируем наполненность и светлоту. Это как добавлять белый или черный краски к нашему green!
Цвета HSLA в HTML
Теперь, что если я сказал бы вам, что мы можем добавить secret ingredient к нашему рецепту цвета? Вот где comes HSLA. 'A' означает Alpha, который контролирует непрозрачность нашего цвета.
Значение alpha варьируется от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Давайте посмотрим, как это работает:
<div style="background-color: hsla(0, 100%, 50%, 0.5); padding: 10px;">
Полупрозрачный красный
</div>
<div style="background-color: hsla(240, 100%, 50%, 0.3); padding: 10px;">
Более прозрачный синий
</div>
<div style="background-color: hsla(120, 100%, 50%, 0.8); padding: 10px;">
Небольшой transparent green
</div>В этом примере мы создаем три ящика с разными уровнями непрозрачности. Это как смотреть через有色 очки!
Вот fun experiment. Давайте создадим слоевый эффект:
<div style="position: relative; width: 200px; height: 200px;">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsla(0, 100%, 50%, 0.5);"></div>
<div style="position: absolute; top: 50px; left: 50px; width: 100%; height: 100%; background-color: hsla(240, 100%, 50%, 0.5);"></div>
</div>Это создает два перекрывающихся квадрата с полупрозрачными цветами. В месте их пересечения вы увидите beautiful blend из двух цветов!
Инструмент выбора цвета HSL
Теперь я знаю, что вы думаете: "Но учитель, как я должен запомнить все эти числа?" Не бойтесь! Есть plenty из онлайн-инструментов для выбора цветов HSL. Эти инструменты позволяют вам визуально выбирать цвета и дают вам соответствующие значения HSL.
Вот таблица некоторых common цветов и их значений HSL:
| Цвет | Значение HSL |
|---|---|
| Red | hsl(0, 100%, 50%) |
| Green | hsl(120, 100%, 50%) |
| Blue | hsl(240, 100%, 50%) |
| Yellow | hsl(60, 100%, 50%) |
| Cyan | hsl(180, 100%, 50%) |
| Magenta | hsl(300, 100%, 50%) |
помните, это всего лишь отправные точки. Настоящая магия happens когда вы начинаете корректировать эти значения!
Вот профессиональный совет: При designing веб-сайтов, использование HSL может сделать проще создание гармоничных color schemes. Вы можете поддерживать один и тот же тон и просто корректировать наполненность и светлоту, чтобы создать варианты одного и того же цвета.
<div style="background-color: hsl(200, 100%, 50%); padding: 10px;">Основной цвет</div>
<div style="background-color: hsl(200, 80%, 70%); padding: 10px;">Светлый вариант</div>
<div style="background-color: hsl(200, 80%, 30%); padding: 10px; color: white;">Темный вариант</div>Это создает harmonious цветовую гамму, основанную на одном и том же синем тоне.
В заключение, HSL и HSLA предлагают нам интуитивный и гибкий способ работы с цветами в HTML. Это как полная artist's palette у вас под рукой! Помните, лучший способ учиться - это experiment. Так что вперед, играйте с этими значениями и смотрите, какие красивые создания вы можете придумать.
Счастливо кодируйте и пусть ваши веб-страницы всегда будут colorful!
Credits: Image by storyset