[B! effect] soratomoのブックマーク

コピペで使うマウスオーバー時のhover cssエフェクト28選 | SONICMOOV LAB

これまでにもCSSに関する様々なエフェクトを紹介しましたが、今回はマウスオーバー時のアニメーションに関する良さげなものをピックアップしてみました。関連使える！CSSアニメーション 20選様々なボタン用ホバーエフェクトHover.css 2D、ボーダー、影、吹き出し、めくり等、ボタンに使えそうな様々なホバーエフェクトがまとめられています。スライドするButton Hover Effects これもボタンに関する様々なホバーエフェクトです。グラデーションなAnimated Gradient Buttons グラデーションを使ったホバーアニメーションです。様々な画像用ホバーアニメーションCSS Image Hover Effects ズーム、ズームアウト、スライド、回転、ぼかし、グレースケール、セピア、透明度、フラッシュ、シャイン、サークル等、画像をマウスオーバーした時のエフェクトが

soratomo 2021/09/09

リンク

Uniqlo Stripe Hovers | CSS-Tricks

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. For the larger promotional boxes in the design of Uniqlo.com, they use animated stripes that reveal on hover. It’s kind of awesome, if you ask me. Perhaps because they wanted to share the awesome with as many different browsers as possible, they used an animated GIF to produ

soratomo 2013/02/28

CSS3でhover時に斜めのストライプ背景をkeyframesでanimation。

リンク

[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ

HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111

soratomo 2012/11/10

css
effect

リンク

最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」:phpspot開発日誌

最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」 2010年12月06日- jQuery Apple Effect 最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」。最近Appleのサイトを見たことがある方なら分かると思いますが、最初に1枚の画像を表示しておいて、ナビゲーションなんかは少し待たせて、フェードインしながら表示するというカッコいい効果を作れます。最初に1枚の画像を表示フェードインしながらナビゲーションを表示するこちらのデモで動きを確認実装は1行。 $('#target').appleEffect(); オプションを渡すことでアニメーション開始までの時間を設定したり、コールバック関数を指定できたりします。ちょっとめんどくさそうなこの機

soratomo 2010/12/06

ターゲットを指定して、その他の部分をフェードイン！を簡単に実装

リンク

Dan Wellman » Plugin Update: hoverfade-1.0.2

I recently updated my hoverFade jQuery plugin after using the plugin in a couple of projects and work and needing extra functionality. I’ve been waiting for the jQuery plugin site to come back up again (which it now has) after being locked down following major spam attacks. I also wanted to wait until I had chance to put some proper examples together following comments in the original plugin relea

soratomo 2010/06/12

ロールオーバーにフェードイン効果 1.4kbと軽量

リンク

100+ Photography Enhancing Photoshop Actions - Web Design Ledger

2 Pings & Trackbacks Pingback: 30 Breathtaking Examples of Bokeh Photography | Inspiration Pingback: 15 Fresh and Useful Photoshop Tutorials | Tutorials 19 Comments Thanks for this time saving collection ! Very informative! Now only if cellphone cameras can do the same thing… What a great idea! You are the real time saver. Appreciate your efforts in putting this together. Great examples! I was loo

soratomo 2010/04/13

リンク

jqFancyTransitions: jQuery Image Rotator Plugin

jqFancyTransitions slideshow with strip effects jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects. jqFancyTransitions is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+. Documentation, Download and Discussion