画像なんていらない!! fontelloとCSS3を使って3Dボタンを作ってみた
こんにちは。 連日の暑さにとろけそう。井畑です。 今回は、前からやってみたかった事に挑戦してみました。 今はやりのWebフォントとCSS3を使って、 3Dボタンを作る事です。 以前から、機会があったらやってみようと思っていたのですが、 なかなか機会にめぐりあえず、どうせなら備忘録ついでに ブログに書いちゃえと思った次第です。 それでははりきってどうぞ！ 目次 1.Webフォントを「fontello」からダウンロード 1-1.Webフォントを「fontello」からダウンロード 1-2.解凍して中身を確認する 2.CSS3でボタンを作成 2-1.HTMLの設定 2-2.CSSの設定(WEBフォント) 2-3.CSSの設定(ボタンの装飾) 2-4.CSSの設定(ボタンのホバー時装飾) 1.Webフォントを「fontello」からダウンロード Webフォントを使うにあたり、最近とてもステキなサイ
意外と知らない？アイコンはWebフォントでつくるとこんなに便利！
Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C
画像アイコンはもう古い！CSSでスタイル自由自在のアイコンWebフォント
Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
