Blog

Webフォント×CSS3でロングシャドウアイコンを作ってみよう

2013年末の現在、フラットデザインの表現の一つとしてロングシャドウという表現方法が使われたアイコンが流行っています。

ただ、このロングシャドウを使ったアイコンをPhotoshop等で作るためには、少しテクニックが必要となるので、

私自身はなかなか自作でロングシャドウのアイコンを作るには至っていません。

 

そこでロングシャドウのアイコンを作る方法について調べていたところ、

CSS3を使って、テキストにロングシャドウの効果をつける方法が書かれた記事を見つけました。

見つけた記事はこちら→「●●っぽい表現ができる「CSS3」サンプル集」

 

そこで、以前「オリジナルアイコンをWebフォントで使ってみよう」という記事を書きましたが、

今回は、そのWebフォントとCSS3でロングシャドウをつける方法を合わせて、ロングシャドウのアイコンを作ってみました。

 

↓こちらが作ってみたものです。

DEMO

 

作り方

1.オリジナルアイコンのWEBフォントを作り、読み込む

Webフォントの作り方については、以前書いた記事をご覧下さい。

オリジナルアイコンをWebフォントで使ってみよう

作ったフォントは、サーバーにアップロードし、

CSSで指定し、読み込みます。

 

2.CSS3でアイコンにロングシャドウをつける

CSS3では、コンマで区切ることでプロパティを複数指定することができます。

通常のtext-shadowでは、影の大きさを大きくするとその分ぼやけてしまうので、

ロングシャドウにはなりません。

しかし、大きさ0の影を1pxずつずらして複数並べることで、

はっきりとした影をなが〜くつけることができるので、結果としてロングシャドウの表現を行うことができます。

具体的には、

のような感じです。

 

また、ロングシャドウにはいくつか種類があり、

影が徐々に薄くなっていくものや、徐々にぼやけていくものなどもありますが、

その場合は、text-shadowの不透明度や大きさを少しずつ変更したものを指定することで表現できます。

このような方法で、CSS3を使ってロングシャドウを指定することができます。

 

とはいえ、影の長さの分だけtext-shadowのプロパティを指定する必要があるため、

自力でこの記述をするのは、なかなか根気のいる作業です。

実際、長さ、ぼやけ具合、透明度を確認しながら調整する作業は、結構時間がかかってしまいました。

 

自力で組むのが大変なときは、ロングシャドウを実装するジェネレーターも公開されていますので、

そちらでCSSを用意する方法もあります。

そちらの方が、イメージ通りのロングシャドウをつけやすいかもしれません。

ジェネレーター→Long Shadows Generator – by Juani

 

最後に、

記事を書いている途中で気づいたのですが、

同じことを紹介されいている方が既にいらっしゃいました。

「CSS3でロングシャドーデザインのアイコンを作る」

 

こちらも参考に、是非お試しください。

 

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ