css3のみ・画像無しでローディング

サンプルデモ, 子ネタ

概要

よく画像でグルグル回って、ローディングを表現するのがあると思うのですが、それをcss3のみで作成してみました。
loading
↑こんな感じのやつのことですね。

css3のアニメーションを使用しているのでChrome3やSafari4などで見てみてください。
iPhoneでも動くと思います。多分…
※確認したら動きました。

詳細は続きから。

続きを読む

IE6を葬るCSS5つ

子ネタ

背景

「Internet Explorer(IE)6は2010年3月1日に亡くなった」という設定で葬式を挙げようという企画が米国で盛り上がっている。

IE6よ、安らかに眠れ――“葬式”を米企業が企画 – ITmedia Newsより

なにやら3月1日からGoogleさんがIE6のサポートを取りやめるので、米国でIE6の葬式をしちゃおうって話らしいです。
なので便乗してIE6を葬る(?)CSSTipsを5つほど紹介します。
5つというのは特に意味は無く、キリがよいため無理やり5つ用意しました。

※ネタですのでネタ嫌いな方はスルーしてください。

続きは詳細から。
続きを読む

css3のみ(JS無し)で実装する動的なタブ

備忘録, 子ネタ, 戯言

早速ですが作ったものの動画


というわけでこんな感じの物を作ってみました。
実際のサンプルはこちら

概要と対応ブラウザ

概要みたいなもの

タブにカーソルを合わせると少し光り、クリックすると中身がフェードインして切り替わります。
このサンプルで表現されているアニメーションやグラデーション、影や角丸などはすべてCSS3です。
JavascriptOFFでも同じ挙動になりますよ。

動作環境

Chrome4とSafari4での動作確認はしてあります。
Firefox3.5以上でもそれなりに動きますがアニメーションは動きません。
Firefox3.6↑だとグラデーションも有効になるように記述してあります。

詳細と実物は続きから。

続きを読む

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー
  • 読み込みエラーです。しばらく経ってから確認してみてください。

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。