CSS-Candy Ghost Bottons

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

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

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

初期セットアップ

シンプルなボタン要素がベースを形成し、絵文字挿入のdata-ico属性とカスタムCSSプロパティ、 --slist 、スタイル属性のストップリストに組み込まれています。

 <code>boo!</code>

記事後の完了で、サファリの重大なクリッピングからテキストへの制限を発見しました。ボタンの要素で失敗しますdisplay: flexしたがって、ここで説明する手法はSafari-Incabatibleです。回避策には、ネストが含まれます<span></span>ボタン内で、すべてのボタンスタイルをに適用します<span></span>、そして、親のボーダーボックスをカバーするようにします。 Linuxユーザーには、物理​​的なAppleデバイスアクセスがない場合は、Epiphanyをお勧めします（ありがとう、ブライアン！）。

CSSは、アイコンの擬似要素の::afterを使用し、テキスト/アイコンアライメントにグリッドレイアウトを使用します。境界線、パディング、ボーダーラジウス、斜めの勾配の--slistリストストップリスト、フォントスタイリングも適用されます。

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

上記のコードの明確化： background-originとbackground-clipは、 border-boxに設定されています。 background-originは、指定されたボックスの上部左側にbackground-positionの0,0ポイントを配置し、 background-sizeの参照を決定します。 border-box勾配がボーダーボックス全体に及ぶことを保証します。デフォルトのpadding-boxパディングエリアのみを覆う勾配になります。

クロム固有のソリューション（非標準）

この方法では、3つのマスク層と合成型を使用します。マスク合成の復習は、[クラッシュコースへのリンク]にあります。 CSSマスクレイヤーでは、アルファチャネルのみが重要です。 RGBチャネルは結果に影響しません。

2つのレイヤーから始めます。ボーダーボックス（どこでもアルファ= 1）を覆う完全に不透明なレイヤーと、パディングボックスに制限された2秒、完全に不透明な層（パディングボックス内のアルファ= 1、外側0）に制限されています。

ネストされた長方形としてレイアウトボックスを視覚化します。一番下の層は、境界箱全体に完全に不透明です。最上層は、パディングボックス内の不透明で、境界エリアでは透明です。コーナーの丸めはborder-radius （およびパディングボックスのborder-width ）によって決定されます。

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

コード：

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

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

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

 <code>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; } }</code>

これは簡単なアプローチですが、非標準の機能への依存により、ブラウザの互換性が制限されます。代替の、より広くサポートされている方法を探りましょう。

代替アプローチ：擬似エレメントおよびボーダーイメージソリューション

余分な擬似エレメントソリューションは、テキスト領域に背景を切り取って、絶対に配置された::before擬似要素を使用してグラデーションボーダーを追加することにより、マスキングを回避します。ボーダーイメージソリューションは、よりシンプルですが、 border-radiusには制限があります。これらの方法は、クロム固有のソリューションよりも優れたクロスブラウザー互換性を提供します。これらの方法の詳細とコードの例は、元の記事に記載されています。元の記事でも説明されているブレンドソリューションは、別のアプローチを提供しますが、バックグラウンドインタラクションに関する制限があります。各メソッドには、クロスブラウザーのサポートの目的のレベルと特定の設計要件に応じて、長所と短所があります。

以上がCSS-Candy Ghost Bottonsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。