タグ別アーカイブ: icon

Picture 7

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

8/23日の勉強会でのicomoonの続きです。
今回は自分で作った画像をicomoonを使ってアイコンフォントにしてみます。

目次

  1. イラストレーターでアイコンを作る
  2. アイコン画像をSVGファイル形式で書き出す
  3. icomoonに画像をupする
  4. サイトに実装してみる
  5. 更に!アイコンをCSS3で流行りのロングシャドーデザインに変えてみる

1.イラストレーターでアイコンを作る

形はなるべく単純に、隙間などは広めにとります。
また時々縮小してみてバランスを確認します。
私は300px×300pxでこんなのを作ってみました。
続きを読む