カテゴリー
HTML/CSS

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
とすれば無効になります。

カテゴリー
HTML/CSS

CSSで画像を裏返す

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

カテゴリー
HTML/CSS Web

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

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

参考: The Style Master Blog ? Apple’s Navigation bar using only CSS
詳しくは、参照リンク先をみてもらうとして、グラデーションを手軽に作成できるサービスを見つけたので紹介しておきます。
Gradientifier
これまでのグラデーション作成は、数値を少し変えウェブブラウザで確認しての繰り返しだったのがリアルタイムで確認できるようになったので手間が省けて助かります。

カテゴリー
HTML/CSS Web

WebKitでCSS3の練習(その2)

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


詳しくは、サンプルページをご覧ください。
よく見かけるギザギザとしたマークを付けてみました。完成画像だと分かりにくいですが、背景画像はそのままの位置でテキストだけを回転させています。
mark.png
背景画像を一つ用意して、テキストは自由に書き換えられるので便利ですね。

カテゴリー
HTML/CSS Web

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: [横方向のオフセット] [縦方向のオフセット] [ぼかしの半径] [影の色];
まだまだ、紹介しきれないプロパティがあるけど、今回紹介したプロパティだけでもかなり表現の幅が広がりますよね。

カテゴリー
Script

SafariとWebKit Nightlyの設定ファイルを別々に

Safari と WebKit Nightly は同一の設定ファイルを読み込んで使用しています。この設定ファイルをアプリケーション別に管理する AppleScript が紹介されていました。
Daring Fireball: Writing AppleScripts That Dynamically Target Either Safari or WebKit

カテゴリー
Web

WebKitに自動アップデート機能追加

icn_WebKit_128.png
WebKit r39882 より自動アップデート機能が追加されました。起動時に自動アップデート機能を有効にするかを尋ねられるダイアログが開きます。ファイルメニューから手動でアップデートの確認もできるようになっています。
最近のビルドは安定しており、いち早く新機能を体験したい人にはお勧めです。
webkit_update.png

カテゴリー
Mac OS X

WebKit Nightly がさらに速く

Just three months ago, we announced SquirrelFish, a major revamp of our JavaScript engine featuring a high-performance bytecode interpreter. Today we’d like to announce the next generation of our JavaScript engine – SquirrelFish Extreme (or SFX for short). SquirrelFish Extreme uses more advanced techniques, including fast native code generation, to deliver even more JavaScript performance.

(Via Surfin’ Safari – Blog Archive ? Introducing SquirrelFish Extreme)

次期Safariに搭載されると思われる新JavaScriptエンジンがさらに速くなって登場しました。ベンチマーク(SunSpider)してみると、その差は歴然。Safari 3.1に比べてWebKitは3倍高速でした。
ベンチマーク:
Safari 3.1.2 (5525.20.1)…….Total: 3093.6ms (詳細結果)
WebKit Nightly r36640………Total: 929.6ms (詳細結果)
このごろのWebKit Nightlyは安定感が増してきて普通使用では問題ないくらいになってます。

カテゴリー
HTML/CSS Web

CSS 3のbox-shadowプロパティを利用してみる。

Safari 3から対応したbox-shadowプロパティを利用してドロップシャドウ効果をつけてみる。詳しくは、「ボックスにドロップシャドウの効果をつける–Safari 3のCSS対応 – builder by ZDNet Japan」を参考にしていただくとして、程よい効果はどれくらいの値を与えたらいいのかを検証しました。
favicon-2.png
favicon-2.png
.boxShadow { -webkit-box-shadow: 0 0 10px lightgray; }
ブログエントリーで大きな画像を扱う訳でもないので、境界線が薄らわかるこれくらいが最適かな。

カテゴリー
Apple

Web インスペクタ

Safari 3.1からデバッグメニューを「開発」という名称でメニューに表示できるようになりました。そのメニュー内に「Webインスペクタ」があってWebページの詳細を表示してくれるコマンドです。Webインスペクタを実行すると、開いているWebページのHTMLコードなどあらゆるパーツを一覧できるのでWebページ解析にはとても便利です。
そんなWebインスペクタに、ちょっとした変化が。
WebKit r31738を使っているのが大いに関係していると思いますが、左下に「Dock to main window.」ボタンがあってこれを押すとWebインスペクタがWebページウィンドウの下に収まるようになります。画面スペースを有効利用できるのでありがたいですね。