CSS3で作るあんなものやこんなものまとめ
2011年08月25日 公開

さまざまな可能性を秘めたCSS3の登場から、いろんなエントリーが出てきましたので、一部をまとめてご紹介。
ちなみにこの画像はこちらのもので、CSS3だけで画像を使わずにキュウべえを書いたそうです。
CSS3でどんなことができちゃうの系

CSS3のみでいろいろなオブジェクトの作り方を掲載されている。

CSSについて知っておきたいことまとめ。
仕事で役立つ事もばっちり羅網。このまとめっぷりはすごいです。

CSS3の完全一夜漬けマニュアル。

とりあえずこの記事のところにサンプルがありますので触ってみてください。
すごく気持ちいい体験が待っていることでしょう。

CSS3のアニメーション効果を利用してちょっとダイナミックな404ページを表現しています。
すっごいかっちょいい。サンプルデモはこちら。

CSS3だけで3Dを表現。とりあえずこれがCSS3だというものを見せてくれる。ぱない。chromeでも見れましたが、safariで見てほしいらしい。iPhone、iPadとかのsafari。

CSS3で表現されたダイナミックな宇宙。

スタイリッシュなCSS3でつくられたギャラリー。jQuery関係なかったです。
サンプルデモはこちら。ダウンロードも可能です。

CSSでつくるクリエイティブなペーパーデザイン。

HTML5とCSS3でつくられたフォームデザインのまとめ。

わずか1kバイトのCSSだけで表現するwebデザインの祭典。画像も使ってはいけないという徹底っぷり。
左側からいろいろな人の作品がみれますので、参考にしてみるといいかもです。なかなか憎い演出のデザインもあり、見所満載ですよ。
jQueryとコラボ系

CSSとjQueryで実装するイメージギャラリー。まぁ・・・画像枠が荒いのでCSSにこだわる必要はないのかもしれませんが・・・。
サンプルデモはこちら

エラーメッセージなどを効果的に見せてくれるCSSとjQueryのコラボ。にょきっと上からでてきます。
サンプルデモはこちらからどうぞ。

jQueryで円形の広がるアクションの実装。ぽわーんと広がる丸い玉みたいな。
このページにはそのほか様々な参考になる点が多く、たとえば右側に配置されたものは、現在のページのどのあたりを見ているかを知らせるものであったり、一番下まで行くと、アバウトボタンが、左上でぽわーんって知らせてくれたりと、ものすごいクリエイティブな仕上がりを感じました。
要素をjQueryとCSS3で3Dにしてしまおうというもの。使えるかどうかは別の話ですけど・・・。
3Dify Plugin – Rendi qualsiasi elemento della tua pagina web 3D

jQueryとCSSで作るメニューまとめ。作り方もてんこもり。
以上こんな感じで新しい発見はありましたか?
リファレンス系がお望みの方はこちらなど。
HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識~活用まで - YATのBlog
より面白くなるCSSワールドを堪能してみてくださいね。
それでは、また。