キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

アイコン型ウェブフォントで表示した SNS アイコンに CSS3 でアニメーションをつける

      2015/02/26

暖房の暖かさに幸せを感じてるキャリコ( @calicocatxyz )です。

部屋の中にいるのに手がかじかんでキーボードが上手く打てず、お湯で暖を取ったりなんかしてますからね ^^; もうすでに夏が恋しくなってます… さて、本日はアイコン型ウェブフォントのさまざまな装飾についてです。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

これまでに紹介してきたアイコン型ウェブフォントを CSS3 のエフェクトを使って装飾していくにゃ。

Ads by Google

CSS3 を使ったさまざまな装飾

Font Awesome のアイコンを使う

最近のエントリーでも紹介した Font Awesome のアイコンを使ってさまざまな装飾をしていくにゃ。

今回はよく使いそうなアイコンとして下記の5つを選んだにゃ。


Facebook


Google+


Twitter


RSS


Mail

これらを横並びのリスト表示にしてアイコン型ウェブフォントを装飾するにゃ。
※基本的にブラウザは最新版を使用してると仮定して display:table を使用、見やすいようにアイコン同士を 20px 離して、さらに fa-3x を使用したにゃ。

横に並べる

ブログでの表示

html

css

リンクにする

ブログでの表示

html

アイコンごとに色をつける

ブログでの表示

html

css

※ここからは下記の html を基本として css で装飾していくにゃ。

基本 html

ドロップシャドウをつける

ブログでの表示

css

マウスオーバーで色を変える

ブログでの表示

css

マウスオーバーでふんわり色を変える

ブログでの表示

css

マウスオーバーで拡大させる

ブログでの表示

css

マウスオーバーで傾ける

ブログでの表示

css

マウスオーバーで一回転させる

ブログでの表示

css

マウスオーバーでめくる

ブログでの表示

css

まとめ

タッチパネルのデバイスが増えた昨今、マウスオーバーの指定に意味があるのか謎だけど、PC 閲覧派としては細かい部分にまでこだわりたいにゃ。特にメリットはないけど良いアクセントにはなると思うにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - ウェブデザイン ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

キャリコがブログカスタマイズするときに気をつけてる5つのこと

寒さを凌ぐために唐辛子を食べてるキャリコ( @calicocatxyz )です。 …

アイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンを設置する方法

SNS でのフォロワーさんが増えてきて喜んでるキャリコ( @calicocatx …

Photo credit : http://usb.brando.com/
アナタは大丈夫?デザインが崩れてるブログほどダサいものはないと思う

どうも、ネットサーフィンが大好きなキャリコ( @calicocatxyz )です …

見せます!キャリコの STINGER5 カスタマイズ履歴のすべて

こんにちは、キャリコ( @calicocatxyz )です。 敬遠してた Wor …

パソコンの場合
ブログの右下にあるページ上部に戻るボタンは要らないんじゃないかって話

最近は押していない、キャリコ( @calicocatxyz )です。 記事を見終 …