手軽にマウスがのった時のボタンやリンクの動作（ホバーエフェクト）を設定する方法をご紹介いたします。
しばらくAndroidアプリ開発からは離れHTMLやCSSを利用したWEB開発の方法を紹介していますが、
これも後々アプリ開発に繋がると思っていますので今は情報をまとめておきたいと思います(^^;
Hover.cssの導入手順
導入手順は以下のとおりです。
ブログなどに導入する場合は＜HEAD＞タグが編集できる必要があります。
①Hover.cssをダウンロードします。
②ダウンロードは以下のページにアクセスして「Download ZIP」から行います。
③「Hover-master.zip」というファイルがダウンロードされますので、
中の「css」フォルダにある「Hover.css」ファイルをコピーしておきます。
④「Hover.css」をWEB上に公開し、以下のようにHEADタグ内に記載します。
<head> <link href="css/hover-min.css" rel="stylesheet"> </head>
Demo
主な動作としては、開発者の方がDemo用のページを用意していますので、まずはそちらをご覧ください。
http://ianlunn.github.io/Hover/
Demoではボタンのみの動作を紹介していましたが、これはリンクでも画像でも利用可能です。
Pulse
ボタン以外にも「Hover.css」を有効活用できる効果的な利用方法を紹介していきたいと思います。
テキスト編
ほたるの光 まどの雪
書（ふみ）よむつき日 かさねつつ
いつしか年も すぎのとを
あけてぞけさは わかれゆく
ほたるの光 まどの雪 書（ふみ）よむつき日 かさねつつ いつしか年も すぎのとを あけてぞけさは わかれゆく
画像編
随時更新予定…
0 件のコメント:
コメントを投稿