Flash製の広告をcss3で再現したデモが凄い
iPhoneでも動いた（当たり前ですけど） のでちょっと素敵だなーと思ってメモ。 動きのあるFlashの広告をcss3を使用 して再現したデモがありましたよ。 HTML5のフレームワークを配布して いるSENCHAのブログで公開さ...
css
Flashに限りなく近いコンテンツをcss3+jsで創り上げたPure CSS3 Spiderman Cartoon
ここまで出来る、という想像はしていました が、実際に作ってくれた方がいましたよ。 css3とjs、html5というFlash不使用で、 Flashサイトのようなコンテンツを実装して いるPure CSS3 Spiderman Cartoonの ご紹介です。
画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images )
画像にエフェクトをかけて拡大表示 したり、スライドを作ったり、ツール チップで表示したり、というような 画像を使用したjQuery全般が沢山 あるのと、探してる方が直ぐに見つ けられるようにリンク集を作りました。
横に飛び出るjQueryメニュー・Horizontal Slide Out MenuをIE対応にする
IE fix
昨日書いたjQueryのメニューの Horizontal Slide Out Menuという 横に飛び出るcssメニューですが、 デフォルトではIEで表示が崩れて います。これをIEでも実装出来る ようにします。cssスプライトとjQueryを組み合わせたナビゲーションメニュー・AutoSprites
AutoSprites
cssスプライトをjQueryと組み合わせて 使用するAutoSpritesをご紹介します。 軽量化できるので人気のあるcssスプ ライトにjQueryを加える事でより豊かな 表現が可能になりますね。jQuery+cssのパネルが滑らかにスライドする、クールなドロップダウンメニュー
スライドパネルメニュー
なかなか良さそうだったのでメモ。 例によってIE6は上手く実装できて いませんでしたが、cssハックでも 使えばなんとかなるかな・・見た目 もクールで素敵なのでどこかで 使いたいです。CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper
cssSandpaper
これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3をIEにも対応させ るjsライブラリですが、特徴は プロパティが1行で済む点です。css3で実装するドロップシャドウの応用・めくれた感じを作り出す
css3を応用
css3で新たに加えられたドロップ シャドウを使って一歩進んだシャド ウを作るTipsです。画像でよく使わ れている、めくれた際に出来る様な シャドウをcssのみで実装。手軽にcssスプライトを作れるシンプルなWebサービス・css sprites generator
css sprites generator
cssスプライトは複数の画像を 1つの画像にして、容量を軽減 する手法ですが、このcssスプ ライト用の画像を簡単に作成 出来るジェネレーターがありま したのでご紹介します。画像もjsも使わず、css+htmlだけでソーシャルメディアアイコン
Pure CSS
ちょっとしたネタ。ドラえもんやら Operaアイコンやらをcssオンリー で作られて、益々css3の可能性 が楽しみですが、今度はFlickrや Facebook、TwitterやRSSの アイコン10種をcssのみで作った 猛者が登場しましたよ。jsやcssのコードを共有できるjsdo.itがなかなか面白いな・・
jsdo.it
先日公開されたjsdo.it、もう 触ってみました？なかなか 面白いですね、これ。jsと html、cssを共有、編集出来 ますよ。いい勉強になるので は無いでしょうか？CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
css × クロスブラウザ
cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。今更CSS-TRICKSのCODE SNIPPETS GALLERYのWeb制作Tips集が便利なことに気が付いた
便利なTips集
今更ですが海外記事の紹介 でよく見かけるCSS-TRICKS が構築しているページの中に CODE SNIPPETS GALLERY というページがあるのですが、 これが個人的に激しく便利な 事にようやく気が付きました・・キャプションがクロスしながら切り替わるcss3+jQueryのスライドギャラリーのサンプル
transition slide
css3とjQueryを使ったギャラリーの サンプルです。css3のtransitionを 使ってキャプションをクロスさせなが ら、切り替えています。transitionは IEが対応していないので参考という 感じで。css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた
css3 transition
css3のアニメーションプロパティ、 transitionがとても面白いので何と なくアニメーションのサンプルを 色々と作ってみました。まだ対応 ブラウザは少ないですが、将来の 為に予習してみたのでシェア。ドロップダウンするcssメニューいろいろ
drop down menu
サイトによっては必要ないかも 知れませんが、メニュー項目が 増えてくるとゴチャ付くので、 ドロップダウンするようにして 隠しておくと見やすくなりますね。css3のtransformの実装サンプル
transform
今更ですけど、css3のサンプル をメモ代わりに記事にしておき ます。使わないと思っていました が、仕事以外で使うのでコピペ 用にメモ。[cssメニュー]マウスオーバーで滑らかに別要素をドロップダウンさせるjQuery・Fluid Navigation
Fluid Navigation
最近存在を知ったのでメモ。 1ヶ月も前の情報ですけど、 今更ながらなかなか良さそう なプラグインです。人物のシルエットにマウスオーバーすると写真がフェードインするjQueryプラグイン
Silhouette Fadeins
これは結構実用的なテクニック なのでは。人物のシルエットに マウスオーバーすると写真が フェードインします。ピュアCSSで実装する折り鶴の影の動きが凄い
以前ご紹介した、cssとHTMLのみで 擬似的な3D表示を実現するCSSと 同じサイトで、また素晴らしいテクニック を公開してくれました。今回のcssは 素晴らしい動きをする折鶴の影を実装 します。
cssの情報・まとめ
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。
IE6対応・cssのみでマウスオーバー時に噴出しも実装するナビゲーションKntL-Pager
JSや画像を使わず、cssとHTMLオンリー でマウスオーバー時に噴出し状のツール チップの実装が可能なナビゲーション KntL Pagerをご紹介します。これは結構 便利そう。ありがたい事にIE6にも対応、 cssも無料でダウン...