CSS チェッカーボードの背景…ただし、角が丸く、ホバー スタイルがある

タイムスタンプ：20年2022月9日19:XNUMX AM
画像

一方では、CSS を使用して単純な市松模様の背景を作成するのは簡単です。 一方で、私たちが CSS グラデーションの忍者でない限り、私たちは基本的なパターンに固執しています。

少なくとも、画面の市松模様の背景を見つめながら、四角形の角を少しだけ丸くしようとして、そう思いました…お気に入りの箇条書きグリフを思い出すまでは — ✦ —そして、パターンのすべての交差点に配置することができれば、きっと私が望むデザインを手に入れることができると考えました.

それが可能であることがわかりました！ これが証拠です。

基本的なパターンから始めましょう。

<div></div>
div {
 background: 
  repeating-linear-gradient(
    to right, transparent, 
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  repeating-linear-gradient(
    to bottom, transparent,  
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  linear-gradient(45deg, pink, skyblue);
  /* more styles */
}

それが私たちに与えるのは、ピンクから青に変わる正方形の繰り返しの背景です 5px それらの間の白いギャップ。 各正方形は XNUMX ピクセル幅で透明です。 これは次を使用して作成されます。 repeating-linear-gradient、グラデーションが含まれている領域全体で繰り返される線形グラデーション画像を作成します。

つまり、そのシーケンスの最初のグラデーションは白い横縞を作成し、XNUMX 番目のグラデーションは白い縦縞を作成します。 重ねて市松模様を形成し、残りのスペースを XNUMX 番目のグラデーションで塗りつぶします。

次に、背景パターンの上に、前述の星のグリフを追加します。 それを同じに含めることでそれを行うことができます background 形状にエンコードされた SVG を使用しながら、プロパティをグラデーションとして使用します。

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
      <foreignObject width='35px' height='35px'>
        <div xmlns='http://www.w3.org/1999/xhtml' style='color: white; font-size: 35px'>✦</div>
      </foreignObject>
    </svg>"
    ), 
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  /* more style */
}

それを分解しましょう。 最初のキーワード、 repeat、これが繰り返される背景画像であることを示します。 続いて、それぞれの繰り返し単位の位置とサイズです (left -17px top -22px/55px 55px）。 このオフセット位置は、グリフとパターンのサイズに基づいています。 グリフ サイズがどのように指定されるかを以下に示します。 市松模様の各交点の上に繰り返しグリフを正確に再配置するために、オフセットが追加されます。

SVGにはHTMLがあります <div> グリフを運ぶ。 宣言したことに注意してください font-size その上で。 これにより、最終的にチェッカーボード パターンの正方形の境界半径が決まります。グリフが大きいほど、正方形は丸くなります。 データ URL から展開された SVG は次のようになります。

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
  <foreignObject width='35px' height='35px'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='color:white;font-size:35px'>✦</div>
  </foreignObject>
</svg>

CSSパターンが確立されたので、追加しましょう :hover を使用してグリフが削除され、白い線がわずかに半透明になる効果 rgb() アルファ透明度を持つカラー値。

div:hover {
  background:
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
  linear-gradient(45deg, pink, skyblue);
  box-shadow: 10px 10px 20px pink;
}

では行きましょう！ これで、角が丸くなっただけでなく、次のような効果のパターンをより細かく制御できるようになりました。

繰り返しますが、この演習全体は、丸みを帯びた角、パターン全体のオーバーレイとして機能する背景グラデーション、およびインタラクティブなスタイルをサポートするチェッカーボード パターンの正方形のグリッドを取得する試みでした。 これはタスクを非常にうまく達成していると思いますが、あなたがどのようにアプローチしたかにも興味があります. コメントで教えてください！

タイムスタンプ：

より多くの CSSトリック