Однажды я потратил около сорока минут, пытаясь сопоставить тень из файла Figma. Дизайнер дал мне цвет, смещение X и Y, размытие и разворот, что все, что вам нужно, и я все еще не мог заставить его выглядеть правильно. Тень в браузере была тяжелее и плонее макета, и я продолжал подталкивать радиус размытия вверх и вниз, как будто это исправило бы это.
Это не так, потому что макет был два тени сложены друг на друга Плотно темный для контакта, широкий мягкий для окружающего света. Фигма показал их как отдельные слои в панели я рухнул Как только я написал их как пару с разделенными запятыми матч был мгновенным.
Вот в чем суть свойств CSS в этом руководстве. Ни один из них не сложен. Все они имеют одно или два поведения, которые не очевидны из синтаксиса, и вы можете проиграть день любому из них. Это руководство представляет собой такое поведение, записанное.
Каждый генератор, связанный здесь, работает в вашем браузере, обновляет предварительный просмотр в реальном времени при перетаскивании и передает вам CSS. Я строю их на [Toolz.dev](/и использую их постоянно, в основном потому, что прочитать стенографию с четырьмя значениями сложнее, чем посмотреть на прямоугольник.
TL;DR: обычай Коробка Тень для глубины, Текстовая тень для свечения и контуров, Граничный радиус для углов, включая эллиптические, CSS-фильтры для размытия, яркости и цветовых эффектов, Стекломорфизм для матовых панелей, Нейморфизм для мягких приподнятых поверхностей, Градиенты для фона и Конвертер единиц CSS когда вам нужен px in rem.Все они запускают клиентскую сторону с живым предварительным просмотром. два правила, которые стоит соблюдать: настоящие тени многослойны, и
backdrop-filterнужно, чтобы что-то за этим размылось.
Какой генератор мне нужен?
| Вы хотите | Собственность | стрелка |
|---|---|---|
| Карта, которая отрывается от страницы | box-shadow |
Коробка Тень |
| Светящийся, обведенный или тисненый текст | text-shadow |
Текстовая тень |
| Округлые или таблетки формы углы | border-radius |
Граничный радиус |
| Размыть, потускнеть, обессытить или оттенять элемент | filter |
CSS-фильтр |
| Обмороженная панель над фотографией | backdrop-filter |
Стекломорфизм |
| Мягкая кнопка, которая выглядит вдавленной в поверхность | слоистый box-shadow |
Нейморфизм |
| Фон цветового перехода | linear-gradient |
Градиент |
| Чтобы превратить 24px в rem | нет | единица измерения |
Остальная часть этого руководства - это то, что каждый делает и где кусает.
Как работает box-shadow?
Сокращение состоит из пяти значений и цвета:
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);
/* │ │ │ │ └ colour */
/* │ │ │ └ spread: grow or shrink */
/* │ │ └ blur: 0 is a hard edge */
/* │ └ vertical offset */
/* └ horizontal offset */
Смещения перемещают тень. Размытие смягчает ее край, распределяя ее наружу примерно на половину значения размытия в каждом направлении. Спред растет или сжимает тень перед нанесением размытия, а отрицательный разброс - это трюк для тени, которая сидит под элементом, а не галоирует его.
Часть, которую люди пропускают: тени стекаются. Список, разделенный запятыми, отображается вперед, первая тень сверху:
box-shadow:
0 1px 2px rgb(0 0 0 / 0.20), /* contact: tight, darker */
0 8px 24px rgb(0 0 0 / 0.12); /* ambient: wide, lighter */
Именно поэтому дизайнер 's тень выглядит лучше, чем ваша Одна тень читается как наклейка. два читается как объект с весом.The Коробка Теневой Генератор позволяет добавлять слои и перетаскивать каждый отдельно, что является единственным разумным способом их настройки.
inset перемещает тень внутри пограничного ящика, таким образом вы получаете входные данные, которые выглядят утопленными, или внутреннюю половину нейморфной поверхности.
Одна нота выступления, которая укусила меня в реальных проектах: анимация box-shadow заставляет перекрасить каждый кадр Если вы хотите, чтобы карта поднималась при зависании, оживите transform и перекрестно выцветает второй элемент, удерживающий большую тень. The Ссылка на тень коробки MDN документирует синтаксис полностью.
Чем хороша текстовая тень, кроме отбрасываемых теней?
Та же идея, на одно значение меньше. text-shadow не имеет распространения:
text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5);
Его интересное применение - вовсе не тени.
Контуры. Четыре жесткие тени при нулевом размытии, одна на диагональ, имитация штриха вокруг текста. Он тяжелее -webkit-text-stroke но он работает повсюду и выходит за рамки глифа, а не разделяет разницу:
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,
1px -1px 0 #000, -1px -1px 0 #000;
Светиться. Смещение нуля, большое размытие, насыщенный цвет, повторяется два или три раза для увеличения интенсивности.
Разборчивость изображений. Одна мягкая темная тень под белым текстом покупает контраст, когда фон - это фотография, которую вы не контролируете. Это не замена правильной сетке, и это не спасет ухудшающееся соотношение контрастности, но остановит нисходящие элементы, исчезающие в ярком пятне.
Постройте все три на Генератор тени текста. Если вы гонитесь за требованием контрастности, а не за эффектом, сверите результат с WCAG с Проверка цветового контраста вместо того, чтобы смотреть на это.
Почему пограничный радиус принимает восемь значений?
Большинство людей используют один. полная форма - это две группы по четыре человека, разделенные косой чертой:
border-radius: 20px 40px 60px 80px / 40px 20px 80px 60px;
/* ─────horizontal──── ──────vertical───── */
Перед косой чертой: горизонтальный радиус каждого угла, по часовой стрелке сверху слева. После него: вертикальный радиус. Дайте и то, и другое, и каждый угол становится эллипсом, а не четвертью круга. так вы получаете органические формы капель без SVG.
Два поведения, которые стоит знать.
Проценты разрешаются по разным осям. Горизонтальный радиус в % - процент от ширины элемента 's, вертикальной его высоты. так border-radius: 50% на прямоугольнике образуется эллипс, а не закругленный прямоугольник, что удивляет людей с первого раза.
Браузер масштабирует радиусы вниз при их перекрытии. Если два соседних радиуса в сумме превышают общую для них сторону, все радиусы уменьшаются пропорционально до тех пор, пока они не подойдут. нельзя переполнять форму, поэтому border-radius: 9999px надежно производит таблетку.
выше Генератор пограничного радиуса раскрывает все восемь значений с помощью ползунков по углам и выдает кратчайшее допустимое сокращение, которое стоит иметь, поскольку писать слэш-форму вручную действительно неприятно.
Что могут сделать CSS-фильтры и сколько они стоят?
filter применяет графические операции к элементу и всему, что находится внутри него:
filter: blur(4px) brightness(1.1) saturate(1.2);
Функции составляют слева направо, а порядок изменяет результат. размытие, затем осветление - это не то же самое, что осветление, а затем размытие.
| Функция | Делает | Смотреть для |
|---|---|---|
blur() |
Гауссовское размытие | Дорогой при больших радиусах; размывает края наружу |
brightness() |
Мультиплирует легкость | Выше 1 клипов блики на белый |
contrast() |
Выталкивает значения из среднего серого | Дробит детали быстро |
grayscale() |
Удаляет насыщение | Дешевле, чем дублирующий актив |
sepia() |
Карта теплых тонов | Комбинировать с hue-rotate() для других оттенков |
hue-rotate() |
Сдвиги оттенка на угол | Не сохраняет воспринимаемую легкость |
drop-shadow() |
Тень, которая следует за альфа | В отличие box-shadow, следует фактической форме |
Тот последний ряд стоит запомнить. box-shadow затеняет бордюрную рамку, поэтому прозрачный PNG логотипа получает прямоугольную тень. filter: drop-shadow() отслеживает альфа-канал и затеняет сам логотип.
Стоимость реальна Фильтры толкают элемент на собственный композиционный слой, и blur() в частности дорого на большой площади. хорошо на кнопке. дважды подумайте о наложении на всю страницу на низкопробный телефон. Ссылка на фильтр MDN's перечисляет каждую функцию и ее интерполяционное поведение.
Попробуйте комбинации на Генератор фильтра CSS, где предварительный просмотр и точное объявление показаны рядом.
Как мне создать панель стекломорфизма, которая работает?
Матовое стекло - это одно из свойств, выполняющих работу:
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
backdrop-filter фильтрует что есть позади элемент, а не сам элемент Из этого следуют три вещи, и они составляют почти каждый & quot; почему мой стакан выглядит как серый ящик & quot; вопрос.
Ему нужно что-то за этим. На плоском фоне размытый фон имеет тот же плоский цвет. Эффект существует только на фотографии, градиенте или перекрывающемся контенте.
Фон должен быть полупрозрачным. Полностью непрозрачный фон полностью скрывает размытый фон. Где-то от 10% до 25% белого - обычный диапазон.
Насыщение - это то, что его продает. Настоящее стекло концентрирует цвет. saturate(180%) рядом с размытием находится разница между матовым стеклом и пятном.
Добавьте границу линии роста волос, потому что у стекла есть край, и проверьте контраст перед отправкой: текст поверх размытой фотографии проходит или выходит из строя в зависимости от фотографии, а панель, которая идеально читается на изображении вашего героя, может оказаться нечитаемой на следующей.
выше Генератор стекломорфизма предварительный просмотр реального изображения, что здесь имеет большее значение, чем любой другой эффект в этом руководстве.
Стоит ли использовать нейморфизм?
Нейморфизм, или мягкий пользовательский интерфейс, заставляет элементы выглядеть экструдированными с фона, а не плавающими над ним. Две тени, противоположные углы, одна светлее поверхности и одна темнее:
background: #e0e5ec;
box-shadow: 8px 8px 16px #a3b1c6,
-8px -8px 16px #ffffff;
Поменяйте их на нажатое состояние или используйте inset на обоих для резного вида.
У техники есть одно жесткое ограничение: элемент и его фон должны быть одного цвета. Эффект полностью состоит из двух теней, поэтому нейморфная кнопка на другом фоне перестает считываться как экструдированная и начинает считываться как сломанная.
У него также есть проблема доступности, о которой стоит быть честным. Вся эстетика мало контрастна по конструкции, и кнопка, единственная возможность которой - мягкая тень, может потерпеть неудачу WCAG и #39;s требование нетекстового контраста для интерактивных компонентов. если вы используете его, дайте кнопкам настоящую рамку или стиль фокуса, который не зависит от тени.
выше Генератор нейморфизма получает оба цвета теней из цвета вашей поверхности, который можно сделать вручную.
Когда мне нужен преобразователь единиц измерения?
Чаще, чем вы думаете, потому что инструменты проектирования говорят на px, а хороший CSS часто этого не делает.
rem относится к размеру корневого шрифта, поэтому макет в rem масштабируется, когда пользователь меняет размер текста по умолчанию 's. em относительно элемент'с размер шрифта, что делает его полезным для заполнения, которое должно отслеживать собственный текст, и опасным, когда он объединяется через вложенные элементы.
Арифметика тривиальна. делать это сорок раз при переводе спецификации - это то, куда закрадываются ошибки, особенно если размер корня не равен 16px.The Конвертер единиц CSS берет настраиваемый корень и показывает каждую единицу сразу.
Для градиентов градиент генератора охватывает линейные, радиальные и конические, а в них имеется более длинная запись Градиентный справочник CSS, йо-
Соединив их: карта, начните заканчивать
Свойства редко используются в одиночку Вот карта, которая использует четыре из них, построенная так, как я бы ее построил.
Начните с формы и покоящейся тени:
.card {
border-radius: 12px;
background: #fff;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
transition: transform 150ms ease, box-shadow 150ms ease;
}
Снова две тени, обе светлые. карта отдыха едва должна быть поднята. сохраните драму для состояния зависания.
.card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
}
выше translateY выполняет большую часть воспринимаемой работы Движение читается как подъем более убедительно, чем большая тень, и это дешево, потому что преобразования составляются, а не перекрашиваются.
Если карта находится на фотографии, а не на плоской странице, замените белый фон на стекло:
.card {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgb(255 255 255 / 0.25);
}
Обратите внимание, что изменилось, а что нет Радиус и тени переносятся нетронутыми. отличается только обработка поверхности, что является полезной ментальной моделью: форма и глубина - одно решение, поверхность - другое.
А как насчет поддержки браузера и резервных копий?
Большая часть этого старая и безопасная. box-shadow, text-shadow, border-radius а filter поддерживались везде годами, и вы можете написать их без лишних раздумий.
backdrop-filter является исключением, с которым стоит обращаться Поддержка сейчас широка, но это единственное свойство здесь, которое производит действительно ломаный вид результат, когда он отсутствует: панель с 15% белым фоном и без размытия - это бледный мазок над фотографией. Охраняйте это:
.glass {
background: rgb(255 255 255 / 0.85); /* readable fallback */
}
@supports (backdrop-filter: blur(1px)) {
.glass {
background: rgb(255 255 255 / 0.15);
backdrop-filter: blur(12px) saturate(180%);
}
}
Резервный вариант - это в основном непрозрачная панель, которая не является эффектом, но прекрасно используется. расширенная версия применяется только там, где браузер может ее доставить. MDN'с @supports ссылка охватывает синтаксис, и стоит в любое время обратиться к свойству с визуально сломанным режимом отказа, а не просто с более простым.
Как сохранить последовательность эффектов в рамках проекта?
Режим сбоя на настоящей кодовой базе - это не одна плохая тень Это четырнадцать немного разных теней, потому что каждый, кому нужна была карта, писал свою.
Определите их один раз как пользовательские свойства и используйте имена
:root {
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.06),
0 4px 12px rgb(0 0 0 / 0.08);
--shadow-lg: 0 2px 4px rgb(0 0 0 / 0.08),
0 12px 28px rgb(0 0 0 / 0.12);
--radius: 12px;
}
.card { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.card:hover { box-shadow: var(--shadow-lg); }
Обычно достаточно трех теневых шагов Если вы обнаруживаете, что добавляете четвертый, это часто происходит потому, что компоненту нужно другое возвышение вместо другой тени, и ответ - повторно использовать существующий шаг.
Это также делает темный режим управляемым Тени, которые работают на белом близки к невидимым на темной поверхности, где глубина обычно приходит от более светлой границы или тонкого свечения вместо. переопределить токены внутри медиа-запроса и каждый компонент следует:
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 1px 2px rgb(0 0 0 / 0.4);
--shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
}
}
Сгенерируйте каждое значение один раз с помощью инструментов выше, вставьте его в блок токенов и перестаньте думать об этом. В этом весь смысл наличия генератора: не писать CSS, который вы не могли бы писать от руки, а перестать тратить внимание на ценности, которые нужно решить только один раз.
Где эти эффекты вызывают проблемы с доступностью
Каждое свойство в этом руководстве манипулирует контрастом, а контраст - это то, о чем в основном требования доступности. Четыре конкретные ловушки.
Интерактивным компонентам нужны видимые границы. WCAG 2.2 требует контрастности 3:1 для частей управления, которые идентифицируют его. кнопка, единственным краем которой является мягкая тень, может отказать в том, что, что является структурной проблемой с нейморфизмом и причиной того, что граница или сплошное кольцо фокуса не является там необязательным.
Стеклянные панели наследуют свой фон и проблему контрастности #39;s. Текст на матовой панели разборчив или не зависит от фотографии за ним, и фотография часто меняется. проверьте на худшем изображении, а не на герое.Повышение непрозрачности панели и #39;s фонового фона обычно является лучшим решением, чем сделать текст смелее.
Фильтры меняют контраст бесшумно. brightness() а contrast() применено к контейнеру также применяется к тексту внутри него. А filter: brightness(1.15) на карточке, чтобы сделать его поп, можно незаметно подтолкнуть текст тела под порог 4,5:1. После этого проверьте с помощью Проверка цветового контраста, не раньше.
Не позволяйте тени быть единственным показателем состояния. Если зависание, фокусировка и нажатие различаются только глубиной тени, пользователи клавиатуры и все, у кого слабое зрение, теряют различие. Соедините изменение тени с преобразованием, контуром или сдвигом цвета.
Ничто из этого не делает эффекты непригодными для использования Это делает их вещи, чтобы проверить, а не предположить, что занимает около минуты на компонент с открытым контроллером контрастности.
Эти инструменты отправляют мою работу куда угодно?
Нет. каждый генератор здесь работает полностью в браузере. нет шага загрузки и нет сервера туда и обратно, поэтому они отвечают мгновенно, как вы перетаскиваете ползунок. это та же причина, по которой остальная часть каталога работает в автономном режиме, покрытый в Руководство по конфиденциальности данных, йо-
Распространенные ошибки
- Одна тень вместо двух. Единственное наиболее заметное различие между рукописной тенью и спроектированной.
- Анимирующий
box-shadowна ховере. Перекрашивает каждый кадр. Оживлятьtransformи вместо этого затухать. backdrop-filterповерх сплошного цвета. Нечего размывать, так что ничего не происходит.- Непрозрачный фон на стеклянной панели. Скрывает эффект, который вы только что написали.
- Нейморфизм на несовпадающем фоне. Иллюзия зависит от их идентичности.
border-radius: 50%ожидание округлого прямоугольника. На неквадратном элементе вы получаете эллипс.- Доставка любого из них без проверки контрастности. Тени и стекло уменьшают контрастность, и оба легко перенастраиваются на хорошем мониторе.
