制作会社様とのやり取りに特化したコーディング代行ならくまWebにお任せください！
2016年08月12日
CSS3のプロパティについて解説する連載です。以前の記事でボックス要素に影をつけるbox-shadowの解説をしましたが、今回はテキストに影をつけるtext-shadowついてご紹介します。
text-shadowを指定する方法です。
text-shadow: 水平方向の距離 垂直方向の距離 （影のぼかし半径） （影の色）;
「水平方向の距離」と「垂直方向の距離」はそれぞれ、水平方向と垂直方向へのずれを指定します。「水平方向の距離」は正の値で右に、負の値で左にオフセットします。「垂直方向の距離」は正の値で下に、負の値で上にオフセットします。
「影のぼかし半径」と「影の色」は、それぞれ省略が可能です。
text-shadowを使った具体例です。
「水平方向の距離」と「垂直方向の距離」を両方とも正の値にして、テキストの右下に影を描いた例です。
text-shadow: 10px 10px 1px #ccc;
上と同じ内容で、「影のぼかし半径」を1pxから7pxに変更した場合です。影のぼやけ具合が強くなったことがわかります。
text-shadow: 10px 10px 7px #ccc;
半角カンマで区切ることで、2つ以上の影を描くことができます。下の例では、右下と左上に色の違う影を2つ指定しています。
text-shadow: 10px 10px 1px #ccc, -10px -10px 1px #7fd;
影を組み合わせることで、エンボスやレタープレス、グローエフェクトなどさまざまな装飾をかけることが可能です。下の例では、エンボス加工を表現しています。
text-shadow:1px 1px 1px #000, -1px -1px 1px #fff;
CSS3のtext-shadowプロパティを使って、文字に影をつける方法についてご紹介しました。box-shadowと同様、CSSで出来る表現の幅が一気に広がります。ぜひ積極的に使っていきましょう。
「納期に間に合わない！」「スタッフの手が空かない！」「技術的に対応できない！」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。