kzms2 – html,css,javascript

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

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

概要と対応ブラウザ

概要みたいなもの

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

動作環境

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

詳細と実物は続きから。

続きを読む

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

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

対応ブラウザ

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

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

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

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

続きを読む

下のようなボタン画像を

hover時（マウスカーソルが合った時）に画像をこれ以上用意せずに変化させるTipsです。
上のボタンにカーソルを合わせたら色が少し薄くなると思います。

対応ブラウザなど

CSS３は使用していません。対応ブラウザはIE5.5-IE8,Firefox3,Safari3,opera9などです。

ソースは続きに記載しておきます。

続きを読む

こういう状態に

※HTMLのサンプルを見る
なったことはありませんか？
半角が「/」や「-」などがない状態で連続して続くと改行しないで、そのまま横に表示されてしまう現象です。

英語とかだと区切りがなかったら1単語なので、改行しないという理由はわかりますね。
でもURLとかだと結構頻繁にあったりして困ったりします。

というか今日困っていた会社の同僚が居たので自分用にもまとめて置いてみようと思います。

自分がこうなったときに参考にした方法やそのサイトのまとめを書きます。
※対応ブラウザは、IE6、Firefox3↑、Opera10、Safari3↑、Crome3を考慮しています。

続きを読む

いきなりですがサンプル

↓

ソースコードは続きから。

続きを読む