最近、私は芸術的な才能に欠けているコードのインスピレーションを求めました。私のアプローチ？ 視覚的に魅力的な作品を他の人が複製し、清潔で簡潔なコードに焦点を当てています。 これらのキャンディゴーストボタンが私の目を引きました！

彼らは迅速なプロジェクトにぴったりのようでした。 15分以内に、私はこれをクロムで達成しました：

このテクニックは共有に値します。 この記事では、私のプロセスについて詳しく説明し、代替アプローチを調査します。

初期セットアップ

シンプルなボタン要素はベースを形成します。 data-ico 属性を絵文字挿入とカスタムCSSプロパティ - -

boo!

boo！ article後の完成、私はSafariの重大なクリッピングからテキストへの制限を発見しました。 ボタン要素で失敗します表示：flex （およびおそらくグリッド）要素、および子要素テキスト。 したがって、ここで説明する手法はSafari-Incabatibleです。回避策には、ボタン内に をネストし、すべてのボタンスタイルを

に適用し、親の境界箱をカバーするようにします。 Linuxユーザーには物理的なAppleデバイスアクセスがない場合は、Epiphany（ありがとう、Brian！）をお勧めします。 CSSは、アイコンに ::後の

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) }
}

ボタン { ディスプレイ：グリッド; Grid-auto-flow：列; Grid-Gap：.5em; 境界線：固体.25em透明。 パディング：1EM 1.5EM; ボーダーラジウス：9EM; 背景： 線形勾配（右下、var（ - スリスト）） ボーダーボックス; フォント：700 1.5EM/ 1.25 Ubuntu、Sans-Serif; テキスト変換：大文字; &:: after {content：attr（data-ico）} } 上記のコードに関する説明： background-origin and background-clip は border-box に設定されています。 background-origin は、指定されたボックスの上部左側に position の0,0ポイントを配置し、 background-size の参照を決定します。 border-box

パディングボックス

2つのレイヤーから始めます。ボーダーボックス（どこでもアルファ= 1）を覆う完全に不透明なレイヤーと、パディングボックスに制限された2秒、完全に不透明なレイヤー（パディングボックス内のアルファ= 1、外側は0）。 レイアウトボックスをネストされた長方形として視覚化します。 一番下の層は、境界箱全体に完全に不透明です。最上層は、パディングボックス内の不透明で、境界エリアでは透明です。 コーナーラウンドは、 border-radius （および

これらのレイヤーは、除外操作（または xor in webkit）を使用して複合されます。 結果：パディングボックス内のアルファ= 0（両方のレイヤーにはアルファ= 1）、境界領域のアルファ= 1（第1層アルファ= 1、第2層アルファ= 0）。

コード：

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);
}

詳細：赤い勾配が簡潔に使用されます。 勾配は、バックグラウンドクリップの制限により、両方のレイヤーに使用されます。 標準 mask-composite が含まれており、非標準バージョンがオーバーライドされています。

これは勾配の境界線を生成しますが、テキストがありません。 テキスト（透明なテキスト付き）に制限された3番目のマスクレイヤーを追加し、前の結果でXARINGを使用すると、テキストが戻ってきます。 ただし、これは、 mask-clip の非標準テキスト値のためにクロム固有です。 a @supports blockは、クロスブラウザーの互換性を保証します（非サポートブラウザーでテキストマスキングなし）。

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 に制限があります。 これらの方法は、クロム固有のソリューションよりも優れたクロスブラウザー互換性を提供します。 これらの方法の詳細とコードの例は、元の記事に記載されています。 元の記事でも説明されているブレンドソリューションは、別のアプローチを提供しますが、バックグラウンドインタラクションに関する制限があります。 各方法には、クロスブラウザーのサポートの目的のレベルと特定の設計要件に応じて長所と短所があります。