kzms2 – html,css,javascript

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

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

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

前回は途中で挫けたので、その続きのエントリーとなります。
今回は「:focus」の様に「:」を用いるセレクタである疑似クラスについての説明がメインです。
かなりの量が追加されているので、逆にややこしいかもしれません。
※表示確認には、Firefox3.5、Chrome4を使用しています。

詳細は続きから。ちなみに3ページあります。
続きを読む

ちょこっとした小ネタですが…

モダンブラウザの場合の表示

CSS3をサポートしているブラウザだと上の様に見えます。

古いブラウザの場合

古いブラウザになればなるほどしょぼい表示になります。
うーん、しょぼいですね。とりあえず詳細は続きに。

続きを読む

いつのまにやら

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

必要な環境

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

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

表題だけだとよくわからないかもですが

こんな感じにページ内の要素がグリングリン回り始めます。

詳細は続きから

続きを読む

普通のFollow Meじゃつまらないので

息抜きでcss3を使ってアニメーションするFollowMe作りました。
サンプル…といいたいところですが、このページの右側にあります。
マウスオーバーしてみれば動きがわかるかと思います。

対応ブラウザ

一応色々なブラウザで動きますが以下の順番でいい感じの動きになります。

1. Chrome４→縦表示、回転、ズーム、アルファが効きます
2. Safari4→縦表示、回転、ズーム、アルファが効きます（ちょっとぼやける）
3. Firefox3.5→縦表示、回転、ズーム、アルファが効きます
4. その他→かろうじて表示されます

html5で書いていたのですが、どこぞのブラウザさんで表示出来ないので泣く泣くhtml4に切り替えました。
どのブラウザとは言いません。9でもダメなIEあの子です。

それでもこのFollow Meを使ってみたい場合は続きから。

続きを読む