BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

Html階層型ボックスシャドウ効果サンプルコード

2022-01-21 06:10:05

まず最初に、今日はこのエフェクトをやってみよう！ということで、このエフェクトの使い方を紹介します。

本当に何でもないことなんですが、Webページを作っていると、ナビゲーションバーなどを作ることがよくありますが、そのナビゲーションバーがいつも立体的でないと感じることがあるので、今日は見てみましょう！ということでシェアします。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			body{
				margin: 0;
			}
			.clearfix {
			  overflow: auto;
			}
			.shadow_box {
				box-shadow: 0px 3px 10px 1px #888888;
			}
			div.sticky{
				
				position: sticky;
				top: 0;
				
				background:azure;
				text-align: center;
				
				
			}
			.img1{
				float: left;
				clear: both;
				margin-left:100px;
				opacity: 0.8;
				overflow: auto;
				
			}
			
			ul{
				list-style-type: 0;
				margin: 0;
				padding: 0;
				width: 7%;
				height: 100%;
				background-color:rgb(147, 171, 235) ;
				position:fixed;
				overflow: auto;
				border-radius: 25px;
				
				
			}
			li a{
				display: block;
				color:#000;
				padding: 8px 16px;
				text-decoration: none;
				font-family:"bold";
				
			}
			li:hover{
				background-color: #555;
				color: white;
				
			}
			
		</style>
		<title>XR official website</title>
	</head>
	
	
	<body>
		
		<div class="sticky clearfix shadow_box">
			<img class="img1" src="img/4.png" width="60px" height="60px " />
			
		</div>
		<div>
			<ul>
				<li><a href="index.html">Core Technology</a></li>
				<li><a href="index.html">Party Politics section</a></li>
				<li><a href="index.html">Business</a></li>
				<li><a href="index.html">Future Development</a></li>
				<li><a href="index.html">Contact us</a></li>
			</ul>
		</div>
		<div style="padding-bottom: 2000px;"></div>
		
	</body>
</html>

フルコードに直行するのは、みんな大好きな方法です。もううなり声を上げる必要はありません。

これがシャドウ効果の犯人です。box-shadowを定義し、関連するパラメータを指定してこのように設定したため、一部の友人から「このパラメータはどういう意味だ？大丈夫、絵で教えてあげるよ！」と言われました。

box-shadowのパラメータは以上です。設定できると思います！それでもよくわからない場合は、LINEをくれれば一緒に設定しますよ 応援ありがとうございます

Html layered box-shadow effectについてはこの記事が全てです、もっと関連するHTML layered box-shadowの内容はScript Houseの過去記事を検索するか、以下の関連記事を引き続きご覧ください、これからもScript Houseをもっと応援してくださいね。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します