• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

コピペで使える box-shadowの使用例9パターン

投稿者アイコン
2020/01/30
書いた人:
rurippa!
カテゴリ:
CSS
285 views

シャドウ(box-shadow)の使用例を紹介します。コピペして使用できます。

コピペで使える box-shadowの使用例9パターン

目次

はじめに

使用例としてbox-shadowを使って、ボックスに影をつけてみました。コピペでも使えますので、参考にしてみてください♪

共通のCSSはこちら(白い四角の部分)

			div{
				position: relative;
				width: 200px;
				height: 100px;
				background-color: #fff;
			}
			

サンプル

右下に影をつける

		<div class="sample01"></div>
		
		.sample01{
		  box-shadow: 5px 5px 5px rgba(0,0,0,.2);
		}
		

ボックスの外側全体に影をつける

		<div class="sample02"></div>
		
		.sample02{
		  box-shadow: 0 0 10px rgba(0,0,0,.3);
		}
		

左上の内側に影をつける

		<div class="sample03"></div>
		
		.sample03{
		  box-shadow: 5px 5px 5px rgba(0,0,0,.2) inset;
		}
		

右下の内側に影をつける

		<div class="sample04"></div>
		
		.sample04{
		  box-shadow: -5px -5px 5px rgba(0,0,0,.2) inset;
		}
		

ボックスの内側全体に影をつける

		<div class="sample05"></div>
		
		.sample05{
		  box-shadow: 0 0 5px 5px rgba(0,0,0,.2) inset;
		}
		

左下が浮いている風の影をつける

		<div class="sample06"></div>
		
		.sample06{
			position: relative;
			width: 200px;
			height: 100px;
			background-color: #fff;
		}

		.sample06::before{
			content:"";
			position: absolute;
			z-index: -1;
			bottom: 10px;
			display: block;
			width: 50%;
			height: 50%;
			box-shadow: 0 10px 5px rgba(0,0,0,.3);
		}

		.sample06::before{
			left: 5px;
			transform:rotate(-3deg);
		}
		

右下が浮いている風の影をつける

		<div class="sample07"></div>
		
		.sample07{
			position: relative;
			width: 200px;
			height: 100px;
			background-color: #fff;
		}

		.sample07::after{
			content:"";
			position: absolute;
			z-index: -1;
			bottom: 10px;
			display: block;
			width: 50%;
			height: 50%;
			box-shadow: 0 10px 5px rgba(0,0,0,.3);
		}

		.sample07::after{
			right: 5px;
			transform:rotate(3deg);
		}
		

両端が浮いた風の影をつける

		<div class="sample08"></div>
		
		.sample08{
			position: relative;
			width: 200px;
			height: 100px;
			background-color: #fff;
		}

		.sample08::before,
		.sample08::after{
			content:"";
			position: absolute;
			z-index: -1;
			bottom: 10px;
			display: block;
			width: 50%;
			height: 50%;
			box-shadow: 0 10px 5px rgba(0,0,0,.3);
		}

		.sample08::before{
			left: 5px;
			transform:rotate(-3deg);
		}

		.sample08::after{
			right: 5px;
			transform:rotate(3deg);
		}
		

右下にハッキリした影をつける

				<div class="sample09"></div>
				
				.sample09{
				  box-shadow: 0 0 5px 5px rgba(0,0,0,.2) inset;
				}
				

まとめ

いかがでしたか?
色々なニュアンスを表現できますので、ぜひ使ってみてくださいね。また、ジェネレーター(サイトはこちら)などを使ってみるのもオススメです。


この記事を読んだ人はこんな記事も読んでいます