演習課題「ボックスの外側にドロップシャドウをつけよう」
現在、ブラウザでは、ピンクのボックスが表示されています。
ここで、このボックスの外側にドロップシャドウをつけてください。
ただし、横方向と縦方向のボックスと影のずれ幅をそれぞれ30pxに、影の色は#6495edに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「ボックスの内側にドロップシャドウをつけよう」
現在、ブラウザでは、オレンジのボックスの外側にドロップシャドウが表示されています。
ここで、このドロップシャドウをボックスの内側につけてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃08:ボックスのボーダーに影をつける(box-shadow)
このチャプターでは、ボックスのボーダーに影をつける方法を学習します。
box-shadowプロパティを使うことで、ボックスのボーダーの外側にドロップシャドウという影をつけることができます。ちなみに影の形や大きさは標準では適用するボックスと同じため、角丸ボックスの影は角丸で表示されます。box-shadowプロパティの値は、最低2つから最高4つまで「長さの単位を持った値」を指定できます。そして任意で、長さを示す値の末尾に影の色や、ボックスの内側に影をつけるときに使うinsetが指定できます。
1番目と2番目に指定した値は、それぞれ横方向と縦方向のボックスと影のずれ幅を指定しています。そして3番目に指定した値は、輪郭をぼかす大きさを示すブラーの値を、4番目に指定した値は、指定した値の分だけ影の大きさを拡張するスプレッドの値を指定しています。
@charset "UTF-8";
h1 {
padding: 20px;
border-radius: 20px;
box-shadow: 20px 20px gray;
background-color: yellow;
}
@charset "UTF-8";
h1 {
padding: 20px;
border-radius: 20px;
box-shadow: 20px 20px gray inset;
background-color: yellow;
}