"Веб-разработка"

Цвета CSS, как босс

Используйте цвета в CSS с помощью этих удобных инструментов

Мэтт работает над HTML и CSS от Джона Дакета (не принадлежит). Он изучил HTML еще на заре Интернета (около 1999 г.). Он хочет освежиться, а затем выучить программирование. Хотите учиться с ним? Присоединяйтесь к нашему племени!

Да! Короткая глава! Вчерашний урок был немного жестоким:



9. Слюнотечение из-за CSS
Супер хлопья, ребята medium.com



Это было немного круто. Мне пришлось действительно действительно поработать, чтобы осмыслить CSS-селекторы. Теперь понимаю (надеюсь!). У меня есть шпаргалка в закладках. Потребуется некоторая практика, чтобы вбить это мне в голову.

После этого мозгового сжатия было приятно вернуться в рулевую рубку. Я изучал графический дизайн в колледже, поэтому глава о цвете - это несложно. Я мог пройти мимо простых вещей и по-настоящему сконцентрироваться на новом материале CSS3.

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

1 Цвет RGB. Это записывается в формате rgb (100,100,100). Это цвет, состоящий из немного красного, немного зеленого и немного синего. Каждое значение отделяется запятой. Каждое значение от 0 (ничего) до 100 (все).

Только для экранных цветов. Те, кто знаком с цветами печати, подумают о CMYK. Это четыре типа чернил, используемых для цветной печати. C - «голубой» (другое название синего). M - «пурпурный» (другое название красного). Y - «желтый» (другое название желтого). K - это «откуда мне, черт возьми, знать, ты погуглишь» (другое название черного). Криптонианец?

K означает криптонский. Супермен - криптонианец. Супермен черный.

К вашему сведению, я совершенно не против, что Супермен черный. #blackLivesMatter #wakandaForever #blackPower #supermanWasBlack #imJustReachingForMyWalletOfficer

Совет CMYK. Если какой-то случайный графический дизайнер дает вам цвет CMYK, и вам нужно найти эквивалент RGB, просто запустите PhotoShop и откройте панель цвета. Это позволит вам определить цвет CMYK. Затем вы можете увидеть как значения RGB, так и значения HEX (ниже).

2 Шестнадцатеричный цвет. Это шестнадцатеричное значение. Если вы супер ботаник, который любит играть в очень ботанистые настольные игры, вы поймете, что такое «проклятие». Для остальных из нас это цвет RGB, который переводится в 6-значное «число» и сопровождается хешем (#).

Я говорю «число», потому что на самом деле это комбинация букв и цифр. Честно говоря, я этого не понимаю. Я просто пользуюсь им. Это похоже на # ee33ff.

3 Названия цветов. Существует множество названий цветов, которые предварительно определены в HTML / CSS. Они используются редко, потому что дизайнеры не могут вспомнить, что такое оттенок шартрез. Если вам действительно нужно знать разные имена, вот Шпаргалка по именам цветов CSS. Я использую их, когда хочу, чтобы что-то было определенного оттенка, но мне все равно, какой именно оттенок. Я знаю, что имена включают в себя основы. Когда я просто хочу, чтобы что-то было однотонным, ванильным, гетеро-цветом, я беру один из удобных цветов:

4 Цвета HSLA. Обычно я считаю, что стиль кода, который вы используете, не имеет большого значения. Я использую в основном цвета HEX. Иногда я добавляю название цвета (см. Выше). Я использую другие цвета, когда мне дают один, и мне лень искать HEX-эквивалент.

CSS3 пошел еще дальше. Введена концепция прозрачности и перекрытия цветов (желтый и синий делают ЗЕЛЕНЫМ! АААА!). Вот другая комбинация:

  • Оттенок (красный, зеленый и желтый)
  • Насыщенность (от нуля до 100%)
  • Легкость (от нуля до 100%)
  • A для «альфа» (прозрачность от 0 до 1)

Это похоже на объявления RGB. Они выглядят как HSLA (0,100%, 100%, 0,5). Я бы даже не стал подбирать подходящий цвет. Я бы использовал Генератор цвета HSLA, чтобы выбрать правильный цвет. Что касается того, как они будут взаимодействовать с другими цветами при наложении, я бы поигрался с этим.

Это для профессиональных графических дизайнеров. Вот почему они зарабатывают большие деньги.

Совет HSLA. Только новые браузеры поддерживают HSLA. А старый браузер скажет: «Да, меня нет». По этой причине вам следует дважды объявить свои цвета CSS. А старый браузер прочитает первый оператор CSS и с радостью выполнит ваши заказы. Затем он ударит по второму утверждению HSLA и скажет: «Да, меня нет. Я буду придерживаться первого. Новый браузер выберет первое указание цвета и скажет: «Понятно, босс». Затем он выполнит второе утверждение и скажет: «Вы поняли, босс».

Цвет в CSS, как босс

Мэтт находится на благородном пути к следующему уровню веб-разработчика. Да начнется битва! Подпишитесь на информационный бюллетень M.W. McCabe.

Первоначально опубликовано на https://mwmccabe.com 7 апреля 2020 г.