はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > CSS のみで、切手風のデザインを作る

CSS のみで、切手風のデザインを作る

CSS のみで、切手風のデザインを作る

CSS のみで、切手風のデザインを作れることがわかったのでメモ。

以下の「CSSで水玉模様を作る」の応用で作ることができる。

cartman0.hatenablog.com

サンプル

codepen.io

作り方

  1. まず、background: radial-gradient と background-size/code>を使って水玉模様を作る。 詳細は以下のリンク。

    cartman0.hatenablog.com

  2. 次に、background-positonプロパティで、 円（水玉）の開始位置をズラすことができます。 このとき、background-size: Xpx Xpxで指定したサイズの半分のサイズ(X/2 px)を指定すると、ちょうど左上角に円の中心がくるように調整できる。

  3. ここまで行うと、切手のような形になる。 仕上げとして、円の色を色でなくtransparent（透明）を指定 することで、背景に関係なく切手のような形にすることができる。

できあがったSassコードは以下です。 変数として、サイズ（正方形）、paddingの大きさ、色と円の個数を指定して 切手のデザインを作ることができます。

cssで切手風デザイン