こんにちは。
連日の暑さにとろけそう。井畑です。
今回は、前からやってみたかった事に挑戦してみました。
今はやりのWebフォントとCSS3を使って、
3Dボタンを作る事です。
以前から、機会があったらやってみようと思っていたのですが、
なかなか機会にめぐりあえず、どうせなら備忘録ついでに
ブログに書いちゃえと思った次第です。
それでははりきってどうぞ！
目次
1.Webフォントを「fontello」からダウンロード
Webフォントを使うにあたり、最近とてもステキなサイトを見かけました。
このサイトでは、自分の使いたいアイコンだけを選んでセットにし、
それをWEBフォントとしてダウンロードできるという優れものです。
使いたいものだけってのがポイントですね。
これなら余計に容量が増えなくてすみます。
今回は、このFontelloから使いたいフォント(アイコン)をダウンロードして、
アイコンに使いたいと思います。
1-1.fonelloからフォントをダウンロードする
使いたいフォントをクリックして選びます。
選んだフォントは周りの枠線が
今回は４つ選んでみました。(ピューと吹く!ジャガーのハミィみたいのがいた!!)
選択が終わったら、上部タブから「Edit codes」をクリックします。
ここでは、アイコン画像の上のバーをクリックして、
アイコンに割り当てる文字を決めることができます。
僕は右から順に「a」「s」「d」「f」としました。
(ハミィかわいいよ。ハスハス)
ページ右上の「Download webfont」を押してフォントをダウンロードします。
1-2.解凍して中身を確認する
「fontello-○○.zip」というファイルをダウンロードできます。
解凍して中身を確認してください。
解凍すると、ファイルは以下のような構成になっています。
今回はこの中のfontフォルダ(fontello.eot,icons.svg,icons.ttf,icons.woff)を使ってアイコンを作っていきます。
2.CSS3でボタンを作成
続いて、CSS3を使ってボタンを作成していきます。
ファイルの構成は以下のようにしました。
【html】
index.html
┗style.css
[fontフォルダ]←ダウンロードしたファイル
┣icons.eot
┣icons.svg
┣icons.ttf
┗icons.woff
2-1.HTMLの設定
HTML側は普通のリストです。
index.html
2 | <li><a href="#" class="icon-home"></a></li> |
3 | <li><a href="#" class="icon-cog"></a></li> |
4 | <li><a href="#" class="icon-cw"></a></li> |
5 | <li><a href="#" class="icon-location"></a></li> |
2-2.CSSの設定(WEBフォント)
CSSの設定を一気に書くと長くて分かりづらいので、少しずつご紹介します。
まずは、WEBフォント設定のCSSです。
style.css
2 | font-family: 'fontello'; |
3 | src: url("../font/fontello.eot"); |
4 | src: url("../font/fontello.eot?#iefix") format('embedded-opentype'), |
5 | url("../font/fontello.woff") format('woff'), |
6 | url("../font/fontello.ttf") format('truetype'), |
7 | url("../font/fontello.svg#fontello") format('svg'); |
12 | .icon-flower:after { content: ’a’ ; } |
13 | .icon-hami:after { content: ’s’ ; } |
14 | .icon-hav:after { content: ’d’ ; } |
15 | .icon-ref:after { content: ’f’ ; } |
ポイントは最後の４行の:after疑似要素とcontentです。
これを使うことで、index.htmlに余計な文字が入るのを防ぎます。
いきなりボタンのリストに意味不明の文字「a」とか入っていたら変ですからね。
もちろん、SEOにも良くないのでこのような感じにしました。
2-3.CSSの設定(ボタンの装飾)
ボタンの見た目のCSSです。
style.css
13 | font-family: 'fontello'; |
16 | background-color: #f3f3f3; |
17 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#e7e7e7)); |
18 | background-image: -webkit-linear-gradient(top, #f3f3f3, #e3e3e3); |
19 | background-image: -moz-linear-gradient(top, #f3f3f3, #e3e3e3); |
20 | background-image: -ms-linear-gradient(top, #f3f3f3, #e3e3e3); |
21 | background-image: -o-linear-gradient(top, #f3f3f3, #e3e3e3); |
28 | text-decoration: none; |
31 | box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff; |
37 | border-top: 2px solid #ddd; |
45 | box-shadow: inset 0px 8px 40px #dedede; |
2-4.CSSの設定(ボタンのホバー時装飾)
ボタンにカーソルがのった時のアクションCSSです。
今回は
･文字がピンクにぼやけるver･ボタンがくるんとまわるverの2パターン作ってみました。
style.css(文字がピンクにぼやけるver)
2 | text-shadow: #F4ACC6 0px 0px 20px; |
7 | -webkit-transition: .8s; |
style.css(ボタンがくるんとまわるver)
4 | transform: rotate(360deg); |
5 | -o-transform: rotate(360deg); |
6 | -moz-transform: rotate(360deg); |
7 | -webkit-transform: rotate(360deg); |
どっちも面白い効果ができて満足です;D
完成!!
以上で完成です!!
CSS3対応のブラウザで見ると以下のようになります。
デモページを作ってみました。
CSS3対応ブラウザでご覧下さい。
デモページ
とっても参考になりました!
最後に
まだまだ使いどころが難しいCSS3ですが、
スマートフォンサイトなど場所を選べば思う存分効果を発揮します。
画像を使わずにこのクオリティで作れるならとっても素敵ですね!!
未来が楽しみです。
やりたかったことができて、大満足;D
以上、井畑でした!!
「メモメモ」と思ったことはSNSでシェアしよう!!
0
184
[…] 画像なんていらない!! fontelloとCSS3を使って3Dボタンを作ってみた […]
[…] 画像なんていらない!! fontelloとCSS3を使って3Dボタンを作ってみた […]
[…] 画像なんていらない!! fontelloとCSS3を使って3Dボタンを作ってみた […]
影までまわっちゃおかしいような・・・