Представляем «Генератор палитры теней», инструмент, который поможет вам генерировать значения прямоугольной тени CSS

Несколько недель назад я поделился некоторыми трюками, которые использую для создания пышных, реалистичных теней:

Здесь используется несколько стратегий, но самая важная из них — многоуровневая . Вместо одной тени мы складываем 5 или 6 отдельных теневых слоев. Каждый слой был настроен с различными значениями для смещения x / y, радиуса размытия, распространения, цвета и непрозрачности.

Даже если вы понимаете всю теорию, все равно довольно сложно понять, какие числа подставлять во все эти настройки. Сегодня я запускаю новый инструмент, чтобы помочь.

Он называется «Генератор палитры теней»:

Есть и другие (фантастические!) Генераторы теней, но я думаю, что есть два вещи, которые делают этот проект уникальным:

1. Вместо генерации одной тени он выводит три связанных тени, целую палитру для вашего приложения

2. Он работает на более высоком уровне абстракции

В современной веб-разработке мы в значительной степени полагаемся на токены дизайна. Когда мы хотим изменить цвет определенного элемента, мы обычно не открываем палитру цветов и не ищем совершенно новый цвет. Мы выбираем наиболее подходящий цвет из нашей палитры, набора предварительно настроенных дополнительных цветов.

Генератор теневой палитры работает по аналогичному принципу. Он создает набор из 3-х теней, представляющих 3 различных возвышения. Если вы хотите применить тень, вы выберете лучшее значение в зависимости от того, насколько высоко вы хотите, чтобы элемент выглядел.

Тени существуют, чтобы дать нашему приложению ощущение глубины, но эта иллюзия испорчена, если тени непоследовательны. Когда мы используем связный набор теней, наше приложение будет более реалистичным и осязаемым.

API box-shadow API является очень низкоуровневым API. Вы управляете такими вещами, как необработанные смещения x / y, радиус размытия и размер тени.

Когда я хочу создать тени, я обычно не думаю об этих значениях. Вместо этого я сосредотачиваюсь на «ощущении» тени. Должен ли он быть глубоким и заметным или легким и тонким? Должен ли он быть плотным и хрустящим или мягким и размытым?

Элементы управления в генераторе палитры теней разработаны, чтобы упростить создание теней с особым оттенком. Например, параметр «Oomph» управляет тем, насколько должна быть подчеркнута тень, изменяя многие из основных значений прямоугольной тени.

Эксперименты приветствуются! Поиграйте с элементами управления, пока не придете с тенью, которая вам нравится.

После того, как вы настроили хороший набор теней, вам будет предоставлен фрагмент CSS, который выглядит следующим образом:

 
 Этот вывод использует CSS Настраиваемые свойства, чтобы упростить повторное использование значений теней в вашем приложении. 
 
 Вы можете скопировать этот фрагмент CSS в глобальный файл CSS, а затем применить тени следующим образом: 
 
  
 Создаваемые тени by Shadow Palette Generator будет отображаться во всех современных браузерах, на настольных компьютерах и мобильных устройствах (Chrome, Firefox, Safari и Edge). 
 
 Тени не будут отображаться в старых браузерах, таких как Internet Explorer. Это связано с тем, что вывод в значительной степени зависит от настраиваемых свойств CSS, которые не поддерживаются в IE. 
 
 Даже если ваш сайт / приложение должно поддерживать Internet Explorer, я все равно рекомендую вам использовать этот инструмент. Тени можно рассматривать как прогрессивное улучшение; в конце концов, продукт должен быть полностью пригоден для использования даже без теней! 
 
 Генератор палитры теней позволяет вам выбрать собственный цвет фона. Затем он генерирует оттенок тени на основе этого цвета фона. Это помогает тени «сливаться» с фоном, создавая более естественный эффект. 
 
 Однако есть проблема: это предполагает, что каждая отдельная тень будет на фиолетовом фоне! В большинстве приложений это совсем не так. 
 
 Например: 
   Внешний ящик имеет фиолетовую тень, что имеет смысл, потому что оно находится перед фиолетовый фон. Но наша меньшая внутренняя коробка также отбрасывает фиолетовую тень. 
 
 Этот эффект интересен, но может быть не тем, что вам нужно.  В общем, цвет тени должен меняться в зависимости от фона. .  
 
 Нам нужно будет заново определить все переменные CSS всякий раз, когда тень должна менять цвет: 
 
 
 
 
 Code Playground 
 
 
 
 
 
 
  HTML   CSS  
  
  <style>
  / *
    Скопируйте предоставленный фрагмент из
    Генератор палитры теней.

    (Я использую упрощенный фрагмент
    здесь, чтобы было легче следить)
  * /
  :корень {
    - цвет теней: 286 градусов 36% 58%;
    - тень-высота-средняя:
      2px 4px 8px
      hsl (var (- цвет тени) / 0,5);
  }

  .коробка {
    фон: hsl (0deg 0% 95%);
    / *
      Используйте тени с фиолетовым оттенком
      на внешней коробке:
    * /
    тень коробки:
      var (- тень-высота-средняя);
  }

  .Внутренняя коробка {
    / *
      В этом поле должен быть
      другой цвет тени! Итак, мы
      предоставить новый --shadow-color и
      сброс - тень-высота-средний
    * /
    - цвет теней: 0deg 0% 58%;
    - тень-высота-средняя:
      2px 4px 8px
      hsl (var (- цвет тени) / 0,5);

    фон: белый;
    тень коробки:
      var (- тень-высота-средняя);
  }
</style>

<div class="box">
  <div class="inner-box"> </div>
</div>  
 
  <  стиль  >   
 
    ]: root     {  
 
    - цвет тени  :     286   град     36  %     ] 58  %  ;   
 
    - средний уровень тени   :   
 
    2   px     4   px     8   px   
 
    hsl   ( [1 9459065] var   (  - цвет тени  )     /     0,5  )  ;   
 
   }   
 
    .box     {  
 
    фон  ] :     hsl   (  0   deg     ] 0  %     95  %  )  ;   
 
    тень коробки  :   
 
    var   (  - средний уровень тени  )  ;   
 
   }   
 
   . Внутренний ящик     {  
 
    - цвет тени  :     0   град     ] 0  %     58  %  ;   
 
    - средний уровень тени  :   
 
    2   px     4   px     8   px   
 
    hsl   (  var   (  - цвет тени  )     /     0,5  )  ;   
 
    фон  :   белый  ;   
 
    box-shadow  :   
 
    var   (  - высота тени -средний  )  ;   
 
   }   
 
   </   стиль  >   
 
   <  div  ]    класс   =   «  коробка  »  >   
 
    <  div     класс   =   »   внутренний ящик   " >   </   div  >   ] 
 
   </   div  >  
 

  
  
 . Inner-box  устанавливает новый цвет тени  0deg 0% 50% который является средним серый цвет. 
 Мы повторяем определение  - тень-высота-среда . В обоих случаях оно равно этому значению: 
 
 Не очень СУХОЙ постоянно копировать и вставлять это значение всякий раз, когда мы хотим изменить цвет тени. Ванильный CSS на самом деле не дает нам инструментов для решения этой проблемы, но если вы используете препроцессор CSS или библиотеку CSS-in-JS, вы можете избежать этого дублирования. 
 
 Например, вот один из способов решить эту проблему с помощью styled-components: 
 
 
 (Это всего лишь один из возможных способов решения этой проблемы. Вы также можете использовать  ThemeProvider .) 
 
 Я понял, когда написание этого сообщения в блоге: даже когда вы используете генеративные инструменты, такие как мой Генератор палитры теней, он  действительно  помогает, если у вас есть твердое понимание CSS. 
 
 Я знаю  так много  талантливые JS-разработчики, застрявшие на начальном-среднем уровне работы с CSS. Они знают достаточно, чтобы обойтись, но их понимание поверхностно. В результате язык часто кажется удивительным и непоследовательным. 
 
 Это было моим основным фокусом в течение последнего года. Недавно я выпустил исчерпывающий интерактивный онлайн-курс под названием «CSS для разработчиков JavaScript». 
 
 Если вы сочтете CSS разочаровывающим или противоречащим интуиции, я надеюсь, вы его попробуете! К настоящему времени этот курс освоили более 8000 разработчиков, и отзывы были исключительно положительными. 
 
 Я черпал вдохновение в замечательном инструменте Smooth Shadow от Филиппа Брамма. 
 
 Идея наслоения теней взято из основополагающего сообщения в блоге Тобиаса Алина на эту тему. 
 
 Удачного создания теней!