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

HTML table tag tutorial (11): horizontal alignment attribute ALIGN

Solution to the error message "java.sql.SQLException: Incorrect string value:'\xF0\x9F\x92\xA9\x0D\x0A...'" when storing emoticons in MySQL

Preface This article mainly introduces the soluti...

Example code for Html layered box-shadow effect

HTML table tag tutorial (11): horizontal alignment attribute ALIGN

js uses cookies to remember user page operations

The English reading of various special symbols on the keyboard (knowledge popularization)

HTML weight loss Streamline HTML tags to create web pages

Detailed example of remotely connecting to Docker using TLS encrypted communication

Detailed explanation of performance optimization ideas for React functional components

A brief discussion on the magical slash in nginx reverse proxy

Simple example of adding and removing HTML nodes

Summary of ten principles for optimizing basic statements in MySQL

Detailed explanation of Vue custom instructions and their use

Recommend

Learn MySQL execution plan

7 Best VSCode Extensions for Vue Developers

Detailed Analysis of the Selection of MySQL Common Index and Unique Index

How to query data from multiple unrelated tables and paging in Mysql

MySQL 8.0.16 installation and configuration tutorial under CentOS7

Problem with resizing tables using relative widths

5 ways to migrate Docker containers to other servers

Detailed tutorial on installing Docker on CentOS 7.5

How to create a Django project + connect to MySQL

Solution to the error message "java.sql.SQLException: Incorrect string value:'\xF0\x9F\x92\xA9\x0D\x0A...'" when storing emoticons in MySQL

Example code of Vue3 encapsulated magnifying glass component

How to deploy FastDFS in Docker

How to understand the difference between computed and watch in Vue

How to use js to communicate between two html windows

The tdwidth setting of the table in multiple divs is the same and cannot be aligned