Anda mungkin berpikir - nah, inilah tren desain lainnya? Bukankah kita memilikinya setiap tahun atau lebih?
Tahun lalu kami berkenalan dengan neumorfisme, yang masih merupakan tren kontroversial yang belum menyebar luas. Reaksinya beragam, beberapa sangat menyukainya, dan beberapa tidak menyukainya sama sekali.
.
?
— , .
:
CSS UI, , ui.glass.
, , , .
Facebook Messenger App MacOS:
Mikołaj Gałęziowski Dribbble.
Apple Microsoft
, , , , , . Big Sur MacOS, .
Microsoft Fluent Design System, " ", .
:
, , c, , , HTML CSS.
, - -. , , Codepen.
, , :
HTML- :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism effect</title>
</head>
<body>
<!-- code goes here -->
</body>
</html>
! , Inter Google Fonts:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
body
:
body { padding: 4.5rem; margin: 0; background: #edc0bf; background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%); font-family: 'Inter', sans-serif; }
. , :
<div class="card">
<h3 class="card-title">Glassmorphism is awesome</h3>
<p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
<a href="https://ui.glass">Read more</a>
</div>
, . , , , , .
, , :
.card {
width: 400px;
height: auto;
padding: 2rem;
border-radius: 1rem;
}
.card-title {
margin-top: 0;
margin-bottom: .5rem;
font-size: 1.2rem;
}
p, a {
font-size: 1rem;
}
a {
color: #4d4ae8;
text-decoration: none;
}
! , , , .
, HTML CSS
CSS: backdrop-filter: blur(10px);
. .
.card
:
.card {
/* other styles */
background: rgba(255, 255, 255, .7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
, , , ? , , . :
body
:
<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">
.shape
CSS:
.shape {
position: absolute;
width: 150px;
top: .5rem;
left: .5rem;
}
! :
, Internet Explorer backdrop-filter
, Firefox .
, .
, , .
Themesberg CSS UI, , ui.glass. MIT.
, . NPM, CDN.
! .
OTUS - "HTML/CSS".
- «CSS Reset — ». CSS Reset, .