jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種
ベースとなるhtml 今回はテキストタイプなので文字列をリストで並るだけですね。 一部spanを入れた方が動作が安定することがあったので入れてます。javascriptのコードにspanを指定していなかったら外してください。 html <ul id="nav1"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">LINK</a></li> </ul> 1.マウスオーバーでスライドするボタン 単純に横にスライドするアニメーションは「marginLeft」を変化させます。 テキストの色はcssで変えてます。 このナビゲーションに限ってはliにspanを入れると安定して動作するっぽいです。 html <li><a href="
Circle Hover Effects with CSS Transitions | Codrops
A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which
[CSS3] マウスオーバーでリンク画像の透明度とかを変更する
JavaScript版があるのでCSS版も書いておく。 この手法はマウスオーバー画像用意しなくていいから重宝する。 CSS3対応しているブラウザであれば、transitionプロパティでJavaScript版と同じようなフェーディング効果をつけることができる。 っていうサンプルだけじゃあれなので、クリック効果とアウトライン消しをつけてみた。 a { outline:none; } a img{ position:relative; -webkit-transition:opacity 0.5s; /*Safari,Chrome*/ -o-transition :opacity 0.5s; /*Opera*/ -moz-transition :opacity 0.5s; /*Firefox*/ transition :opacity 0.5s; /*CSS3 Real Property*/
![[CSS3] マウスオーバーでリンク画像の透明度とかを変更する](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
imgを画像置換で直接ロールオーバーさせる時のちらつきをなくすCSSの設定方法
以前『二つの画像とCSSやjQueryで表現する３種類のロールオーバー』 というのをエントリーしたのですが、 サンプルで作った「imgを直接ロールオーバー」というのが なんだかちらちら。そして少しぶれて動く。 単にデフォルトでボーダーがついているので、その問題なのですが、 そうじゃないにしろ、FirefoxやOperaで見たときに、 画像やマウスがちらついてみえたりする設定になってしまっていた。 ということで修正してみる！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
