Apple.com/jp のヘッダーナビゲーションを画像を使わずCSSのみでやってみる

動画サムネイル

先日開催された Web Directions East で John Allsopp 氏が Apple.com のナビゲーションバーを画像を使わずにライブコーディングしたとか。

残念ながら自分は Web Directions East に参加できなかったので実際には見ていないのですが、ニコニコ動画にそのさわりの動画がアップされています。

自分でやってみた

実際に John Allsopp 氏がどのようにコーディングしたのかは知らないのですが、自分の知ってる限りの知識でやってみようと思い、やってみましたw

ということで出来たのがこれです。

「Apple.com/jp のヘッダーナビゲーションを画像を使わずCSSのみでやってみる」のサンプルを見る

ただ今普通に見ても「違うんじゃね?」と思うでしょう。

これは CSS3CSS Gradients を使っているためで、完全な完成系は WebKit Nightly Builds のみで確認できます。

(ちなみに :last-child とかに対応していない一部のブラウザでは表示が崩れますww)

スクリーンショット

と言って終るのもアレなので、各ブラウザのスクリーンショットを貼っておきます。

尚、全て Mac 上です。クリックで実物大の画像がご覧になれます。

Webkit
スクリーンショット:Webkit
Safari 3.1
スクリーンショット:Safari 3.1
Firefox 3.1beta
スクリーンショット:Firefox 3.1beta
Firefox 3
スクリーンショット:Firefox 3
Firefox 2
スクリーンショット:Firefox 2
Opera 9.6
スクリーンショット:Opera 9.6

多分もっと作り込めると思うんですが、今日はこんなところで。

もっとこうするといいよ!などありましたらコメントなどいただけるとありがたいです!

ads by LinkShare


5 Ways to Spice up Your Images with CSS の Image with Caption を自分なりに書いてみる

5 Ways to Spice up Your Images with CSS の Image with Caption を自分なりに書いてみる

相変わらずひねりの全くないタイトルでゴメンナサイ。

ということで先日 5 Ways to Spice up Your Images with CSS を見たときに最後の Image with Caption は違う書き方したいなと思っていたのですが、ちょっと思い立ったのでそれを実践してみました。

なお、今回画像は自分で撮った「」を使用しています。;-)

5 Ways 〜 のサンプルで何が問題だと思ったのか

5 Ways to Spice up Your Images with CSS のサンプルを見てなぜ自分が違う書き方したいと感じたかですが、それは opacity を使っていることでキャプションの文字まで透明になってしまうことでした。

まぁコレくらいならいいかな、という許容範囲ではありますができれば自分はここはあまり透明にしたくはない・・・

ということで自分がやってみたサンプルがこちらです。

サンプルを見る

モダンブラウザはやっぱり透過pngで

「やっぱりか」という声が聞こえてきそうですが、IE6を除く一般のブラウザは基本的に透過pngで対応させました。

これだとあとから透過具合を変えたいときに画像を差し替えなきゃいけない!という弊害もあるわけですが、まぁ大体この手のキャプションを使った場合は1度決めたらあまり変える物ではないかな、と思いこうしてみました。

対応ブラウザには RGBA で

まだ対応ブラザは Safari (Webkit) と Firefox3 以上とかだと思うのですが、CSS3 の RGBA colors に対応しているブラウザには RGBA で表示するようにしています。

どうやらOpera も Opera 10 で対応しそうな感じですし、これからもっと使える場面が増えるかもしれませんね。

ちなみにこのブログのデザインにも何カ所か RGBA を使用しています。

尚、Working Draft を見るとIf RGBA values are not supported by a user agent, they should be treated like unrecognized values per the CSS forward compatibility parsing rules. RGBA values must not be treated as simply an RGB value with the opacity ignored.、つまり「もしブラウザが RGBA をサポートしていない場合、透明度を無視して RGB と扱ってはならない」とありますので RGBA を使う際は未対応ブラウザ用に別途色を指定してあげる必要がありますね。
(もちろんそれが必要ないデザインもあるでしょうが)

IE6 さんだけは・・・

ということで上記の2パターンに当てはまらない IE6 さんですが、ここは泣く泣くということで CSS に直接 filter プロパティを記述してしのぎました。

IE6 は文字も透過せても良いかなーとか思ったのですが、これはもう仕方ないですね。早く IE7 や Firefox, Safari, Opera, Chrome などのブラウザが IE6 に置き換わり、IE6 のことを気にしないでも良いようになって欲しい物です。


Growl で大量のスティッキーなメッセージを一気に消す方法

Growl アイコン

MacBookで知っていると便利なショートカット操作 を読んで基本的なショートカットがまとまってるなぁと思ったのですが Growl の部分で1つ便利なショートカットがあるので紹介します。

Growl で大量のスティッキーなメッセージが出てくるとカオスになる

Growl にはそのメッセージを自動的に非表示にさせない「スティッキー設定」というのがあります。

(ちなみにシステム環境設定 > Growl > アプリケーション > 各アプリケーション > 通知 にあります)

これは重要なメッセージを見逃さないなど便利なのですが、このスティッキーなメッセージが大量に出てくるとカオスになります。

例えば以前このような状態になったことがあります。

Twitterrific の Growl がカオスです
Uploaded with plasq's Skitch!

こうなるともうメインのウィンドウが隠れちゃいますね><

Growl で大量のスティッキーなメッセージを一気に消す方法

ということで Growl で大量のスティッキーなメッセージを一気に消す方法です。

これは非常に簡単で、Growl のメッセージにマウスを乗せると「×」印が出てくると思います。

これの事です。
Growl の「×」印

この「×」印を Option を押した状態でクリックするとそのとき表示されているメッセージを全て消す事ができます。

Growl のメッセージが大量に出て来てウザい時などは試してみてはいかがでしょうか?

Growl: Close Multiple Notifications with One Click | Apple Mac | Tech-Recipes


About Author
trackfeed
feed meter
人気ブログランキング - Forest.Kの徒然日記
track word
あわせて読みたい
あわせて読みたい
解析
Firefox meter Chrome Counter Firefox3 Meter



特集 & 限定アルバム
iTunes Store Top Songs
iTunes Store Top Albums
  •  iTunes Store(Japan)