More than 3 years have passed since last update.

グラスモーフィズムを実装してみました

Last updated at 2021-11-30Posted at 2021-11-30

言語

html
css

実装例

以下の実装で上記の様に実装できます。

sample.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">
    <link rel="stylesheet" href="sample.css">
    <title>sample</title>
</head>
<body>
    <div class = "back-img">
        <div class = "glassmorphism">
            <p>Glassmorphism</p>
        </div>
    </div>
</body>
</html>

sample.css

.back-img{
  background-image:url(img/beach.jpg);
  background-repeat: no-repeat; 
  display:flex;
  align-items: center;
  width:1920px;
  height:1107px;
}
.glassmorphism{
  width: 900px;
  height: 600px;
  margin: auto;
  text-align: center;
  border-radius: 2ch;
  background:linear-gradient( rgba(255,255,255,0), rgba(255,255,255,0.5));
  border: 1px solid rgba(255,255,255,0.4);
  border-right-color:rgba(255,255,255,0.2);
  border-bottom-color:rgba(255,255,255,0.2);
  backdrop-filter: blur(7px);
  box-shadow: 0 5px 20px rgba(255,255,255,0.2);
}
p{
  color: rgb(255, 255, 255);
  font-size: 60px;
  height: 450px;
  line-height: 450px;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up