Glassmorphism

This article was partially machine translated

Introduction

Today, I want to summarize the things I recently designed, such as semi-transparent elements, frosted glass effects and rounded corners. But then It occurred to me that I created a webpage on December 1, 2023, so I decided to rebuild it by the way.

webpage background

A modern ~~(anime style)~~ website needs a background image.

1
2
3
4
5
6
7
8
body{
    background-image: url('../img/77194247_p0.jpg');
    background-size: cover;
    background-attachment: fixed; /* fixed image */
    background-repeat: no-repeat; /* no repeat image */
    padding: 0;
    margin: 0;
}

Semi-transparent and Frosted Glass effects

Then apply a mask to the background in order to achieve the semi-transparent and frosted glass effects.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.layout {
    /* display: flex; */
    margin: 0;
    padding: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(2px); /* background blur effect */
    -webkit-backdrop-filter: blur(2px); /* Safari support */
    background: rgba(0, 0, 0, 0.4); /* semi-transparent black background */
}

Webpage Rebuild

By the way, writing articles is troublesome. When I am programming, it distracts me, and I am too tried to write them after I finish programming, so I am just writing articles casually now.

Repository: https://github.com/yexca/MusicPlayer-Twinkle

I updated the previous article (Simplified Chinese) https://blog.yexca.net/archives/116/ and created an example using that method: https://twinkle.yexca.net

Card Effect

This is modern design too.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.card {
  width: 300px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5); /* semi-transparent white background */
  border-radius: 15px; /* rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow effect */
  backdrop-filter: blur(10px); /* background blur effect */
  border: 1px solid rgba(255, 255, 255, 0.3); /* border */
  color: pink; /* color of text */
}

Well, I might complete this project if I have free time… (Digging a new hole, again)

Twinkle

The content of the project is Twinkle’s music, if you’d like to learn more, check it out here:

SoundCloud

https://soundcloud.com/twintwinkles