CSS3を使ってtwitterのフォローボタンのようなものをつくるチュートリアル | webox blog
フォローボタンっぽいデザインのボタンをCSS3を使ってつくるチュートリアルです。 角丸とかグラデーションといったもののサンプルは多数ありますが、せっかくなのでロールオーバー時にテキストも変えてみましょう。 対応ブラウザ Firefox4+ / Chrome10+ / Safari5.1+ / Opera11+ 非対応のブラウザでは一部のスタイルが適用されません。ベンダープレフィックスをつけることで対応できるものもあります。 動作サンプル デモはこちら ソース <p><a class="follow">フォローする</a></p> <p><a class="unfollow"><span class="def_text">フォロー中</span><span class="hover_text">解除する</span></a></p> ロールオーバーでボタン内のテキストを変更する場合は、デ
ソースがシンプルなJSによるロールオーバー｜CSS HappyLife
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です） さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
