今月7月は別名「文月」と呼ばれ、特に23日には「文月ふみの日」として様々なイベントが行われます。

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

目次:

  1. CSS3を使った郵便切手の作り方
  2. 消印風スタンプの作り方
  3. まとめ

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

1. 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: -webkit-gradient(radial, center center, 5, center center, 6, from(#fff), color-stop(100%,#fff), color-stop(0%,rgba(255,255,255,0)));
background-position: -10px -10px;
background-size: 20px 20px;
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
対応ブラウザ:
IE10〜FirefoxChormeSafariOperaiOSAndroid

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

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

1-1. radial-gradientを使う

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

なお、Safariもradial-grarientに対応しているのですが、そのままですとジャギが目立ってしまいます。そのため、ベンダープレフィックスを付けた、-webkit-gradientでの記述も追加しています。

また、途中色と終了色の半径を1pxずらすことで、同じくジャギが目立ちやすいFirefoxでも少しアンチエイリアスがかかったような見た目にすることができます。

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の記述のみにとどめています。


2. 消印風スタンプの作り方

2015.07.17

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

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

HTML

<p class="postmark">2015.07.17

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='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
対応ブラウザ:
IE9〜FirefoxChormeSafariOperaiOSAndroid

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

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

[wp-svg-icons icon="file-xml" wrap="b"]: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. 日付を天地中央に配置する

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

line-height: 100px;

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

format_sizeWebフォントの利用は必須ではないのですが、PCだけでなくスマートフォンやタブレットなど様々なデジタル端末に対応する場合は、どんな環境でもテキスト要素が同じ幅や高さで表示できるWebフォントが便利です。
今回はGoogle Fontsの「Bree Serif」を使用させていただきました。
フォントの種類を変えるだけでまた全然違う雰囲気になりますので、色々と試してみてください。

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

font-family: 'Bree Serif', serif;

2-5. transform:rotateを使う

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

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

3. まとめ

今まではこのように少し複雑な装飾は毎回画像として作成することが多かったのですが、CMSでの利用などを考えるとスタイルシートでの装飾がとても便利です。
今回はメンテナンス性や汎用性を考え「画像やJSを使わない」「なるべくシンプルなマークアップで実装する」ことを目標に、郵便切手や消印風スタンプを作成する方法をご紹介いたしました。
ただし、背景に画像ファイルを併用したり、ボックス要素を1つ追加すれば、IE8やIE9に対応させることも可能です。
機会がありましたらそちらもあわせてご紹介したいと思います。

※作成から2年前(882日経過)の記事です。内容が古い可能性があります。
東京都東日本橋の株式会社プレスマンPRESSMAN*Tech