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