かちびと.net

iPhoneでも動いた（当たり前ですけど）
のでちょっと素敵だなーと思ってメモ。
動きのあるFlashの広告をcss3を使用
して再現したデモがありましたよ。
HTML5のフレームワークを配布して
いるSENCHAのブログで公開されて
いました。

ここまで出来る、という想像はしていました
が、実際に作ってくれた方がいましたよ。
css3とjs、html5というFlash不使用で、
Flashサイトのようなコンテンツを実装して
いるPure CSS3 Spiderman Cartoonの
ご紹介です。

画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。

昨日書いたjQueryのメニューの
Horizontal Slide Out Menuという
横に飛び出るcssメニューですが、
デフォルトではIEで表示が崩れて
います。これをIEでも実装出来る
ようにします。

cssスプライトをjQueryと組み合わせて
使用するAutoSpritesをご紹介します。
軽量化できるので人気のあるcssスプ
ライトにjQueryを加える事でより豊かな
表現が可能になりますね。

なかなか良さそうだったのでメモ。
例によってIE6は上手く実装できて
いませんでしたが、cssハックでも
使えばなんとかなるかな・・見た目
もクールで素敵なのでどこかで
使いたいです。

これ系はいくつかありますので
1つの選択肢として、という感じ
ですね。css3のtransformや
box-shadowをクロスブラウザ
対応させるjsライブラリですが、
特徴はプロパティを1行で統一
させる事が出来る点です。

css3で新たに加えられたドロップ
シャドウを使って一歩進んだシャド
ウを作るTipsです。画像でよく使わ
れている、めくれた際に出来る様な
シャドウをcssのみで実装。

cssスプライトは複数の画像を
1つの画像にして、容量を軽減
する手法ですが、このcssスプ
ライト用の画像を簡単に作成
出来るジェネレーターがありま
したのでご紹介します。

ちょっとしたネタ。ドラえもんやら
Operaアイコンやらをcssオンリー
で作られて、益々css3の可能性
が楽しみですが、今度はFlickrや
Facebook、TwitterやRSSの
アイコン10種をcssのみで作った
猛者が登場しましたよ。

先日公開されたjsdo.it、もう
触ってみました？なかなか
面白いですね、これ。jsと
html、cssを共有、編集出来
ますよ。いい勉強になるので
は無いでしょうか？

cssとHTMLタグのマークアップ
のみで実装出来るテクニック集
です。クロスブラウザ対応のみ
をcss-playから探したので、
ついでにご紹介します。

今更ですが海外記事の紹介
でよく見かけるCSS-TRICKS
が構築しているページの中に
CODE SNIPPETS GALLERY
というページがあるのですが、
これが個人的に激しく便利な
事にようやく気が付きました・・

css3とjQueryを使ったギャラリーの
サンプルです。css3のtransitionを
使ってキャプションをクロスさせなが
ら、切り替えています。transitionは
IEが対応していないので参考という
感じで。

css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。

サイトによっては必要ないかも
知れませんが、メニュー項目が
増えてくるとゴチャ付くので、
ドロップダウンするようにして
隠しておくと見やすくなりますね。

今更ですけど、css3のサンプル
をメモ代わりに記事にしておき
ます。使わないと思っていました
が、仕事以外で使うのでコピペ
用にメモ。

最近存在を知ったのでメモ。
1ヶ月も前の情報ですけど、
今更ながらなかなか良さそう
なプラグインです。cssメニュー
でのマウスオーバーで使う
jQueryプラグイン。

これは結構実用的なテクニック
なのでは。人物のシルエットに
マウスオーバーすると写真が
フェードインします。というか、
人物じゃなくても良さそうなので
色々使い道がありそう。

以前ご紹介した、cssとHTMLのみで
擬似的な3D表示を実現するCSSと
同じサイトで、また素晴らしいテクニック
を公開してくれました。今回のcssは
素晴らしい動きをする折鶴の影を実装
します。

cssの情報まとめです。ローカル
環境にストックしていた情報を
開放してみますのでシェアして
頂ければ幸いです。内容は
結構偏っていると思いますので
参考程度になさってください。

JSや画像を使わず、cssとHTMLオンリー
でマウスオーバー時に噴出し状のツール
チップの実装が可能なナビゲーション
KntL Pagerをご紹介します。これは結構
便利そう。ありがたい事にIE6にも対応、
cssも無料でダウンロードも可能です。