[CSS]永遠にスクロールしていたくなる、気持ちいいエフェクト -CSS Scroll EffectsCSS Scroll Effects [ad#ad-2] スクロールのエフェクトは全部で9種類あり、どれもかっこよく気持ちいいです。 デモはFirefox, Chrome, Safari でご覧ください。
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード： CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング： jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート： あらゆるデータからソートが行えます。 各機能の互換性： レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化： Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ（IEなど）は、JavaScriptでアニメーションを実現します。 Isotopeの実装
CSS3が非対応なブラウザでも利用できるようにするツールのまとめ
Modernizr [ad#ad-2] ツールの概要 JavaScript ドキュメント 利用できるプロパティ @font-face border-image border-radius box-shadow text-shadow opacity Multiple backgrounds CSS Animations CSS Gradients など CSS3 PIE ツールの概要 ビヘイビア スクリプト(htc) デモページ 利用できるプロパティ border-radius box-shadow border-image multiple background images linear-gradient as background image
[JS]省スペースに最適、コンテンツをローテーションで拡大表示するチュートリアル
複数のコンテンツをサムネイルで配置し、ローテーションで打ち出しエリアに拡大表示するフィチャーボックスを実装するチュートリアルを紹介します。 Rotating Feature Boxes デモページ [ad#ad-2] デモでは右側に配置されたサムネイルのコンテンツをクリックすると、打ち出しエリアにアニメーションでスライド移動して、全文が表示されます。 ※アニメーションはCSS3で実装されているためChrome, Safariのみで、非対応ブラウザはアニメーション無しです。 デモページ 2番をクリックして、2番が打ち出しエリアに。 [ad#ad-2] ローテーションするフィチャーボックスの実装 HTML 3つのコンテンツはdiv要素で実装されており、それぞれidとclassを付与し、全部をdiv要素で内包します。 <div id="rotator"> <div id="block-1" cl
株式会社フルスケール｜熊本のWebサイト・ホームページ制作会社
「なぜWebサイトが必要なのか？」「なぜそのデザインなのか？」「本当の課題は何なのか？」 フルスケールは「そもそも」を問い、最適な解となる広義の「デザイン」を提供することで、 ビジネス課題を解決へ導きます。
コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル:phpspot開発日誌
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル。 ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。 ソースのDLが可能なのでカスタマイズして使うことが出来ます。 画像なんかも入ってリッチなドロップダウン。 ５カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。 ４カラム。シンプルだけどカテゴライズされていて押しやすい。 ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。 関連エントリ ドロップダウン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.is-real.net/experiments/css3/wonder-webkit/