こんにちは、工藤です。
今回は個人的に知っておくと便利だなと思うcssの小技part3をご紹介します。

• 知っておくと便利なcssの小技 part1
• 知っておくと便利なcssの小技 part2

テキストに蛍光ペンのようなマーカーをつける

文字の強調に。使い方によっては分かりやすく、おしゃれになります。

DEMO

方法は非常に簡単です。該当のテキストに

とつけるだけ。
linear-gradient(transparent 開始位置, 色の指定 終了位置);といった感じで、開始位置と終了位置の数値が離れるほどぼやけるイメージです。



ただ、今回の記述だとsarafiの方で問題がありまして、終了位置の値を開始位置より大きくした場合、上部が黒っぽくなってしまいます。
どうやら『transparent』はcssでは『透明の黒』と認識されているらしいです・・。

※参考にさせていただいたサイト
『CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話』

なので終了位置の数値が大きくなる場合の記述は以下の物の方が適切かと思います。


これで『透明の白』という記述になるので、きれいなグラデーションがかかります。

DEMO

cssで四則計算をする

タイトルだけだとぴんとこないかもしれないですが、下の画像のようなことをしたいときに非常に便利です。


『可変かつ横幅は100%、BOXは3つ、マージンは必ず10px固定』というなかなか眩暈がしそうな条件ですが、『calc()』を使うことで四則計算を自動で行ってくれるので簡単に実現することができます。

DEMO

計算式には以下のものが利用可能です。


まずは未対応ブラウザ用に最初にwidthを指定します。崩れない程度の値にしてください。
そのあとは各ブラウザ用に記述をしますが根本は同じです。
今回の場合は『100%から20px（3つ並びのBOXでできたマージンの合計）を引いた後に3で割る』といった感じの計算をしています。

これだけの記述で複雑な条件でもウィンドウ幅を変えても崩れないBOXができます。

注意点

非常に便利なcalc()ですが、注意点がいくつかあります。

1.計算式の間にスペースを入れる
私が地味に引っかかってしまったのですが『100% – 20px』のように計算式の間にスペースを入れないと動いてくれません。

2.対象ブラウザについて
対象ブラウザなのですが、特に
あたりに引っかかってしまう可能性があります。特にAndroidの方は現状だと少しきついかもしれないですね。対象ブラウザはよく確認しつつ使用してください。

それさえクリアしてしまえば非常に便利なクラスです。