Example code for Html layered box-shadow effect

insert image description here

First, let’s take a look at the picture: Today we will create this effect!

insert image description here

Actually, it’s nothing. I just want to share that when you are making web pages, you often encounter the problem of making navigation bars. You may feel that your navigation bar always lacks a three-dimensional feeling. Let’s take a look at it today!

<!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 and Government Section</a></li>
				<li><a href="index.html">Business Status</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>

Directly on the complete code, this is also everyone's favorite way, no more procrastination, we mainly look at this

insert image description here

This is the "culprit" of the shadow effect. Because I defined box-shadow and then specified the relevant parameters, I can set it like this. A friend asked, what does this parameter mean and how do I know? It’s okay, I’ll tell you with a picture!

insert image description here

That's all there is to box-shadow. I believe you can set it up. If you still don’t know how, you can leave me a message and I will help you set it up! Thanks for your support!

This is the end of this article about Html layered box-shadow effect. For more related HTML layered box-shadow content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:

>>: 4 functions implemented by the transform attribute in CSS3