[CSS]ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシート
画像をホバーすると、ガラスに光があたったようなエフェクトをアニメーションで適用するスタイルシートを紹介します。 デモページ [ad#ad-2] 実装 HTML 画像のimg要素とエフェクト用のdiv要素をdiv要素で内包します。 <div class="image_shine"> <img src="http://www.wordpressthemeshock.com/banners/banner_10_themeshock.jpg" /> <div class="hover_shine"></div> </div> CSS まずは、ラッパーのdiv要素のスタイルです。 エフェクト用のdiv要素用の「position: relative;」がポイントです。 .image_shine{ width: 200px; height: 200px; margin: 30px auto; posit
[JS]使い方はいろいろ、アニメーションで追随するドロップシャドウを生成するスクリプト -OKShadow
div要素で配置したボックス HTML jQueryのセレクタで指定できるようにidを付与したdiv要素です。 <div id="example1"></div> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js'></script> <script src='okshadow.js'></script> JavaScript OKShadowのデフォルトの記述例です。 $(function(){ $('#example1').okshadow(); }); スクリプトのオプション オプションではドロップシャドウのカラー、位置などを設定できます。 オプションを使用して二つ目のデモは、下記のようになります。 $(
Spotlight v1.1 Example
Spotlight example Goto Project page now Downloads page Documentation page
ShineTime – A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects | AddyOsmani.com | Where Web Businesses Grow
This week I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve. I always think it’s useful to see a demo of what we’
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
