Советы CSS по реализации купонов

внешний интерфейс CSS

企业微信截图_119053c6-c109-4f59-b201-b640f5ac0921.png

Автор: Ян Вэньбинь

Исходное заявление: Эта статья подготовлена ​​членами команды интерфейса чтения YFE, пожалуйста, уважайте оригинальность, пожалуйста, свяжитесь с общедоступной учетной записью (id: yuewen_YFE) для авторизации и укажите автора, источник и ссылку.

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

图片

и это

图片

Учитывая различные возможные сценарии, следующие случаи абстрагируются, давайте посмотрим на реализацию вместе

图片

Лучший способ реализовать

Во-первых, лучшая реализация для этого типа макета, безусловно,маска маска. Про маску можно посмотретьМаска CSS3 Отчет Amway. Вот краткое введение

Основной синтаксис прост иbackgroundСинтаксис в основном тот же

.content{
  -webkit-mask: '遮罩图片' ;
}
/*完整语法*/
.content{
  -webkit-mask: '遮罩图片' [position] / [size] ;
}

Изображение маски здесь в основном такое же, как и фон, который можноPNG изображение,SVG-изображения,так же может бытьГрадиентный рисунокизображения, но также поддерживаетНаложение нескольких изображений.

Принцип маскировки очень прост,Конечный эффект показывает только непрозрачную часть, прозрачная часть не будет видна, полупрозрачна и т. д.

图片

На самом деле, помимо использования прозрачности (Альфа) в качестве условия маски, ее также можно определить по яркости (яркости), например, белый цвет для скрытого, черный для видимого. Но в настоящее время его поддерживает только Firefox.

Следовательно, пока можно нарисовать вышеуказанные формы, это может быть достигнуто.

Во-вторых, вогнутое филе

Большинство купонов имеют очень очевидную особенность, то естьВогнутое скругление. Когда дело доходит до закругленных углов, легко представить себеradial-gradient. Эта грамматика немного сложна, не имеет значения, если вы ее не помните, вы можете прочитать эту статью господина Чжана.10 демонстрационных примеров для изучения CSS3 радиального градиента радиального градиента.

.content{
  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); 
}

图片

Это рисует прозрачный круг с радиусом 20 пикселей, но остается много места для оптимизации на уровне кода.

  1. При реализации градиента с четкими границами положение заднего цвета должно быть меньше или равно положению переднего цвета, например0
  2. доступен прозрачный цветшестнадцатеричныйСокращения типа **#0000заменить,Просто используйте любой цвет для непрозрачной части, я люблю использоватькрасный**, в основном потому, что слово относительно короткое
  3. И положение градиента по умолчанию по центру, поэтому второй центр можно убрать, а левый использовать0Представлять

Дальнейшее упрощение получает

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0); 
}

Да, там немного меньше трафика B~ Вы можете просмотреть онлайн-экземплярреализация купона codepen 1

3. Эффект купонов

Выше приведен базовый эффект вогнутого закругленного угла. Теперь давайте реализуем следующие макеты, например, два полукруга. Согласно приведенному выше примеру, можем ли мы просто скопировать круг? Изменить ориентацию

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
}

图片

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

图片

Есть 2 решения, а именно:

  1. Сдвиньте два вогнутых угла в шахматном порядке, здесь вы можете изменить размер и положение, и вам нужно запретить плитку
.content{
-webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0);
-webkit-mask-size: 51%; /*避免出现缝隙*/
-webkit-mask-position: 0, 100%; /*一个居左一个居右*/
-webkit-mask-repeat: no-repeat;
}

图片

Динамическая демонстрация выглядит следующим образом, чтобы они не перезаписывали друг друга

图片

Можно просмотреть онлайн-примерыреализация купона codepen 2

  1. Композитинг с использованием маскиmask-composite, это может быть незнакомо, вкратце представим

по стандартным свойствамmask-compositeЕсть 4 значения свойства (поддерживается Firefox)

/* Keyword values */
mask-composite: add; /* 叠加（默认） */
mask-composite: subtract; /* 减去，排除掉上层的区域 */
mask-composite: intersect; /* 相交，只显示重合的地方 */
mask-composite: exclude; /* 排除，只显示不重合的地方 */

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

图片

-webkit-mask-compositeОтличается от значений по стандарту, есть много значений атрибутов, см. ниже

-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/
-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/
-webkit-mask-composite: source-over; 
-webkit-mask-composite: source-in; /*只显示重合的地方*/
-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in; /*只显示重合的地方*/
-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor; /*只显示不重合的地方*/

Вы ошеломлены? Не паникуйте, вы можете видеть, что есть несколько значенийsource-*, некоторые из них начинаются с **destination-***,источник представляет новый контент, который является слоем, нарисованным выше,назначение представляет собой метаконтент, который представляет собой слой, нарисованный ниже (В CSS слои спереди имеют приоритет над слоями сзади.), значение атрибута здесь фактически заимствовано из концепции в Canvas, вы можете проверить деталиCanvasRenderingContext2D.globalComposite

图片

Неважно, если вы не можете вспомнить, реальную разработку можно протестировать один за другим [\ закрой лицо]. Конкретные отличия можно посмотретьcodepen -webkit-mask-composite демонстрация значения свойства

图片

После понимания этого свойства приведенная выше проблема наложения очень проста, установитеПоказать только перекрытияпросто хорошо

.content{
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); 
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

图片

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

图片

Можно просмотреть онлайн-примерыреализация купона codepen 3

Реализация 2 закругленных углов, 4 очень проста, просто нарисуйте 4 круга, того же можно легко добиться с помощью синтеза маски.

content{
  -webkit-mask: radial-gradient(circle at 0 0, #0000 20px, red 0), radial-gradient(circle at right 0, #0000 20px, red 0), radial-gradient(circle at 0 100%, #0000 20px, red 0), radial-gradient(circle at right 100%, #0000 20px, red 0); /*4个角落各放一个圆*/
  -webkit-mask-composite: source-in | destination-in ; /*chrome*/
  mask-composite: intersect; /*Firefox*/
}

图片

Можно просмотреть онлайн-примерыреализация купона codepen 4

В-четвертых, эффект плитки купона

Вышеприведенный пример показывает эффект 2 закругленных углов и 4 закругленных углов, рисуя 2 и 4 круга соответственно.На самом деле, этого можно добиться с помощью плитки, и нужен только один круг. Этапы реализации следующие

  1. Нарисуйте прозрачный круг в середине слева.
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
}

图片

  1. Перевести половину себя влево
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px; 
}

图片

Эффект вышел, не правда ли, потрясающий? На самом деле, он использует значение по умолчанию.функция повтора, вот движущаяся картинка для понимания

подКрасная рамка указывает диапазон области просмотра, то есть конечный эффект, вот для демонстрации, поставил вне поля зрениякафельная плиткаПолупрозрачная обработка сделана, и движение указывает на процесс изменения положения

图片

Можно просмотреть онлайн-примерыреализация купона codepen 5

По такому же принципу можно реализовать и 4 закругленных угла

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}

图片

Принцип реализации демонстрируется следующим образом

图片

Можно просмотреть онлайн-примерыреализация купона codepen 6

6 закругленных углов нужно изменить размер плитки.

.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); 
  -webkit-mask-position: -20px -20px;
  -webkit-mask-size: 50%;
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

图片

Принцип реализации демонстрируется следующим образом

图片

Можно просмотреть онлайн-примерыреализация купона codepen 7

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

.content{
  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); 
  -webkit-mask-position: -10px;
  -webkit-mask-size: 100% 30px;
}
/*也可以缩写为*/
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -10px / 100% 30px; 
}

图片

Принцип реализации демонстрируется следующим образом, на самом деле он мозаичный

图片

Можно просмотреть онлайн-примерыреализация купона codepen 8

5. Обратная пустотелая укладка

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

  1. Сначала возьмите приведенную выше реализацию
.content{
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

图片

  1. Непосредственно просверлите ряд небольших отверстий в этом фундаменте.
.content{
  -webkit-mask: radial-gradient( circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

图片

Обратите внимание, что здесь используется **-webkit-mask-composite: destination-out**,Указывает на вычитание, отображается только нижняя маска, а место наложения не отображается

图片

Можно просмотреть онлайн-примерыреализация купона codepen 9

Его также можно разместить с обеих сторон, изменить егоpositionпросто хорошо

.content{
  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}

图片

Можно просмотреть онлайн-примерыкупон codepen для достижения 10

Шесть, пограничная маска

Некоторые студенты считают, чтоРадиальный градиент слишком сложен для написания. Можете ли вы использовать вместо него картинки?? На самом деле, это также осуществимо. Упомянутая здесь пограничная маска относится кmask-border, все еще находится в черновике W3C, но имеет альтернативный атрибут-webkit-mask-box-image

图片

грамматика и понятия иborder-imageочень похоже, оborder-imageОбратитесь к этой статьеПравильное использование border-image, здесь в основном для понимания использования и эффекта

.content{
  -webkit-mask-box-image: '遮罩图片' [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
}

Вот например вот такая картинка

图片

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

<svg xmlns="http://www.w3.org/2000/svg" width="60.031" height="60.031" viewBox="0 0 60.031 60.031"><path d="M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z" fill-rule="evenodd"/></svg>

Здесь нужно сбежать, вы можете использовать Учителя Чжана.Онлайн-инструмент слияния SVG

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0V20.127h.065A20.066 20.066 0 0 0 20.131.061v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064V40A20.063 20.063 0 0 0 40 60.027z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
  /*这里的20表示四周保留20像素的固定区域，剩余部分平铺或者拉伸*/
}

Затем реализуется такая форма, которая также является адаптивной.

图片

Можно просмотреть онлайн-примерыреализация codepen-webkit-mask-box-iamge 1

Вот например вот такая картинка

图片

.content{
  -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60.031' height='60.031' viewBox='0 0 60.031 60.031'%3E%3Cpath d='M55.186 30.158a4.965 4.965 0 0 0 4.841 4.959V40A20.063 20.063 0 0 0 40 60.027H20.129A20.065 20.065 0 0 0 .065 40H0v-4.888c.054 0 .1.016.158.016a4.973 4.973 0 1 0 0-9.945c-.054 0-.1.014-.158.015v-5.074h.065A20.066 20.066 0 0 0 20.131.058v-.065H40v.065a20.065 20.065 0 0 0 20.027 20.064v5.07a4.965 4.965 0 0 0-4.841 4.966z' fill-rule='evenodd'/%3E%3C/svg%3E") 20;
}

Можно получить форму, где полукруги с обеих сторон вытянуты

图片

В настоящее время вам нужно только установить метод тайлинга **-webkit-mask-box-image-repeat, ** это иborder-image-repeatта же концепция со следующими 4 значениями

-webkit-mask-box-image-repeat: stretch; /*拉伸(默认)，不会平铺*/
-webkit-mask-box-image-repeat: repeat; /*重复*/
-webkit-mask-box-image-repeat: round; /*重复，当不能整数次平铺时，根据情况拉伸。*/
-webkit-mask-box-image-repeat: space; /*重复，当不能整数次平铺时，会用空白间隙填充*/

Различия между несколькими методами укладки заключаются в следующем.

图片

Здесь мы можем использоватьroundилиrepeat

.content{
  -webkit-mask-box-image: url("...") 20;
  -webkit-mask-box-image-repeat: round;
}

图片

Можно просмотреть онлайн-примерыреализация codepen-webkit-mask-box-iamge 2

7. Резюме и объяснение

Выше было представлено в общей сложности 12 случаев рисования купонов, которые должны решить большинство этих проблем с макетом.Здесь суммированы следующие пункты.

  1. CSS maskЭто должен быть самый совершенный способ реализовать этот тип макета.
  2. нужноCSS radial-gradientРисовать графические навыки
  3. Используйте как можно большеrepeatповторять один и тот же элемент
  4. Гибкое использование требуется, когда несколько фигур накладываются друг на друга.mask-composite
  5. Вы также можете использовать изображения вместо градиентов CSS, вам нужно использоватьmask-border

Что касается совместимости, на самом деле большой проблемы нет без учета IE.Последняя маска-граница на данный момент совместима только с ядром хрома, и мобильный терминал можно использовать с уверенностью

Спасибо за чтение, я надеюсь, что это может вдохновить на будущую работу.

Категории