CSS で Adobe Photoshop のあの透明を表現する方法

CSS で Adobe Photoshop のあの透明を表現する方法を紹介します。
例えば、Adobe Photoshop が好きすぎる人におすすめな方法です。

1. CSS で Adobe Photoshop の透明を表現する方法

CSS で Adobe Photoshop の透明を表現する方法

CSS で市松模様を表現するには linear-gradient を使用します。
例えば、特定の要素に透明の市松模様を表示するには、次のコードを特定の要素に追加します。

.transparent {

  background: rgb(204, 204, 204);

  background-image:

    linear-gradient(45deg, rgb(255, 255, 255) 25%, transparent 0),

    linear-gradient(45deg, transparent 75%, rgb(255, 255, 255) 0),

    linear-gradient(45deg, rgb(255, 255, 255) 25%, transparent 0),

    linear-gradient(45deg, transparent 75%, rgb(255, 255, 255) 0);

  background-size: 16px 16px;

  background-position: 0 0, 8px 8px, 8px 8px, 16px 16px;

}

実際の表示はこんな感じ。

まとめ

CSS で Adobe Photoshop の透明を表現する方法を紹介しました。