数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在HTML和CSS中创建玻璃质感侧边栏？
玻璃质感是一种设计趋势，它使用户界面上的元素看起来半透明。您可能在一些网站上看到过一些组件呈现出半透明的磨砂玻璃外观，这就是玻璃质感的一个例子。
玻璃质感中的“morph”部分暗示了元素的深度，即元素在用户视野中显得高于或低于其他元素。
创建玻璃质感侧边栏的方法
在本文中，我们将使用HTML和CSS构建一个玻璃质感侧边栏。让我们开始吧。
- 步骤 1： 在此步骤中，我们将使用HTML创建一个普通的侧边栏菜单。
- 步骤 2： 在此步骤中，我们将设计每个HTML元素以使侧边栏菜单具有玻璃质感。
您可以根据需要使用内部CSS或外部CSS。如果您使用外部CSS，请不要忘记将其添加到您的HTML中(CSS - 包含)。
创建侧边栏菜单结构
由于我们正在创建一个侧边栏，并且并没有真正关注网站的其他元素，让我们继续创建一个aside元素。
创建一个div元素，并设置类名为“sidebar”以选择整个div，然后创建一个列表，其中包含您想要在侧边栏菜单中呈现的项目。
<body>
<div class="sidebar">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contacts</a></li>
<li><a>Gallery</a></li>
</ul>
</div>
</body>
添加玻璃质感效果
我们将使用不同的CSS属性来设计玻璃质感侧边栏。
- 让我们重置大多数HTML元素的默认样式——例如列表中的项目符号。
- 接下来，让我们设置我们的锚点样式。在CSS文件中的ul下方，添加以下代码
- 现在我们可以设置侧边栏的样式了。让我们定位nav元素并向其添加以下样式。
- 我们需要使背景颜色半透明。在CSS中，我们可以通过向颜色添加alpha值来实现这一点。
/* Reset the Default Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style-type: none;
}
/* Adding image For Background */
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: url("https://tutorialspoint.com/css/images/css.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* Styling list Items */
li {
cursor: pointer;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
background-color: transparent;
color: #fff;
border: none;
outline: none;
padding: 1rem 1.5rem;
}
/* Styling sidebar Class */
.sidebar {
background-color: rgba(255, 255, 255, 0.25);
height: 100vh;
padding: 1.5rem;
width: 25%;
backdrop-filter: blur(10px);
}
.sidebar ul li a:hover {
background: rgba(255, 255, 255, 0.2);
}
示例
在这里，我们将两段代码合并在一起，以向您展示玻璃质感侧边栏的输出。
<!DOCTYPE html>
<html>
<head>
<title>Glassmorphism Sidebar Using HTML and CSS</title>
<style>
/* Reset the Default Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
background: url("https://tutorialspoint.com/css/images/css.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
ul {
list-style-type: none;
}
/* Styling list Items */
a {
cursor: pointer;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
background-color: transparent;
color: #fff;
border: none;
outline: none;
padding: 2px;
}
/* Styling sidebar Class */
.sidebar {
background-color: rgba(255, 255, 255, 0.25);
height: 100vh;
padding: 1.5rem;
width: 25%;
backdrop-filter: blur(10px);
}
.sidebar ul li a:hover {
background: rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contacts</a></li>
<li><a>Gallery</a></li>
</ul>
</div>
</body>
</html>
输出
更新于：2024年9月6日
52 次浏览
广告