css テキストストローク text-stroke

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 ウェブ上で表示されているフォントは、基本的にはベクターグラフィックなので、フォントサイズを12pxから120pxに大きくしたりしても、ぼやけたりしないのです。ベクターと言うことは、ピクセルのデーターでフォントや形を表示するのではなく、数式で計算されたポイント一個一個で作られておます。なので、ベクターイメージ編集ソフト(e.g. Adobe Illustrator)の様に、テキストの周りストロークを書いたりできるのです、そして、ついてWebkitでも同じ様にテキストにストロークを書けるようになりました。 使用例: ショートハンド そこで自分はすぐに”いいねー。webkitでしかサポートしてないってことは、テキストカラーと背景を白にして、テキストストロークを入れれば、webkitだけにでもテキストの飾り付けができる!” 嬉しいことに、Webkitも簡単にWebkitでしか適用なれないプロパティーが提供しているので、全部のブラウザーに影響なく使える; @font-face を使って Anime Ace 2 のフォントにストロークを使った場合。 webkit以外のブラウザーは普通の黒い文字になる。 text-strokeを他の方法で再現 次に、まだwebkitしか対応していないtext-strokeを使用するのではなく、FirefoxやOpera,IE9でも対応しているtext-shadowを使ってテキストストロークを再現してみましょう。shadowを上下左右に1pxずつ ずらせて blurはなしで設置します。 これが、テキスト影(text-shadow)を使ってtext-strokeを再現したのになります。かなりいい感じに再現できてますのねー。この方法を使う一番の問題は、2px以上のストロークを設定すると、ストロークに間が空いてきます。webkitを使ってもstrokeのpxが大きくなると問題が出てくるので、とっちらを使ってもそう大差は無さげな気がしあす。 text-strokeとtext-shadowを合わせる text-strokeとtext-shadowを合わせて使うと、なかなか面白い表現をすることができる。それでは、webkitのtext-strokeを入れてからtext-shadowをいれてみましょう。 テキストストロークのアニメーション テキストストロークは、色んなカラー値使用できるので、透明なストロークを重ね合わせて、重なった部分だけが濃くすることもできる。 残念ながら、ストロークの太さはWebkit Keyframeアニメーションには対応してないが、色のアニメーションは対応している。

:nth-childの使い方

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、一部変更し、翻訳しています。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 :nth-child と :nth-of-type を完璧に使い分けれるのは、なかなか難しいですが、どんどん理解していくことで、CSSのプロに一歩近づけると思います。 今回、:nth-child を使って、何個か例をあげて説明して行こうと思います。 5個目だけのエレメントだけをセレクトする場合 かっこ内に特定の数字を入れることで、上の例で言うと5個目だのliを指定して、スタイルを当てれます。 5個目以降だけのエレメントだけをセレクトする場合 これでもし li が10個以上あったら、それらもすべて指定することになります。n は、0 から始まることを覚えといてください。 最初の5個だけのエレメントだけをセレクトする場合 n が 0 から始まって -1, -2, -3 となっていきますので、 5 番目より低いエレメントが選択できます。 1個目から始まって、4個ずつ飛ばして選択する場合 奇数を選択する場合 偶数選択する場合 最後のエレメントを選択する場合 10個のエレメントがあれば10個目を、100個あれば100個目を選択します。 最後から2個目のエレメントを選択する場合 nth に last を入れることで、最後から何個目かを選択することができます。もちろん 2n などを使うことで、後ろからの偶数でもOKです。 対応しているブラウザー 面白いことに :first-child は、インターネットエクスプロラー7(IE7) より対応していましたが、 それ以外のセレクターは IE9 になってからしか対応してません。 それ以外のブラウザーに関しては、特に心配することなく使えると思います。IEの対応が心配な方は、Selectivizrなどを使って補助もできます。