画像無しでリッチな表現(3/4) – css3を触ってみて思った4個の利点

備忘録, 感想

css3を触ってみて思った利点の3個目

この記事は、前回の記事(セレクタについて(2/4)その2 – css3を触ってみて思った4個の利点)の続きです。

  1. レイアウト組むのが楽ちん
  2. セレクタが便利
  3. 画像に頼らず色々出来る
  4. アニメーションが素敵

今回はCSS3を用いて、画像を使わないでリッチな表現にしてみます。
ちなみにこのページ自体も、デザインに大しては画像を使っていません。
アイコンはさすがに画像ですが…
※表示確認は、Firefox3.6、Chrome4、Safari4、Opera10で行っています。
このエントリーでは画像を使わないリッチな表現を表現する方法を紹介していきます。

詳細は続きから。

続きを読む

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

備忘録, 子ネタ, 戯言

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


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

概要と対応ブラウザ

概要みたいなもの

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

動作環境

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

詳細と実物は続きから。

続きを読む

ChromeExtensionが結構いい感じに

備忘録

いつのまにやら

chEx_cap1
GoogleChromeのExtensionが結構いい感じになってきていました。
どうやってインストールしたり作ったりするのか知らなかったので色々調べてみたら、もう結構出揃っている感じがしていました。
順調に仕様が整っていったら、Firefoxから乗り換える日が来てしまいそうです。。。

必要な環境

Chrome3だと導入する手順が大変みたいだったので、Chrome4のインストールがお手軽なのですが、現在まだベータなので使用する場合は、最終的には自己責任でお願いいたします。
実際に触ってみて良かったExtensionやインストールの仕方をちょこっと説明してみます。

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

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に出演しました。