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

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

目次

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

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

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

ico_01a

2.アイコン画像をSVGファイル形式で書き出す

ico_01b
(ソフトが英語版の為こんな画像ですが、ファイル→スクリプト→SVGで書き出して下さい。)

3.icomoonに画像をupする

start the App→ をクリック。

ico_2

次の画面で左上の赤い import icons ボタンをクリックし、SVGで書き出したファイルをインポートします。
すると、your custom icons の所にアイコンが出来ていますね!
それをクリックして選択します。選択したものは黄色い枠で囲われます。
ここで、他にも使いたいアイコンがあれば選択して自分用のアイコンセットを作っておいてもいいですね。
選択出来ましたら、右下の font→ をクリック。

ico_3

4.サイトに実装してみる

それでは選択したアイコンをダウンロードします。

ico_4

すると任意の場所にicomoonフォルダが出来ています。
アイコンの実装については真中さんのicomoon議事録に詳しいのでここでは省略致します。

5.更に!アイコンをCSS3で流行りのロングシャドーデザインに変えてみる

それではここでもうひと手間かけて、このアイコンを今流行りのロングシャドーデザインにしてみようと思います。
簡単なhtmlファイルを作ってみましたのでご覧下さい。
bodyタグの直下のpタグに、空のspanタグを置きまして、そこにicomoonフォルダの中のhtmlファイルに記述されている、赤く囲った部分をコピペします。
icomon_03

クラスfs1に疑似要素beforeで装飾していきます。
ロングシャドーのポイントは text-shadow です!
背景色よりちょっと濃いめの色を右斜め下にずらして影が伸びている様に見せています。
枠からはみ出た分は overflow:hidden; で隠します。
また、border:outset でボタン風に、ちょっとだけ凹凸感を出してみました。

このhtmlファイルをブラウザで開いてみるとこんな感じに↓↓↓

Picture 3

皆さんもぜひ、自作アイコン試してみて下さいね〜(^^)/♪

カテゴリー: study, 勉強会 | タグ: , , | 投稿日: | 投稿者:
かおりんご

かおりんご について

マルチメディアスクールWAVE立川校卒業。 タカハシ先生と愉快な仲間達と共に倶楽部りんごを結成、絶賛修行中。 WAVE名物だったライブ授業、りんごでは毎週4時間みっちりやってます! ネットで何でも学べる時代ですが、やはりライブで学ぶことに勝るものはありませんね。 りんご結成時には活動拠点を探して東奔西走。運営、スケジュール管理をやっています。 好きなもの: overflow:hidden、SVG、ライブトレース、流行り物(笑)、ねこ、幕末etc。

CSS3でロングシャドーデザインのアイコンを作る」への4件のフィードバック

  1. ピンバック: icomoon/アイコムーン | パソコン倶楽部りんご

  2. ピンバック: Webフォント×CSS3でロングシャドウアイコンを作ってみよう | スターフィールド株式会社

タカハシ先生 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.