タグ

コードとタイルに関するmasakuma0812のブックマーク (1)

  • 画像をタイル画風にする

    Result 画像の上に要素を重ねてdisplay:grid;でグリッドと枠線を作り中を空にすればタイル画のようなものが作れます 枠線はすき間をgrid-gapで作り、background: white;で白い枠線を表現します。 その際、画像部分に影響が出るので子要素にbackgroundを設定し、mix-blend-mode:lighten;で画像が表示されるようになっています。 設定適当なのでモニタサイズ次第ではズレると思います。親の高さを決める等、便宜調整下さい csssection article {/*タイル作成*/ position: absolute; top: 0; width: 100%; background: white; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; mix-bl

    画像をタイル画風にする
  • 1