グラスモーフィズムを実装してみた - しがないエンジニアのブログ

f:id:SGNI_engineer:20211130104815p:plain

今はやりのグラスモーフィズムを実装してみました。

グラスモーフィズムとは何か、実装例を以下で紹介します。

グラスモーフィズムとは
実装例

グラスモーフィズムとは

f:id:SGNI_engineer:20211130144639p:plain

2020年末ごろより人気が高まっているスタイルで、静かな不発トレンドとなったニューモーフィズムのプラスチックな質感に対して、すりガラスを通して覗いたような背景のぼかしが特長です。

背景が透けて見えることで、コンテンツの階層を確立し、インターフェースの奥行き感を演出できます。本物のガラスの用に、どの層がどの層の上にあるのかを簡単に確認することができます。

https://photoshopvip.net/126760

実装例

f:id:SGNI_engineer:20211130104815p:plain

以下の実装結果は上の画像の様になります。

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;
}