webkit maskについて、あまり情報がないので纏めておきます。
マスクはPhotoshopのマスクと同じく黒から白への255階調のグラデーションで画像を覆う事で、半透明はその白から黒への階調の途中で表現されます。当サイトの行列してるアイコンはwebkit maskのプロパティで形ができているものもあります。
今回は閑話休題です。
さてwebkit maskですが使用はものすごい簡単です。
当サイトはspanとposition absoluteで重ねたマスク画像でアイコンの形にくりぬいてるもの(簡単に枠が出ますから白背景だとこっちかなーと思っています)、webkit maskでアイコンの形にくりぬいている物があります。
このブログの右上のカレンダーアイコンもwebkit maskでくりぬいています。
http://cal.hokkyokudesign.com/index.html
とかのアイコンに細枠が出ているページはspanでアイコンの形になっています。背景があるこちら
http://cal.hokkyokudesign.com/index_jp_bluebox.html
とか、アイコンに枠が無いものはcss3のwebkit mask でアイコンをくりぬいています。
前置きはこれくらいで使い方はものすごい簡単です。ベンダープリフィックスの説明とかは端折り、まずcssの指定から。
-webkit-mask-image: url('マスク画像のURI');
-webkit-mask-size: マスク画像をどれくらいの大きさにするか、当てるイメージの大きさ;を指定します。私の場合、これをクラスにしてimgタグにスタイル付けています。
<img class="上記maskのクラス" alt="" src="画像" width="当サイトではアイコンの大きさでmask-sizeと同じ値" height="同じ" />webkit以外どう出るか全く気にしていません。
また、マスク画像もちょっとコツがいったりしますが、まずは白や黒やグレーのファイルを作って、そいつをwebkit-mask-image指定してみてどう出るか見るのが一番的確だと思います。
もっと画像を使って説明するのが良いんでしょうが、たまにはあっさりと。
いずれ今一番好きなプロパティ、Display flexについても説明したいです。
伸縮するアイコン部分はこれで出来ています。最下部SNSリンクの部分もこれで出来ているので画面サイズで配置が変わります。
本気で便利でかつ未だ正式に仕様が決まっていないで今後どうなるか解りませんが、iPhone専用サイトは今使える新しい事を試せるのが良いですね。
今後もご愛顧よろしくお願いします。
あ、明日iPhone 4が手に入る予定です。壁紙の4対応します！