Clever Geek Handbook

So stellen Sie Glassmorphism mit HTML und CSS bereit

Sie denken vielleicht - nun, hier ist ein weiterer Designtrend? Haben wir sie nicht jedes Jahr oder so?





Letztes Jahr haben wir den Neumorphismus kennengelernt, der immer noch ein ziemlich kontroverser Trend ist, der nicht weit verbreitet ist. Die Reaktion war gemischt, einige mochten es wirklich und andere mochten es überhaupt nicht.





.





?

— , .





:





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 .





, .





 caniuse.com.





, , .





Themesberg CSS UI, , ui.glass. MIT.





, . NPM, CDN.





! .





OTUS - "HTML/CSS".





- «CSS Reset — ». CSS Reset, .





- "HTML/CSS"





- «CSS Reset — »







More articles:


All Articles