CSSスキル - 第5章 Lesson6

ボックスに影をつける方法

   

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

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

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



この動画で学べること

・box-shadowでボックスに影をかける方法



box-shadowでボックスに影をかける方法

今回は、ボックスに影をつけて、浮き上がらせたデザインにしていきたいと思います。
ボックスにシャドウをかける時のプロパティはbox-shadowで、「box-shadow: [左右の位置] [上下の位置] [サイズ] [色];」という順番で設定をしていくのがルールになっています。
今回は、<div>タグの中のid名「background-img」の中の<a>タグに対してかけていきたいので、前回のテキストシャドウの下に書いてください。




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




一度、保存してブラウザで見てみましょう。
ボックスにくっきりとした影がつきました。
影の位置が遠すぎるので、位置を調整して、ボックスに重なったような影を作りたいと思います。
また、色も濃すぎるので、前回と同様「rgba()」で不透明度を下げてみましょう。





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




保存してブラウザで見てみます。
不透明度と位置の調節をしたことにより、とても自然な影ができました。