この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
デザイン業界の流行り廃りはよくわからないですが、グラスモーフィズムを使ったWebのUIを見てかっこいいと思い真似をしたくなったのでやってみます。
グラスモーフィズム(Glassmorphism）とは、
透明感（背景ぼかしを使ったすりガラスのような効果)が特徴のエフェクトのようです。
こんな感じの見た目ですね。 背景には鮮やかなものを使うことが多そうでした。
やってみる
WebのUIで試していくので、HTMLとCSSを使います。
このログインフォームをグラスモーフィズムにしてみます。
Glassmorphism CSS Generator, Toolbox - Glassmorphism Generator, Glass Morphism などたくさんのジェネレーターがあるので、これらを参考にしていきます。
ぼかし具合(Blur)と不透明度(Transparency)を調整して作っていきます。
背景
ちょっとグラデーションのかかった明るめの色にしてみます。
body {
background: linear-gradient(45deg, #FC466B, #3F5EFB);
height: 100vh;
font-family: "Montserrat", sans-serif;
}
スタイル
ぼかし具合(Blur)
backdrop-filter: blur( ７px );
-webkit-backdrop-filter: blur( 7px );と
不透明度(Transparency)
background-color: rgba(255, 255, 255, 0.35);を調整して、いい感じにします。
なんかそれっぽくなりました。
満足です。
最後に
ログイン画面はAuth0のユニバーサルログインのページをカスタマイズしました
今回試したHTMLとCSSは以下
<!DOCTYPE html>
<html>
<head>
{%- auth0:head -%}
<style>
body {
background: linear-gradient(45deg, #FC466B, #3F5EFB);
height: 100vh;
font-family: "Montserrat", sans-serif;
}
._widget section._prompt-box-outer>div:nth-of-type(1) {
background-color: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
-webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
border-radius: 12px;
-webkit-border-radius: 12px;
color: rgb(255, 255, 255);
}
._widget section p {
font-weight: 500;
color: #fff;
opacity: 0.7;
font-size: 1.4rem;
margin-top: 0;
margin-bottom: 60px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.input {
background: transparent;
}
div.text, div.password {
color: #fff;
background-color: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
width: 100%;
border-radius: 15px;
backdrop-filter: blur(10px);
}
::placeholder {
color: #cdd;
}
.js-required {
background-color: rgb(255, 255, 255, 0.01) !important;
}
button {
background-color: rgba(255,255,255,0.1) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
backdrop-filter: blur(4.5px) !important;
-webkit-backdrop-filter: blur( 4.5px );
}
</style>
</head>
<body class="_widget-auto-layout">
<div class="prompt-wrapper">
{%- auth0:widget -%}
</div>
</body>
</html>このコードをSet template for New Universal Login Experience APIで更新しました
グラスモーフィズムのジェネレーターがたくさんあるので、興味のある人は色々と試してみてください
19
