資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立方向光照 3D 按鈕？
您網站的每個部分都很重要。您的網站按鈕不僅僅是裝飾；它們是至關重要的設計元素，有助於講述您業務的故事並引導使用者訪問您的產品或服務。雖然基本按鈕具有功能性，但您可以更進一步並新增引人入勝的效果，例如當您將滑鼠懸停在按鈕上時顏色會發生變化的按鈕、帶陰影的按鈕、停用的按鈕或按鈕組。按鈕可以將我們帶到其他頁面或執行諸如提交表單或進行購買等操作。
您構建的最佳選擇是什麼？使用 CSS（層疊樣式表）建立按鈕。CSS 是一種定義和描述如何呈現 HTML 中元素的技術。使用 CSS 編輯器，您可以更改網頁的每個元件，從標題和頁尾到側邊欄和按鈕。在本文中，我們將討論如何使用 CSS 建立方向光照 3D 按鈕。
首先，讓我們看看一些我們將需要的 CSS 屬性。
Font Awesome 圖示
Font Awesome 免費版 5 用於字體系列，以便在下載連結旁邊新增檔案格式型別的圖示。它與 CSS 中的內聯元素一起使用。Font Awesome 是一個包含數千個為各種事物指定的圖示列表的庫。每個圖示都有一個唯一的 Unicode 值。以下是幾個圖示及其程式碼的示例。
fa fa-file-excel-o |
Excel 圖示 |
fa fa-file-powerpoint-o |
Powerpoint 圖示 |
fa fa-file-word-o |
MS Word 圖示 |
box-shadow 屬性
box-shadow 屬性 使開發人員能夠將一個或多個陰影應用於元素。只需用逗號分隔即可分配多個效果。
語法
box-shadow: value;
此屬性的值為：
無- 元素上不顯示陰影。這是預設值。
水平偏移量– 陰影在水平方向上應遠離元素多遠。正水平偏移量值會在元素的右側投下陰影。另一方面，負值將元素的陰影移到左側。
垂直偏移量– 陰影應在垂直方向上與元素相距多遠。正垂直偏移量值會在元素上方產生陰影，而負值會在元素下方提供陰影。
模糊半徑- 它指定陰影的清晰度。數字越大，陰影越模糊，這意味著陰影會更大更淺。
擴充套件- 半徑 – 它指定陰影的大小。如果其值為正，則大小增加。如果為負，則大小減小。
顏色– 它指定陰影的顏色。
：before 偽選擇器
：before CSS 選擇器用於在元素內容之前插入某些內容。
：after 偽選擇器
::after CSS 選擇器用於在元素內容之後插入某些內容。content 屬性指定要在所選元素之前或之後編寫的內容。
CSS Transform 屬性
可以使用 CSS 中的 transform 屬性更改視覺格式模型的座標空間。這用於為元件提供傾斜、縮放、旋轉和平移效果。
語法
transform: none| transform-functions| initial| inherit;
值
translate(x, y) − 此函式定義沿 X 和 Y 座標的平移。
translate3d(x, y, z) − 此函式提供沿 X、Y 和 Z 座標的平移。
rotate(angle) − 它用於定義旋轉軸的角度。
scale(x, y) − 此函式指定沿 X 和 Y 軸的縮放變換。
scale3d(x, y, z) − 沿 X、Y 和 Z 軸指定縮放變換。
skew(angle, angle) − 沿 X、Y 和 Z 軸定義角度變換。沿 X 和 Y 軸定義傾斜變換，這等效於傾斜角。
初始 − 為元素設定預設值。
繼承 − 它採用其父元素的值。
操作步驟
建立三個 <a> 元素以建立按鈕，併為其新增不同的 ID。
使用巢狀方法和 :before 和 :after 等偽元素為按鈕提供 3D 效果。
根據您的選擇使用 CSS Font Awesome 圖示新增圖示。
使用 CSS transform 屬性，正確對齊按鈕。使用 box-shadow 屬性為按鈕元素新增陰影。
示例
以下示例演示瞭如何建立方向光照 3D 按鈕。
<!DOCTYPE html>
<html>
<head>
<title> Directionally Lit 3D Buttons </title>
<link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
*{
margin: 0;
padding: 0;
}
div {
display: flex;
align-items: center;
justify-content: center;
background: #E1C16E;
margin: 0;
padding: 10px;
width: 99vw;
height: 98vh;
font-family: 'Times New Roman', Calibri,
Georgia, Verdana, serif;
position: relative;
}
ul {
position: absolute;
display: flex;
margin: 5px 5px;
padding: 2px 2px;
}
i {
padding: 11px;
}
a {
text-decoration: none;
color: white;
letter-spacing: 1px;
font-family: cursive;
}
ul li {
list-style: none;
margin: 15px;
display: block;
}
ul li a {
width: 150px;
height: 100px;
margin: 40px;
background: cyan;
display: flex;
font-size: 20px;
align-items: center;
border-radius: 10%;
justify-content: center;
transform: rotate(-25deg) skewX(30deg);
box-shadow: -35px 30px 20px white;
}
ul li a:before {
content: '';
position: absolute;
top: 15px;
left: -20px;
background: cyan;
border-radius: 10%;
height: 100%;
width: 25px;
transform: rotate(10deg) skewY(-55deg);
}
ul li a:after {
content: '';
position: absolute;
bottom: -20px;
left: -10px;
background: cyan;
border-radius: 10%;
height: 30px;
width: 98%;
transform: rotate(10deg) skewX(-60deg);
}
li a:hover {
transform: rotate(-25deg) skew(35deg) translate(18px, -19px);
}
</style>
</head>
<body>
<div>
<h1> 3D Buttons </h1>
<ul>
<li id= "excel">
<a href= "#"> <i class= "fa fa-file-excel-o" style= "color:green"> </i> MS Excel </a>
</li>
<li id= "powerpoint">
<a href= "#"> <i class= "fa fa-file-powerpoint-o" style= "color:red"> </i> Powerpoint</a>
</li>
<li id= "word"> <a href= "#"> <i class= "fa fa-file-word-o" style= "color:blue"> </i> MS Word </a></li>
</ul>
</div>
</body>
</html>
結論
在本文中，我們討論瞭如何使用 CSS 屬性（如 transform、偽選擇器、box-shadow 屬性和 font awesome 圖示）建立方向光照 3D 按鈕。
170 次瀏覽
