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はこちら
※最新のブラウザでご覧ください。

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

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

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

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

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

Web関連ニュース＆ブログ更新情報をチェックする

TwitterやFacebookではブログの更新情報とあわせて、Webやデザイン関連のニュースをお届けしています。

Twitterでフォローする

RSSリーダーで購読する

Facebookページを「いいね！」する

新着記事