資料結構
網路
關係資料庫管理系統 (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.tw/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.tw/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 次瀏覽
廣告