Blog
Webデザイン

HTMLとCSSで手帳アイコンを書いてみました。

2013-08-09 16:00
この記事は約 2 分で読めます。

話題の「イラストレーターで四角形オブジェクトを1つだけ配置して、すべてアピアランスで作成されたアイコン」をさらにHTMLとCSSで再現された方がいたので、HTMLとCSSだけで手帳アイコンを作ることにトライしてみました。

参考サイト

まずは参考にさせていただいた元ネタはこちらです。
イラレのアピアランスで作れたアイコンが凄かったので、HTMLとCSSで模写した。|Web Design KOJIKA17
Illustrator Unlimited Appearance - suzuki | JAYPEG

両者とも、とてもクオリティが高いですね。及ばないかもしれませんが、レッツトライ。

HTMLとCSSで作った手帳アイコン

eyecatch-icon-design-css-only
HTMLとCSSはこちら
※最新のブラウザでご覧ください。

裏表紙 + 紙

icon-design-css-only01
裏表紙をベースに「box-shadow」を内側に、「紙」と「紙の影」を左側に4pxと1pxずつ交互にずらして配置して表現しています。

表紙 + 背表紙

icon-design-css-only02
(1)凹凸を表現するために、革の色(茶)をベースに左から右に陰影をつけた4色でグラデーションを設定。
(2)丸みには(1)の上から、黒に透明度を設定したグラデーションでをかぶせています。

バンド

icon-design-css-only03
(1)円形のグラデーションでボタン部分の描画を開始し、ボタンの光沢→影→革の色(茶)と描いています。
(2)丸みには表紙同様、(1)の上から、黒に透明度を設定したグラデーションでをかぶせています。

おわりに

いかがでしたでしょうか。ディテールで物足りない部分もありますが、なかなか良くできたのではないでしょうか。

HTMLとCSSの表現力がより活用できるためにも、古いブラウザへの対応の必要がなくなることを心より願っております。

> > >
あわせて読みたい