CSSスキル - 第5章 Lesson4

テキストに影をつける方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

テキストに影をつけるtext-shadowプロパティについて、初心者向けに解説しています。



この動画で学べること

・text-shadowでテキストに影をつける方法



text-shadowでテキストに影をつける方法


テキストにシャドウをかけるときは、text-shadowのプロパティを使います。
「text-shadow: 0px 0px 10px black;」というように、「プロパティ: [影を横にずらす位置] [影のサイズ] [影のぼかし具合] [影の色];」という順番で影の設定をしていきます。
それでは実際に<div>タグの中のid名「background-img」の中にある<a>タグに対して書いていきたいと思います。




div#background-img a {
text-shadow: 10px 10px 50px black;
}




一度、保存してブラウザで見てみましょう。
右に10px、下に10px、そして5pxぼかした黒い影ができました。
今回は、少し影が濃すぎることがわかります。
実際、テキストシャドウをかけるときには、以前学んだような「rgba()」を使って不透明度を下げることが多いので、その方法もみていきましょう。
色は黒色ですので、RGBそれぞれの数値を0とし、不透明度は50%を示す0.5にしておきます。
影をずらす位置と影のサイズを0にすると、光彩がかかったような演出もできますので、その点も一緒に見ていきましょう。




div#background-img a {
text-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}




保存してブラウザで見てみます。
文字の周りに光彩のように見える10pxのぼかしがかかりました。
また、不透明度も下げたので、影の色を自然にすることもできました。