本記事では、CSSプロパティの一つであるbox-shadowでHTML要素に影をつけたい場合に..どのように設定をすればいいかをサンプルコード(コピペ使用可能)を用いて、ご紹介させて頂いております。
✅ box-shadowプロパティの使い方が分かる
box-shadowプロパティとは??
基本は、外側に影をつけることがほとんどであると思いますので、上記の内容で問題ないかと思いますが、insetキーワードの指定をすると、内側へ影をつけることも可能です。
box-shadowプロパティの基礎
基礎的な使い方をみてみましょう。
以下、サンプルコード及び実行例になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box-shadow_sample</title>
</head>
<body>
<div class="box"></div>
</body>
<style>
.box {
width:30%;
height: 200px;
background-color: rgb(159, 204, 244);
/* 5px:水平方向の長さ 5px:垂直方向の長さ 2px:ぼかし具合 3px:影の広さ */
box-shadow: 5px 5px 2px 3px rgba(32, 29, 99, 0.6);
}
</style>
</html>[ 実行結果 ]
デザインサンプル:7選
box-shadowプロパティの基礎的な使い方がわかったところで、今回の本題でもありますデザインサンプル7選をご紹介せさせて頂きます！HTMLコードは、「 box-shadowプロパティの基礎 」にて使用しましたものを使用していきますので、CSSの部分のみ書き換えるようにしてください。
box-shadow: rgba(16, 1, 75, 0.325) 2px 2px 5px, rgba(16, 1, 75, 0.24) 2px 2px 2px;[ 実行結果 ]
box-shadow: rgb(16, 1, 75) 0px 20px 30px -10px;[ 実行結果 ]
box-shadow: rgba(16, 1, 75, 0.4) 0px 0.225em 0.225em, rgba(16, 1, 75, 0.25) 0px 0.125em 0.5em;[ 実行結果 ]
box-shadow: rgba(46, 46, 240, 0.4) 4px 4px, rgba(46, 46, 240, 0.3) 8px 8px, rgba(46, 46, 240, 0.2) 12px 12px, rgba(46, 46, 240, 0.1) 16px 16px; [ 実行結果 ]
box-shadow: rgb(103, 154, 198) 3px 3px 6px 0px inset, rgba(103, 154, 198, 0.5) -3px -3px 6px 1px inset;[ 実行結果 ]
box-shadow: rgba(59, 59, 101, 0.25) 0px 40px 50px -20px inset, rgba(18, 5, 79, 0.35) 0px 30px 40px -25px inset;[ 実行結果 ]
box-shadow: rgba(59, 59, 101, 0.17) 0px -23px 25px 0px inset, rgba(59, 59, 101, 0.15) 0px -36px 30px 0px inset, rgba(59, 59, 101, 0.1) 0px -79px 40px 0px inset, rgba(59, 59, 101, 0.06) 0px 2px 1px, rgba(59, 59, 101, 0.09) 0px 4px 2px, rgba(59, 59, 101, 0.09) 0px 8px 4px, rgba(59, 59, 101, 0.09) 0px 16px 8px, rgba(59, 59, 101, 0.09) 0px 32px 16px;[ 実行結果 ]
今回ご紹介させて頂くデザインのサンプルは、ここまでになりますが、これらのサンプルをカスタマイズし、各々、好みのデザインを作成していきましょう。
まとめ
⇨ HTML要素に対して、影をつけることが出来ます。
✅ box-shadowプロパティの使い方
⇨ 指定する値としては、水平方向/垂直方向の長さ, ぼかしの具合, 影の広さ, 影の色です。 insetキーワードを設定すると、HTML要素の内側に影をつけることが出来ます。
最後に
ここまで読んで頂き、有り難う御座います。
プログラミングを学習している方やこれから始めようと考えている方にお知らせです。
⇩⇩⇩⇩⇩⇩
- 独学で学習を続けても中々、理解が定着しない..
- エラーが出てしまい、想定した結果が得られない…
- フリーランスとしてデビューしたいが何からやったらいいかわからない…
などの悩みがある方必見！
実は、以下の内容が全て月額定額のサブスクで利用できるサービスがあります。
- 話題のAWSから人気のプログラミング言語Pythonをはじめとする
様々な教材(HTML/CSS, JavaScript, jQuery, Ruby, Ruby on rails, PHP, Laravel, Django, Java, Spring, Git, 機械学習, Linuxなど50種類以上)が無制限で閲覧可能。 - オンラインで利用できるため、隙間時間で学習ができる。
- 質問掲示板も24時間活用することが出来るため、自己学習や教材を通した学習で詰まっても気軽に質問が出来る。(講師の方が回答してくれる時間帯は、10:00～22:00です。)
- 入会金不要で、あわないなと思ったらいつでも退会が可能。
- 実務経験が３年以上の選び抜かれたエンジニアが講師として多数在籍しているため、安心。
- 質問掲示板でも解決できない疑問や悩みは、プラン応じて月1回~受講できるオンラインレッスンで解決できる
最初から定額であると少し抵抗があるという方もフリープランからお試しが出来るので安心です。会員登録も無料！
詳しくは、以下のリンク先のページからチェック！
コメント