スタッフブログ

コピペで簡単！CSSだけで作れる郵便切手と消印風スタンプ

  /

コピペで簡単！CSSだけで作れる郵便切手と消印風スタンプ今月7月は別名「文月」と呼ばれ、特に23日には「文月ふみの日」として様々なイベントが行われます。

今回はそんなお手紙と関係の深い7月にちなんで、CSS3を使って画像を切手のように装飾したり、消印風のスタンプを作成する方法をご紹介したいと思います。

※IE以外のブラウザは、2015年7月17日現在の最新版にて確認を行っています。

CSS3を使った郵便切手の作り方


CSS3を利用することで、ごくシンプルなHTMLマークアップのまま、画像を郵便切手のような見た目に装飾することができます。

装飾部分には画像を使用していないため、CSSに手を加えるだけで色や影の設定も簡単に変えられます。また、Retinaディスプレイでも綺麗に表示され、画面を拡大＆縮小しても荒くなりませんので、レスポンシブWebデザインと相性が良いのも嬉しい点です。

HTML

<img src="fish.png" class="stamp">

CSS

.stamp {
	padding: 10px;
	background: #fff;
	background: radial-gradient(at center, transparent, transparent 5px, #fff 6px);
	background-position: -10px -10px;
	background-size: 20px 20px;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
対応ブラウザ：
IE10〜、Firefox、Chorme、Safari、Opera、iOS、Android

IE9以下のブラウザではradial-gradientをサポートしていないため切手風の見た目にはなりませんが、単純に白い枠として表示されますので、レイアウトが崩れる心配等はありません。

以下はコーディングのポイントと解説になりますので、特に必要ない場合は「スタンプの作り方」まで読み飛ばしてください。

1-1. radial-gradientを使う

CSS3のradial-gradientは、円形グラデーションを描画するための関数です。
画像の周囲にradial-grarientによる水玉模様の背景を表示させることで、ちょうど切り取られた切手のように見せることができます。

なお、SafariやFirefoxもradial-grarientに対応しているのですが、そのままですとジャギが目立ってしまいます。
そのため、途中色と終了色の半径を1pxずらすことで、少しアンチエイリアスがかかったような見た目にすることができます。

radial-grarientの半径を1pxずらす

1-2. 背景の位置をずらす

境界線に水玉模様の円の中心を持ってくるには、背景の開始表示位置を指定するbackground-positionプロパティの値をマイナスに設定します。
background-positionの値は「background-sizeの値 × -0.5」で指定してください。

なお、｢background-size」の値は、装飾する画像の幅や高さが割り切れる数で設定する必要があります。そのためCMSで使用する場合は、サムネイルやアイコンなど、固定サイズで表示される箇所に適用するのがおすすめです。

1-3. filter:drop-shadowを使う

要素に影をつけるCSSとしては「box-shadow」が有名ですが、｢box-shadow」はボックス要素全体の幅と高さを元に影をつけるため、今回のように要素がところどころ透過されている場合は、綺麗な影をつけることができません。

そこで、要素の中で透過されていない部分だけに影をつけてくれる「filter:drop-shadow」を使っています。

｢filter:drop-shadow」はIE11でもサポートしていないため表示できる環境は限られてしまうのですが、影の描画のためだけのためにマークアップを複雑にしたり画像を使用することは避けたかったので、今回はdrop-shadowの記述のみにとどめています。

消印風スタンプの作り方

2015.07.17

スタンプも切手の場合と同じく全てCSSで装飾していますので、色やサイズや枠線の太さなども簡単にカスタマイズが可能です。

IE8以下のブラウザではborder-radiusがサポートされていないため、スタンプが丸くならずに四角く表示されます。

HTML

<div class="postmark">2015.07.17</div>

CSS

.postmark{
	position: relative;
	margin: 0;
	padding: 10px;
	width: 100px;
	height: 100px;
	border: 5px double #430;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	color: #430;
	text-align: center;
	font-size: 22px;
	font-family: 'Bree Serif', serif;
	line-height: 100px;
	-webkit-transform: rotate(-16deg);
	-ms-transform: rotate(-16deg);
	transform: rotate(-16deg);
}
.postmark::before{
	position: absolute;
	top: 14%;
	display: block;
	padding: 0 0 8px;
	width: 82%;
	border-bottom:1px solid #430;
	content: 'Posted at :';
	font-size: 16px;
	line-height: 1;
}
.postmark::after{
	position: absolute;
	bottom: 16%;
	display: block;
	padding: 6px 0 0;
	width: 82%;
	border-top: 1px solid #430;
	content: 'from TOKYO';
	font-size: 13px;
	line-height: 1;
}

今回のサンプルでは「Google Fonts」を使用していますので、<head>タグ内に以下の記述を追加してください。

<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">
対応ブラウザ：
IE9〜、Firefox、Chorme、Safari、Opera、iOS、Android

以下はコーディングの解説とポイントになります。

2-1. contentプロパティを使う

::before、::after擬似要素にcontentプロパティを指定することで、比較的シンプルなHTMLマークアップのままテキストや画像などのコンテンツを追加することができます。今回のサンプルでは「Posted at :」と「from JAPAN」の部分がそれに当たります。この部分はサイトに合わせて、お好みのテキストに差し替えていただければ幸いです。

.postmark::before{
	content: 'Posted at :';
}
.postmark::after{
	content: 'from TOKYO';
}

2-2. border-radiusの値を50％で指定する

tonalityborder-radiusはボックス要素を角丸にするためのプロパティですが、スタンプのように必ず正円になる場合は、値を「px」ではなく「50％」で指定するのが便利です。
これにより、もしスタンプ全体のサイズを変更した場合も、border-radiusの値を変えることなく、綺麗な円のまま表示されます。

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

2-3. 日付を天地中央に配置する

要素を天地中央に配置するには、display:table-cellを利用するなど様々な方法があるのですが、今回はIE対策＆マークアップをシンプルにするため、ややメンテナンス性は落ちますが、要素の高さと同じ値をline-heightで指定する方法を使っています。

line-height: 100px;

2-4. テキスト要素はWebフォントを使う

format_sizeWebフォントの利用は必須ではないのですが、PCだけでなくスマートフォンやタブレットなど様々なデジタル端末に対応する場合は、どんな環境でもテキスト要素が同じ幅や高さで表示できるWebフォントが便利です。

今回はGoogle Fontsの「Bree Serif」を使用させていただきました。
フォントの種類を変えるだけでまた全然違う雰囲気になりますので、色々と試してみてください。

<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">

font-family: 'Bree Serif', serif;

2-5. transform:rotateを使う

transformプロパティのrotate関数の使用により、要素を回転させることができます。実際の消印も傾いていることが多いため、今回のサンプルも少し回転させて斜めに表示させてみました。
こちらもお好みで色々な角度を試していただけると幸いです。

-webkit-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
transform: rotate(-16deg);

まとめ

コピペで簡単！CSSだけで作れる郵便切手と消印風スタンプ
今まではこのように少し複雑な装飾は毎回画像として作成することが多かったのですが、CMSでの利用などを考えるとスタイルシートでの装飾がとても便利です。

今回はメンテナンス性や汎用性を考え「画像やJSを使わない」｢なるべくシンプルなマークアップで実装する」ことを目標に、郵便切手や消印風スタンプを作成する方法をご紹介いたしました。

ただし、背景に画像ファイルを併用したり、ボックス要素を1つ追加すれば、IE8やIE9に対応させることも可能です。
機会がありましたらそちらもあわせてご紹介したいと思います。

AIの導入に躊躇されている企業様は、まずは1つのツールだけでも利用してみてはいかがでしょうか？EC×ChatGPTをはじめとしたAI企画から導入・運用まで、経験豊富な弊社プロ人材が手厚くサポートいたします。

AI企画＆導入事例

AIを活用したい企業様はこちら

CSS デザイン
ABOUT ME
日野 夕奈
Webマーケティング部のスタッフです。主にデザインとコーディングを担当しています。見やすさ＆わかりやすさ、それにちょっぴり遊び心を加えたWebデザインを目指しています。
関連記事