CSS のみで、切手風のデザインを作る
CSS のみで、切手風のデザインを作れることがわかったのでメモ。
以下の「CSSで水玉模様を作る」の応用で作ることができる。
サンプル
作り方
-
まず、
background: radial-gradientとbackground-size/code>を使って水玉模様を作る。 詳細は以下のリンク。 -
次に、
background-positonプロパティで、 円（水玉）の開始位置をズラすことができます。 このとき、background-size: Xpx Xpxで指定したサイズの半分のサイズ(X/2 px)を指定すると、ちょうど左上角に円の中心がくるように調整できる。 -
ここまで行うと、切手のような形になる。 仕上げとして、円の色を色でなく
transparent（透明）を指定 することで、背景に関係なく切手のような形にすることができる。
できあがったSassコードは以下です。 変数として、サイズ（正方形）、paddingの大きさ、色と円の個数を指定して 切手のデザインを作ることができます。
参考リンク
