3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」:phpspot開発日誌
Meny - CSS 3D fold-in menu concept 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」。 ページのサイドに矢印があって、クリックするとコンテンツがグリっと3Dで回転して超カッコいいメニューの実装例です。 SafariやiPhone等で確認することが出来ます メニューを開いた例。 ページの右側を切り替えても動くように出来ます。 これは、まだまだ進化しますね 関連エントリ シンプルだけどデザインがよいドロップダウンメニュー実装チュートリアル デザインも動きもオシャレなjQuery＆CSS3メニューデモ スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」 メニューを固定したWEBデザインのサンプル２１
CSS3 Animation With jQuery Fallbacks
In today's post, we'll be taking a look at how you can use CSS3 transitions to power your application's animations with jQuery's .animate() method as a fallback where transitions aren't supported. The benefit of transitions is that unlike JavaScript based animations, they're hardware accelerated in certain browsers and mobile devices, resulting in a potentially smoother overall animation than you
20 JQuery and CSS3 Tutorials | Underworld Magazine
jQuery is being used every day to turn ordinary websites into eye-catchers that will keep you wanting more. You can get some awesome effects when you put jQuery and CSS3 together like buttons, navigation bars, and a lot more. Developers know a lot about jQuery, but with all the free tutorials out there, it’s easy to learn. In this post, you will see 20 jQuery and CSS3 Tutorials that can help you
jQueryとCSS3で構築された超絶クールな画像ギャラリーサンプル:phpspot開発日誌
Beautiful Photo Stack Gallery with jQuery and CSS3 | Codrops jQueryとCSS3で構築された超絶クールな画像ギャラリーサンプルが公開されています。 プログラムのまるごとダウンロードも可能。 これを使って、ちょっとカッコいいギャラリーを作ってよ、みたいな案件にすぐ対応出来るかもしれません。 一覧画面は次のような感じでCSS3の機能をフルに使ってクールにデザインされています。 画像をクリックすると、写真がLightBox風にオーバーレイして開きます。 何枚にも重なってますが、クリックするとシャッフルできます。 アニメーションなんかもいい感じで動いてくれます。 関連エントリ 画像ギャラリーを作る際に使えるFlashやJavaScriptを活用したライブラリ＆サンプル集 超クール画像ギャラリーが作れるJavaScriptライブラリ 画
jQueryを使った、動きのあるナビゲーションメニューチュートリアル集 – creamu
スムーズな動きのナビゲーションメニューを作りたい。 そんなときにおすすめなのが、『Excellent jQuery Navigation Menu Tutorials』。jQueryを使った、動きのあるナビゲーションメニューチュートリアル集です。 いい感じのものが揃っていますね。 How to Make a Smooth Animated Menu with jQuery マウスオーバーすると、すとんとメニューの説明を表示 Animated Drop Down Menu with jQuery クリックすると、すっとドロップダウン型で表示されるメニュー How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery HTML5,CSS3でのドロップダウンメニューの作り方 How to Build a Lava-Lamp Styl
iFingerScrollをtranslate3dで再実装しました - collisions.doppac.cc
■iFingerScrollを公開したあと、GmailのiPadビューのペインスクロールが自分のに比べて相当サクサクなのに気付き、どうやってんだろと思ってPCからiPadのUAを送ってソースをちょっと見てみたところ、” -webkit-transform: translate3d “をつかってdivをスクロールさせてるらしいことがわかりました。 ということでiFingerScrollもCSS Transitionでabsoluteの座標を動かすのではなく、translate3dの指定をjavaScript側の制御で動かすように再実装したところ、いい感じになりました。translate系の指定はもともとtransitionやanimation目的でGPUサポートありで実装されてるので、CSS Transition/Animationとして使わなくても速いのかもしれません（憶測）。レガシーCS
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル:phpspot開発日誌
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル 2010年05月27日- Why and how to create Microsoft Office Minibar with jQuery and CSS3 jQueryとCSS3で文字修飾に便利なMS Office 2007のMinibar風ウィジェットを実装するサンプル テキストを選択すると、ツールバーがうっすらと現れ、ツールバー内のボタンを押すと、文字が修飾されるようタグを付与してくれるようなMinibar実装サンプルです。 デモページではその場でプレビューされる機能もあります。 デモでは、b, i, uタグの他、リンクタグしかありませんが、他にも追加することで、テキスト入力をより便利にすることが出来そうですね。 関連エントリ フォームのユーザビリティに貢献するjQuery
jQueryとCSS3で作るカラフルなスライダーウィジェット:phpspot開発日誌
Colorful Sliders With jQuery & CSS3 ? Tutorialzine jQueryとCSS3で作るカラフルなスライダーウィジェットの作成チュートリアルとデモプログラムのダウンロードが出来ます。 次のようにデザインも洗練されていて、スライダーを調節することで３Dグラフが伸び縮みする面白いサンプルになっています。 HTMLやCSSも綺麗で、グラフが伸縮する部分のテクニックなんかも参考にできそうです。 関連エントリ クールなデジタル時計ウィジェットを設置できるjQueryプラグイン「jDigiClock」 JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ TwitterのFriendsやFollowersをページにアイコン付きで表示するWidget実装jQueryプラグイン
12 High-Quality Free CSS Button Libraries & Frameworks – Speckyboy
bttn.css Library bttn.css is a collection of lightly-styled buttons that feature different shapes, sizes, and colors. All styles can be called with simple class names. With the minified CSS file coming in at just 4kb, this library is also quite lightweight. CSS Buttons Collection The title may be simple, but Buttons is a library with over 20 collections of styles to choose from. Standouts include
Stronger, Better, Faster Design with CSS3 — Smashing Magazine
In our last article about CSS3, “Pushing Your Buttons With Practical CSS3, we talked about using new CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and (in some cases) hilarious buttons. In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery＆CSS3でここまで出来るタイポグラフィエフェクトのサンプル集:phpspot開発日誌
IDEA * IDEA
