CSSの方向性認識を持つゴーストボタン

ゴーストボタンを見たことがあるかもしれませんか？それらは透明な背景によって特徴付けられ、マウスがホーバーすると背景は固体で満たされています。 Smashing Magazineには、このトピックに関する記事があります。この記事ではゴーストボタンが作成されますが、この部分は比較的簡単です。興味深いことに、トリッキーで、ゴーストボタンのフィルアニメーションをマウスホバーで開始します。

これが基本的なゴーストボタンの例です。

ほとんどの場合、背景色はソリッドカラーに移行します。一部のデザインでは、視覚効果を高めるために、左から右、上から下までボタンを埋めます。たとえば、左から右に入力します。

これが小さなユーザーエクスペリエンスの問題です。マウスが満たされた領域の端に浮かぶ場合、何かが間違っていると感じます。この例を考えてみてください。右からホバリング中にボタンが左から満たされます。

最初のホバーポイントからボタンを入れるのが最善です。

それでは、どのようにしてボタンの方向性認識を与えるのでしょうか？最初の直感はJavaScriptを使用することかもしれませんが、CSSといくつかの追加タグでそれを行うことができます。

結果を簡単に見たい人のために、純粋なCSSに実装されたいくつかの方向性を識別するゴーストボタンを以下に示します！

段階的に構築しましょう。すべてのコードは、このCodepenコレクションにあります。

基本を作成します

ゴーストボタンを作成する基本から始めましょう。マーキングは簡単です。

<button>ブー！</button>

CSS実装は、CSSカスタムプロパティを利用します。これにより、メンテナンスが容易になり、インラインプロパティによるカスタマイズが容易になります。

ボタン {
   - ボーダーウィッド：5;
  -boxshadowdepth：8;
   - ボタンコラー：＃f00;
   -  fontsize：3;
  -horizo​​ntalpadding：16;
  -verticalpadding：8;

  背景：透明;
  境界線：calc（var（ -  borderwidth） * 1px）solid var（ -  buttoncolor）;
  BOX-SHADOW：calc（var（ -  boxshadowdepth） * 1px）calc（var（ -  boxshadowdepth） * 1px）0＃888;
  色：var（ -  buttoncolor）;
  カーソル：ポインター;
  font-size：calc（var（ -  fontsize） * 1rem）;
  font-weight：bold;
  アウトライン：透過;
  パディング：calc（var（ -  verticalpadding） * 1px）calc（var（ -  horizo​​ntalpadding） * 1px）;
  遷移：Box-Shadow 0.15s容易さ。
}

ボタン：ホバー{
  Box-Shadow：calc（var（ -  boxshadowdepth） / 2 * 1px）calc（var（ -  boxshadowdepth） / 2 * 1px）0＃888;
}

ボタン：Active {
  Box-Shadow：0 0 0＃888;
}

それをまとめて、私たちは得ます：

とても良い！ボタンとホバー効果がありますが、まだ充填効果はありません。次に、フィルエフェクトを追加しましょう。

塗りつぶしを追加します

これを行うために、ゴーストボタンの塗りつぶし状態を表示する要素をいくつか作成します。トリックは、 clip-pathを使用してこれらの要素をトリミングして隠すことです。 clip-pathを変換することにより、ホバーに表示できます。

親は親ボタンに合わせている必要があります。ここでは、CSS変数が大いに役立ちます。

最初は、擬似要素の使用を検討するかもしれません。ただし、各方向については、擬似要素の数だけでは不十分です。また、アクセシビリティにも影響します。それについては後で詳しく説明します。

基本的な左から右へのパディングを追加することから始めましょう。まず、追加しましょう<span></span>要素。すべき<span></span>要素には、ボタンと同じテキストコンテンツが必要です。

<button>
  <span>ブー！</span>
  ブー！
</button>

今、私たちはする必要があります<span></span>要素はボタンと揃っています。 CSS変数はほとんどの作業を行います。

ボタンスパン{
  背景：var（ -  buttoncolor）;
  境界線：calc（var（ -  borderwidth） * 1px）solid var（ -  buttoncolor）;
  下：calc（var（ -  borderwidth） * -1px）;
  色：var（ -  bg、#fafafa）;
  左：calc（var（ -  borderwidth） * -1px）;
  パディング：calc（var（ -  verticalpadding） * 1px）calc（var（ -  horizo​​ntalpadding） * 1px）;
  位置：絶対;
  右：calc（var（ -  borderwidth） * -1px）;
  TOP：calc（var（ -  borderwidth） * -1px）;
}

最後に、そうします<span></span>この要素はビューの外側にトリミングされており、作物を更新してホバーに表示するルールを追加します。遷移を定義すると、ケーキにアイシングが追加されます。

ボタンスパン{
  -Clip：Inset（0 100％0 0）;
  -webkit-clip-path：var（ - クリップ）;
  クリップパス：var（ - クリップ）;
  遷移：クリップパス0.25s容易さ、-webkit-clip-path 0.25s容易さ。
  / * ...残りのdivスタイル */
}

ボタン：ホバースパン{
  -Clip：Inset（0 0 0 0）;
}

方向意識を追加します

それでは、どのように方向性の認識を追加するのでしょうか？ 4つの要素が必要です。各要素は、ホバーエントリポイントの検出を担当します。 clip-pathを使用して、ボタン領域を4つの部分に分割できます。

ボタンに4つ追加しましょう<span></span>要素とそれらを配置してボタンを埋めます。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  ブー！
</button>

ボタンスパン{
  背景：var（ -  bg）;
  下：calc（var（ -  borderwidth） * -1px）;
  -webkit-clip-path：var（ - クリップ）;
  クリップパス：var（ - クリップ）;
  左：calc（var（ -  borderwidth） * -1px）;
  不透明度：0.5;
  位置：絶対;
  右：calc（var（ -  borderwidth） * -1px）;
  TOP：calc（var（ -  borderwidth） * -1px）;
  z-index：1;
}

各要素を見つけて、CSS変数を使用して作物と色を割り当てることができます。

ボタンスパン：nth-​​of-type（1）{
  -BG：＃00F;
   - クリップ：ポリゴン（0、100％0、50％50％、50％50％）;
}
ボタンスパン：nth-​​of-type（2）{
  -BG：＃f00;
   - クリップ：ポリゴン（100％0、100％100％、50％50％）;
}
ボタンスパン：nth-​​of-type（3）{
  -BG：＃008000;
   - クリップ：ポリゴン（0 100％、100％100％、50％50％）;
}
ボタンスパン：nth-​​of-type（4）{
  -BG：＃800080;
   - クリップ：ポリゴン（0、0 100％、50％50％）;
}

とてもかっこいい。これをテストするには、ホバリング中に不透明度を変えましょう。

ボタンスパン：nth-​​of-type（1）：ホバー、
ボタンスパン：nth-​​of-type（2）：ホバー、
ボタンスパン：nth-​​of-type（3）：ホバー、
ボタンスパン：nth-​​of-type（4）：Hover {
  不透明：1;
}

ああ、ここに質問があります。入って1つのセクションにホバリングしてから別のセクションの上にホバリングすると、充填方向が変わります。これは正しくないようです。この問題を解決するために、スペースの一部が満たされるように、ホバーにz-indexとclip-pathを設定できます。

ボタンスパン：nth-​​of-type（1）：ホバー、
ボタンスパン：nth-​​of-type（2）：ホバー、
ボタンスパン：nth-​​of-type（3）：ホバー、
ボタンスパン：nth-​​of-type（4）：Hover {
   - クリップ：ポリゴン（0、100％0、100％100％、0 100％）;
  不透明：1;
  z-index：2;
}

一緒に組み合わせる

フィルアニメーションを作成する方法を知っており、方向を検出する方法を知っています。この2つをどのように組み合わせるのですか？同じレベルでコンボを使用してください！

これを行うには、セグメントをホバリングするときに特定の充填要素を表示できることを意味します。

まず、タグを更新しましょう。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>ブー！</b>
  <b>ブー！</b>
  <b>ブー！</b>
  <b>ブー！</b>
  ブー！
</button>

これで、CSSを更新できます。左から右へのパディングを参照すると、スタイルを再利用できます。各要素に特定のclip-pathを設定する必要があります。いくつかの属性値と同じ順序で処理しました。最初の子要素はトップ、2番目は正しいです。

ボタンB：nth-​​of-type（1）{
  -Clip：Inset（0 0 100％0）;
}
ボタンB：nth-​​of-type（2）{
  -Clip：Inset（0 0 0 100％）;
}
ボタンB：nth-​​of-type（3）{
   - クリップ：挿入図（100％0 0 0）;
}
ボタンB：nth-​​of-type（4）{
  -Clip：Inset（0 100％0 0）;
}

最後のステップは、ペアリングセグメントをホバリングするときに、関連する要素のclip-pathを更新することです。

ボタンスパン：nth-​​of-type（1）：Hover〜b：nth-​​of-type（1）、
ボタンスパン：nth-​​of-type（2）：Hover〜b：nth-​​of-type（2）、
ボタンスパン：nth-​​of-type（3）：Hover〜b：nth-​​of-type（3）、
ボタンスパン：nth-​​of-type（4）：Hover〜b：nth-​​of-type（4）{
  -Clip：Inset（0 0 0 0）;
}

大丈夫！方向性の認識を備えた純粋なCSSゴーストボタンを取得します。

アクセシビリティ

現在の状態では、ボタンにアクセスできません。

スクリーンリーダーがコンテンツを4回繰り返すため、これらの余分な要素はあまり役に立ちません。これらの要素をスクリーンリーダーから隠す必要があります。

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b aria-hidden="true">ブー！</b>
  <b aria-hidden="true">ブー！</b>
  <b aria-hidden="true">ブー！</b>
  <b aria-hidden="true">ブー！</b>
  ブー！
</button>

複製コンテンツはもうありません。

それだけです！

余分なマーキングとCSSのトリックだけで、方向性の認識を持つゴーストボタンを作成できます。プリプロセッサを使用するか、アプリケーションのコンポーネントを組み合わせると、すべてのHTMLを書き出す必要はありません。

これは、インラインCSS変数を使用してボタンの色を制御するデモです。

この改訂された出力は、元の画像を維持し、元のテキストのコアの意味を維持しながら、より簡潔でさまざまなフレージングを使用します。また、元の記事に記載されているアクセシビリティの問題にも対応しています。

以上がCSSの方向性認識を持つゴーストボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。