Webフォント×CSS3でロングシャドウアイコンを作ってみよう
2013年末の現在、フラットデザインの表現の一つとしてロングシャドウという表現方法が使われたアイコンが流行っています。
ただ、このロングシャドウを使ったアイコンをPhotoshop等で作るためには、少しテクニックが必要となるので、
私自身はなかなか自作でロングシャドウのアイコンを作るには至っていません。
そこでロングシャドウのアイコンを作る方法について調べていたところ、
CSS3を使って、テキストにロングシャドウの効果をつける方法が書かれた記事を見つけました。
見つけた記事はこちら→「●●っぽい表現ができる「CSS3」サンプル集」
そこで、以前「オリジナルアイコンをWebフォントで使ってみよう」という記事を書きましたが、
今回は、そのWebフォントとCSS3でロングシャドウをつける方法を合わせて、ロングシャドウのアイコンを作ってみました。
↓こちらが作ってみたものです。
作り方
1.オリジナルアイコンのWEBフォントを作り、読み込む
Webフォントの作り方については、以前書いた記事をご覧下さい。
作ったフォントは、サーバーにアップロードし、
CSSで指定し、読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /* Webフォントの読み込み */ @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* Webフォントを適用 */ .icon, .icon2, .icon3{ display: inline-block; padding: 8px; border-radius: 15px; background: #69F; font-family: 'icomoon'; /* ここで読み込んだフォント名を指定 */ speak: none; color: #fff; font-size: 30px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; overflow: hidden; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } |
2.CSS3でアイコンにロングシャドウをつける
CSS3では、コンマで区切ることでプロパティを複数指定することができます。
通常のtext-shadowでは、影の大きさを大きくするとその分ぼやけてしまうので、
ロングシャドウにはなりません。
しかし、大きさ0の影を1pxずつずらして複数並べることで、
はっきりとした影をなが〜くつけることができるので、結果としてロングシャドウの表現を行うことができます。
具体的には、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .icon{ text-shadow: 1px 1px 0 #06F, 2px 2px 0 #06F, 3px 3px 0 #06F, 4px 4px 0 #06F, 5px 5px 0 #06F, 6px 6px 0 #06F, 7px 7px 0 #06F, 8px 8px 0 #06F, 9px 9px 0 #06F, 10px 10px 0px #06F, 11px 11px 0px #06F, 12px 12px 0px #06F, 13px 13px 0px #06F, 14px 14px 0px #06F, 15px 15px 0px #06F; } |
のような感じです。
また、ロングシャドウにはいくつか種類があり、
影が徐々に薄くなっていくものや、徐々にぼやけていくものなどもありますが、
その場合は、text-shadowの不透明度や大きさを少しずつ変更したものを指定することで表現できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /* 徐々に薄くなっていくロングシャドウ(不透明度を徐々に下げたものを指定) */ .icon2{ text-shadow: 1px 1px 0 rgba(204, 102, 0, 1), 2px 2px 0 rgba(204, 102, 0, 0.92), 3px 3px 0 rgba(204, 102, 0, 0.84), 4px 4px 0 rgba(204, 102, 0, 0.76), 5px 5px 0 rgba(204, 102, 0, 0.68), 6px 6px 0 rgba(204, 102, 0, 0.6), 7px 7px 0 rgba(204, 102, 0, 0.52), 8px 8px 0 rgba(204, 102, 0, 0.44), 9px 9px 0 rgba(204, 102, 0, 0.36), 10px 10px 0 rgba(204, 102, 0, 0.28), 11px 11px 0 rgba(204, 102, 0, 0.2), 12px 12px 0 rgba(204, 102, 0, 0.12), 13px 13px 0 rgba(204, 102, 0, 0.04); } /* 徐々にぼやけていくロングシャドウ(大きさを徐々に大きくしたものを指定) */ .icon3{ background: #F9F; text-shadow: 1px 1px 0 #C6C, 2px 2px 0 #C6C, 3px 3px 1px #C6C, 4px 4px 1px #C6C, 5px 5px 2px #C6C, 6px 6px 2px #C6C, 7px 7px 3px #C6C, 8px 8px 3px #C6C, 9px 9px 4px #C6C, 10px 10px 4px #C6C, 11px 11px 5px #C6C, 12px 12px 6px #C6C, 13px 13px 7px #C6C, 14px 14px 8px #C6C, 15px 15px 9px #C6C; } |
このような方法で、CSS3を使ってロングシャドウを指定することができます。
とはいえ、影の長さの分だけtext-shadowのプロパティを指定する必要があるため、
自力でこの記述をするのは、なかなか根気のいる作業です。
実際、長さ、ぼやけ具合、透明度を確認しながら調整する作業は、結構時間がかかってしまいました。
自力で組むのが大変なときは、ロングシャドウを実装するジェネレーターも公開されていますので、
そちらでCSSを用意する方法もあります。
そちらの方が、イメージ通りのロングシャドウをつけやすいかもしれません。
ジェネレーター→Long Shadows Generator – by Juani
最後に、
記事を書いている途中で気づいたのですが、
同じことを紹介されいている方が既にいらっしゃいました。
こちらも参考に、是非お試しください。
Author Profile
SHARE
