недавно я искал вдохновение кодирования, не имея художественного таланта. Мой подход? Воспроизведение визуально привлекательных творений другими, сосредотачиваясь на чистом, кратком коде. Эти кнопки призраков конфеты привлекли мое внимание!

]

они казались идеальными для быстрого проекта. Через пятнадцать минут я достиг этого в хроме:

этот метод заслуживает обмена. Эта статья подробно описывает мой процесс и исследует альтернативные подходы.

первоначальная настройка

]

простой элемент кнопки образует базу, включающую атрибут data-ico для вставки эмодзи и собственного свойства CSS, -slist , для списка остановки в атрибуте стиля.

]

boo!

после завершения пост-статей, я обнаружил значительные ограничения Safari в течение текста. Он не работает на элементах кнопок, (и, возможно, сетки) элементы и текст дочернего элемента. Следовательно, методы, описанные здесь, являются сафари-не совместимыми. Обходной путь включает в себя гнездование внутри кнопки, применение всех стилей кнопок к , и гарантирует, что он покрывает пограничную бокс родителя. Для пользователей Linux не хватает физического доступа к устройству Apple, я рекомендую Epiphany (спасибо, Брайан!).

CSS использует

:: After псевдо-элемент для значка и макет сетки для выравнивания текста/значка. Граница, заполнение, граница-радиус, -slist остановка для диагонального градиента, а также применяется стиль шрифта. ]

button {
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5em;
  border: solid .25em transparent;
  padding: 1em 1.5em;
  border-radius: 9em;
  background: 
    linear-gradient(to right bottom, var(--slist)) 
      border-box;
  font: 700 1.5em/ 1.25 ubuntu, sans-serif;
  text-transform: uppercase;

  &::after { content: attr(data-ico) }
}

уточнение в приведенном выше коде:

фоно-Origin и фоновый заглушение устанавливается в Border-box . founal-Origin позиционирует founal-Position . Border-box обеспечивает градиент охватывает всю пограничную коробку. По умолчанию накладки-box приведет к тому, что градиент будет покрывать только область прокладки. ] Chromium-специфическое решение (нестандартное) ]

В этом методе используются три слоя маски и композицию. Повторное освещение на композитировании маски можно найти в [ссылке на Crash Course]. Только альфа -канал имеет значение в слоях маски CSS; Каналы RGB не влияют на результат.

]

мы начинаем с двух слоев: полностью непрозрачный слой, покрывающий пограничную коробку (Alpha = 1 везде) и второй, также полностью непрозрачный, слой, ограниченный на прокладку (Alpha = 1 в блокноте, 0 снаружи).

]

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

Border-Radius

(и

border-width для прокладки). ] эти слои композиции с использованием exkude

operation (или

xor в webkit). Результат: alpha = 0 в рамках прокладки (оба слоя имеют альфа = 1) и alpha = 1 в области границы (первый слой alpha = 1, второй слой alpha = 0). Code:

кнопка { / * те же базовые стили */ --full: линейный градиент (красный 0 0); -Webkit-mask: var (-полная) накладная, вар (-полная); -Webkit-mask-composite: xor; Маска: var (-Full) Badding-box Exculed, var (-Full); }

button {
  /* same base styles */
  --full: linear-gradient(red 0 0);
  -webkit-mask: var(--full) padding-box, var(--full);
  -webkit-mask-composite: xor;
  mask: var(--full) padding-box exclude, var(--full);
}

включен, с нестандартной версией переопределенной.

] это создает градиентную границу, но не хватает текста. Добавление слоя третьей маски, ограниченный текстом (с прозрачным текстом), и xersing его с предыдущим результатом добавляет текст обратно. Однако это специфично для хрома из-за нестандартного text

значение для

mask-clip . A @поддерживает block обеспечивает совместимость Cross-Browser (без текстовой маскировки в браузерах без поддержки). ] кнопка { / * те же базовые стили */ @supports (-webkit-mask-clip: text) { -Вебкит-текстовый цвет-цвета: прозрачный; --full: линейный градиент (красный 0 0); -Webkit-mask: var (--полная) текст, var (-полная) накладная, вар (-полная); -Webkit-mask-composite: xor; } }

button {
  /* same base styles */

  @supports (-webkit-mask-clip: text) {
    -webkit-text-fill-color: transparent;
    --full: linear-gradient(red 0 0);
    -webkit-mask: var(--full) text, var(--full) padding-box, var(--full);
    -webkit-mask-composite: xor;
  }
}

Альтернативные подходы: псевдо-элементные и пограничные решения

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

:: перед

псевдоэлементом. Решение пограничного изображения, хотя и проще, имеет ограничения с

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