WinterBoard – CSSプロパティ(Safari独自拡張編)

10083141882
予想通りわかりづらい。クリックすると拡大します。

WinterBoardのInfo.plistをちょっと弄ってみた。
CSSの対応はSafariと同じなんだろうと思ったので、独自拡張(先行実装というべきか)のtext-shadowプロパティを使用。

text-shadow: 2px 2px #333;
わかりづらいですが文字の背面に#333のグレーの影がつきました。

10083149621

あとはこんなの。またわかりづらい

使ったのは-webkit-text-stroke-widthと-webkit-text-stroke-colorと-webkit-text-fill-colorプロパティ。

-webkit-text-stroke-width: 0.03em; /* 外枠の太さ */
-webkit-text-stroke-color: #666; /* 外枠の色 */
-webkit-text-fill-color: #fff; /* 内部の色 */
font-weight:bold; /* あってもなくても大して変わらず */

こんな感じ。スクリーンショットを見てもよくわからないのでMacのSafariでそれぞれ表示させたものがこれ。

10083149619
これがCSSでできるようになったのは嬉しい限りです(正式では無いけど)。
これ以上はホーム画面をもっとカスタマイズできるようにならないとあまり意味が無いかも。
上記のプロパティも現状表示可能な文字サイズでは映えない。あんまり大きくするとはみ出るし。

他にも色々あるので、詳しい人はSafari CSS 独自拡張 検索結果から探してください。
自分のサイトに使ってもSafariでしか反映されない上に迷惑なので止めましょう。

Technorati Tags: , ,

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中