- 今天早上, 聽到有人說拼多多上市, 然後各種黑, 說什麼市場倒退了二十年, 然後搬出那英當年的"霧裡看花",說這首歌就是在諷刺假貨橫行~
- "霧裡看花"代表了一種"朦胧美", 如果你喜歡朦胧美, 那你也可能也會喜歡毛玻璃
- "毛玻璃"效果, 本質上是對背景圖檔的部分區域進行模糊運算, 比如我們在photoshop經常使用的高斯模糊, 這種模糊其實是在UI設計中非常常見, 比如Mac上的siri
- Mac上siri的毛玻璃效果
- 對圖檔動态地進行模糊運算, 是需要消耗一些性能的, 原來這種模糊效果隻被用于軟體的設計中,随着浏覽器技術的進步, 以及GPU運算能力的提升,這種模糊效果, 開始被用于網頁的設計中
原理和photoshop修圖的步驟類似, 用css中的濾鏡實作blur
, 對文字部分添加僞元素,對僞元素填充部分背景圖檔, 并添加模糊效果高斯模糊
- css實作模糊效果, 與photoshop類似, 但略有不同, css通過postion:fixed來實作背景圖檔與僞元素對應部分圖檔的重合
- css的玩法和photoshop進行平面設計的思維方式很類似, css通過逐漸添加樣式, 實作效果, Photoshop也是通過一步步操作的疊加,實作最終的效果
- css與Photoshop的不同之處在于, css的樣式順序可以随意擺放, 而photoshop的操作步驟有一個嚴格的操作順序
html源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>毛玻璃效果</title>
</head>
<style>
body {
margin: 0;
}
main, .wall::before{
background: url("http://fangyuanxiaozhan.com:10080/zhaoolee/images/raw/master/mk.jpg") 50% / cover no-repeat fixed;
}
main{
height: 100vh;
width: 100%;
}
.wall {
width: 380px;
position: absolute;
top: 20%;
left: 10%;
padding: 10px;
color: #A84631;
border-radius: 20px;
overflow: hidden;
z-index: 2;
}
.wall::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
filter: blur(10px);
margin: -20px;
z-index: -1;
}
</style>
<body>
<main>
<div class="wall">
<p style="font-size: 20px">
打破次元壁?
</p>
與其說想打破次元壁, 進入二次元，不如說你已經厭倦了三次元人或物的醜的一面，隻想獲得美的一面。
<p style="text-align: right">
-- 知乎 https://www.zhihu.com/question/47849525
</p>
</div>
</main>
</body>
</html>
- 對于人類而言, 使用css和Photoshop的思維方式是類似的, 将自己想要展現的效果, 拆解為有限的步驟, 然後将步驟一步一步輸入到計算機中
- 題外話, 人工智能與人類的差別? 以這個毛玻璃效果為例, 人工智能或許能在一瞬間完成這種效果, 而人類需要3分鐘, 但人類在3分鐘内,可能會湧現更好的想法, 并将想法添加到原本的步驟中, 人類與人工智能的差別想必已經很明顯了~
![吳恩達機器學習筆記（3）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)