こんにちは、工藤です。
今回は個人的に知っておくと便利だなと思うcssの小技part3をご紹介します。
テキストに蛍光ペンのようなマーカーをつける
文字の強調に。使い方によっては分かりやすく、おしゃれになります。
DEMO
方法は非常に簡単です。該当のテキストに
|
1 2 3 |
.mark{ background:linear-gradient(transparent 50%, #FFFF00 50%); } |
とつけるだけ。
linear-gradient(transparent 開始位置, 色の指定 終了位置);といった感じで、開始位置と終了位置の数値が離れるほどぼやけるイメージです。
ただ、今回の記述だとsarafiの方で問題がありまして、終了位置の値を開始位置より大きくした場合、上部が黒っぽくなってしまいます。
どうやら『transparent』はcssでは『透明の黒』と認識されているらしいです・・。
※参考にさせていただいたサイト
『CSS で蛍光ペン風マーカーを指定したら iPhone 上で transparent の部分が黒くなってしまった話』
なので終了位置の数値が大きくなる場合の記述は以下の物の方が適切かと思います。
|
1 2 3 |
.mark{ background:linear-gradient(rgba(255,255,255,0) 50%, #FFFF00 100%); } |
これで『透明の白』という記述になるので、きれいなグラデーションがかかります。
DEMO
cssで四則計算をする
タイトルだけだとぴんとこないかもしれないですが、下の画像のようなことをしたいときに非常に便利です。
『可変かつ横幅は100%、BOXは3つ、マージンは必ず10px固定』というなかなか眩暈がしそうな条件ですが、『calc()』を使うことで四則計算を自動で行ってくれるので簡単に実現することができます。
DEMO
計算式には以下のものが利用可能です。
| + | 加算 |
| – | 減算 |
| * | 乗算 |
| / | 除算 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
ul.boxList{ overflow:hidden; } ul.boxList li{ float:left; height:100px; margin-right:10px; width:33%; /*未対応ブラウザ用*/ widht: -webkit-calc((100% - 20px) / 3);/*Chrome用*/ width: -moz-calc((100% - 20px) / 3);/*Firefox用*/ width: calc((100% - 20px) / 3); } ul.boxList li:first-child{ background:#34B3B6; } ul.boxList li:nth-child(2){ background:#75CF3F; } ul.boxList li:last-child{ background:#E89595; margin-right:0; } |
まずは未対応ブラウザ用に最初にwidthを指定します。崩れない程度の値にしてください。
そのあとは各ブラウザ用に記述をしますが根本は同じです。
今回の場合は『100%から20px（3つ並びのBOXでできたマージンの合計）を引いた後に3で割る』といった感じの計算をしています。
これだけの記述で複雑な条件でもウィンドウ幅を変えても崩れないBOXができます。
注意点
非常に便利なcalc()ですが、注意点がいくつかあります。1.計算式の間にスペースを入れる
私が地味に引っかかってしまったのですが『100% – 20px』のように計算式の間にスペースを入れないと動いてくれません。
2.対象ブラウザについて
対象ブラウザなのですが、特に
| IE | IE9からのサポート |
| Android | Android4.4からのサポート |
それさえクリアしてしまえば非常に便利なクラスです。
