Темы с тегами — обычное дело в блогах. Простая текстовая метка прекрасно работает, но я хотел немного оживить ее. Конечно с цветами!
Давайте дадим каждому тегу свой цвет. А поскольку мы разработчики, давайте сделаем это в коде!
Каждый раз, когда ваш пользователь должен что-то прочитать, это небольшое трение. UX-дизайнеры знают это — они годами обходили текстовые метки с помощью значков. Моя идея заключалась в том, что если кто-то ищет статью о MacOS, которую я написал, ему не нужно на самом деле читать теги. Просто прокрутите страницу в поисках ярко-красного пятна, что намного проще!
Превратить текст в число
Мы черпаем вдохновение из техники, известной как хеширование.
Хэширование — это процесс преобразования любого заданного ключа или строки символов в другое значение.
В нашем случае вводом является строка, а выводом должно быть число. Вы можете получить существующую реализацию хеш-функции. Но вы также можете написать свой собственный для большего контроля. Тот, который я использую, выглядит так:
function hash(text: string): number { if (!text) return 0 let state = 13 // prime for (let index = 0; index < text.length; index++) { const charCode: number = text.charCodeAt(index); state += state * charCode; // Prevent overflow by % state %= (charCode * 3109) // prime } return state; }
Цель этого процесса — получить случайно выглядящее число для ввода текста. Затем вы можете использовать это значение для создания цвета с помощью функции hsv
или rgb
. Или как индекс для выбора цвета из массива цветов!
Не все хэш-функции одинаковы
Это не должно удивлять, но некоторые подходы могут быть лучше для выбора цвета, чем другие.
Например, очень популярная JS-реализация хеш-функции Java не очень хорошо работает для выбора из небольшого массива цветов. Хорошо видны узоры — яркие столбцы и ряды одного цвета — что не очень хорошо.
Моя собственная хеш-функция (упомянутая выше), кажется, обеспечивает большее разнообразие цветов. Это показывает, что создание собственной реализации может быть того стоит! Вы можете поиграть с ней и настроить по своему вкусу :)
Выбранные вручную и сгенерированные цвета
Мы здесь на распутье. Вы либо выполняете полную процедуру и генерируете свои цвета, либо просто выбираете из выбранного набора цветов.
Придумать красивые цвета — непростая задача. То, что выглядит хорошо для глаз, нелегко описать уравнением. Люди ежедневно придумывают новые палитры, а большие библиотеки CSS также создают свои цвета вручную!
Мы выбрали все стандартные цвета Tailwind вручную, тщательно сбалансировали их на глаз и протестировали в реальных проектах, чтобы убедиться, что они нас устраивают.
Существуют СУЩЕСТВУЮТ способы создания цветов
Вы просто должны быть умны об этом. Измените цветовое пространство по своему желанию и сузьте фактический выбор цвета. Выбор буквально любого цвета не работает; большая часть всех возможных цветов близка к черному. Нам не интересен весь этот мусор цвета грязи.
Вам на самом деле нужны яркие, живые цвета. Вы можете выбрать яркие цвета, используя цветовую модель HSV
. Ограничьте насыщенность и значение высокими значениями и просто управляйте элементом оттенок.
Здесь мы сталкиваемся с другой проблемой. Большая часть цветового пространства — синий или зеленый! Это означает, что ваши процедурные цвета будут в основном синеватыми и зеленоватыми. Ваши шансы получить красивый желтый или оранжевый цвет невелики 🥲
Решение? Перейти к подходу палитры
Это был бы мой совет. Компромисс иногда действительно лучший вариант. Вы управляете своими цветами и можете гарантировать, что желтых будет столько же, сколько синих!
Я слышу, как вы: "Нежелание подбирать цвета вручную привело нас сюда в первую очередь...", и вы правы. Разумеется, мы будем использовать готовую палитру. Просто осмотритесь, выберите CSS-фреймворк с красивой цветовой схемой и украдите его!!
Я сам украл свои цвета из Tailwind — все светлые варианты от 400 до примерно 700 темноты. Они надежно хранятся в массиве, и я просто беру один, когда мне нужно!
Создание фактического тега
Как только вы выбрали свой цвет, вы находитесь на финишной прямой. Просто установите его как background-color
вашего тега в CSS или встроенном стиле.
Если вы собираетесь использовать белый текст (как и я), я также рекомендую придать тексту вашего тега небольшую тень. Это делает его более читаемым и лучше выделяется на ярких цветах! Вся моя настройка тега выглядит следующим образом:
function tagColor(text) { return palette[hash(text) % palette.length]; } // ... <span style={{ background: tagColor(text), textShadow: "1px 1px 0px black" }} > {text} </span>
Теперь, когда вы добавляете тег к своей новой статье, он красиво окрашивается!
Если вы узнали что-то новое из этой статьи, хлопайте 👏 или подписывайтесь на канал! Спасибо за прочтение! ❤️
Первоначально опубликовано на https://www.vojtechstruhar.com.