読者です 読者をやめる 読者になる 読者になる

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

情報・Web系技術の勉強メモ・備忘録です。

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

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

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

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

cartman0.hatenablog.com

サンプル

codepen.io

作り方

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

    cartman0.hatenablog.com

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

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

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

cssで切手風デザイン