CSSfacebookTweethatenaline2019.06.10レシピエフィクト要素に影(ドロップシャドウ)を設定するHTML要素に影(ドロップシャドウ)を表示する方法を解説します。特定のHTML要素に影をつける要素の表示に立体化を持たせる時に、影(Photoshopではドロップシャドウと呼ばれます)をつけることがあります。CSSではbox-shadowプロパティが用意されており、このプロパティで簡単に影をつけることができます。通常の影がない表示例です。続いて、影(ドロップシャドウ)をつけた場合の表示例です。#90bde2;}</style><section><h2>要素に影(ドロップシャドウ)を設定する</h2><p>CSSを使うと要素の4角を角丸にすることができます。<br>上の2角だけや、1角だけ、角ごとに違う丸みにすることができます。#90bde2;」で影をつけています。指定する値は少し多く、今回は5つ指定しています。前から順に、1つ目の値はX軸のずらし、2つ目の値はY軸のずらし、3つ目の値はぼかしの面積、4つ目の値は影のサイズ、5つ目が影の色です。値は必要に応じて省略も可能です。続いて、いくつかの影のパターンを解説していきます。影をベタ塗りにして、あえてぼかさないタイプです。X軸にはずらさずに、Y軸の縦方向にのみ5pxずらします。#bad8f2;今回は値を3つだけ指定しています。1つ目と2つ目の値が影の位置、3つ目が影の色です。ぼかし具合やサイズは省略しました。一般的なぼかしのある影の表示例よく見かけることの多い、要素に対して影がやや斜めに表示される立体感のあるタイプです。0.5);1つ目と2つ目の値は影の位置、3つ目はぼかし具合、そして色はrgbaで透過度も含めた指定をしています。影のサイズのみ省略しました。要素の内側に影をつける影は外側だけでなく、内側につけることもできます。0.3);1つ目の値「inset」をつけると、影が要素の内側に表示されるようになります。内側にベタ塗りの影をつけて2重ボーダーのようにする内側の影をベタ塗りにすることで、枠をより際立たせることができます。#cae0f3;こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND遅いインターネット評論家の宇野常寛の新著。2018年頃から提唱されている「インターネットによって失った未来をインターネットによって取り戻す」をテーマにした本書が、いよいよ2月20日から書店に並びます。宇野さんがずっと温めてきた構想が詰まった1冊なので、個人的に非常に楽しみにしている一冊です。