font-smoothingで見た目を変えてみる

スタイルシートでアプリケーションのフォントの見た目を変えるのが流行りかな。今回は、`-webkit-font-smoothing` プロパティを使ってフォントスムージング具合を変更してみましょう。

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased; \* Standard *\
-webkit-font-smoothing: antialiased;

フォント比較の参考サイト: Test page for -webkit-font-smoothing | Christoph Zillgens

font-smooshing.png

Safari でスタイルシートを指定してウェブページの見た目を変えてみましょう。`~/Documents/user.css` を作って以下のように記述します。

html {-webkit-font-smoothing: antialiased;}

Safari 環境設定から「詳細」パネルを表示して「スタイルシート:」で先ほど作成したスタイルシートを選択します。ウェブページを表示して、プルダウンメニューで切り替えながら違いが確認できます。

Safari だけじゃなく App Store や iTunes でも使いたい場合は、

defaults write com.apple.iTunes WebKitUserStyleSheetEnabledPreferenceKey -bool true
defaults write com.apple.iTunes WebKitUserStyleSheetLocationPreferenceKey “~/Documents/user.css”

defaults write com.apple.appstore WebKitUserStyleSheetEnabledPreferenceKey -bool true
defaults write com.apple.appstore WebKitUserStyleSheetLocationPreferenceKey “~/Documents/user.css”

のように `defaults` コマンドを利用します。また、気に入らなければ

defaults write com.apple.iTunes WebKitUserStyleSheetEnabledPreferenceKey -bool false
defaults write com.apple.appstore WebKitUserStyleSheetEnabledPreferenceKey -bool false

とすれば無効になります。

CSSで画像を裏返す

スタイルシートだけでここまでできるようになるのですね。すばらしい!!

カーソルを画像の上に持っていくと画像が反転してテキストを表示してくれるという動作をします。ウィジェットの設定画面を表示する動作に似ています。ただ、このプロパティはここ最近リリースされたWebKit Nightly Buildでしか動作しません。Safari 4.0.2でも動作しないことを確認しております。

CSS3でナビゲーションメニュー

アップルのサイトで見かけるナビゲーションメニューを画像を使わずにCSS3だけで表現してみた。WebKit独自プロパティを使っているのでSafari3以上でみてほしい。

参考: The Style Master Blog ? Apple’s Navigation bar using only CSS

詳しくは、参照リンク先をみてもらうとして、グラデーションを手軽に作成できるサービスを見つけたので紹介しておきます。

Gradientifier

これまでのグラデーション作成は、数値を少し変えウェブブラウザで確認しての繰り返しだったのがリアルタイムで確認できるようになったので手間が省けて助かります。

WebKitでCSS3の練習(その2)

エントリー「WebKitでCSS3の練習 | appling weblog」の続きになります。

布団に入って、プロパティの組み合わせをあれやこれやと考えていると display: -webkit-box; で面白いことを思いついたので枕元にあるMacBookで試してみるとあっけなくできちゃった。そこからというもの、眠気が吹っ飛びコーディングを始めたのでした。

詳しくは、サンプルページをご覧ください。

よく見かけるギザギザとしたマークを付けてみました。完成画像だと分かりにくいですが、背景画像はそのままの位置でテキストだけを回転させています。

mark.png

背景画像を一つ用意して、テキストは自由に書き換えられるので便利ですね。

WebKitでCSS3の練習

使い始めたEspressoに慣れ親しもうと、WebKitで実現できるCSS3の練習をしました。WebKit Nightlyの最新ビルド(r42162)で表示テストを行っています。グラデーションを行う -webkit-gradient() プロパティはSafari4ベータから採用されたものなので、Safari4以外のブラウザでは表示できないと思います。なので、画像を掲載しておきます。

testing webkit css3

詳しくは、サンプルページをご覧ください。

今回使用した、目新しいスタイルプロパティ。

– -webkit-gradient()
– -webkit-border-radius
– -webkit-box-shadow
– -webkit-box-reflect
– text-shadow

グラデーションを表現する -webkit-gradient() プロパティの基本形式。

-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), to(終了色));

途中で色を追加したい場合は color-stop(追加位置, 色) を指定することによってできます。この指定を複数追加することによって色鮮やかな(?)グラデーションも実現できます。

画像を角丸にしている -webkit-border-radius プロパティの基本形式。

-webkit-boder-radius: 半径(px指定);

画像を編集することなく角丸にできるのは便利。また、画像の周辺をぼかす -webkit-mask-box-image プロパティも併用すると便利かも。今回は -webkit-box-reflect プロパティを併用して反射させてみました。

ボックスに陰を付けて立体感を表現する -webkit-box-shadow プロパティの基本形式。

box-shadow: [横方向のオフセット] [縦方向のオフセット] [ぼかしの半径] [影の色];

まだまだ、紹介しきれないプロパティがあるけど、今回紹介したプロパティだけでもかなり表現の幅が広がりますよね。