서리낀 글래스(Frosted Glass, Aero Glass) 효과 내는 방법

1. 서론

서리낀 글래스(Frosted Glass) 효과 를 다음과 같이 간단하게 CSS 를 사용하여 구현할 수 있다.
이 방법으로 Windows의 Aero Glass 효과를 구현할 수 있다.

2. 구현 방법

방법 1

이 방법은 다양한 웹 브라우저에서 지원되는 방법이다.

하지만 방법 2 보다 구현하기 더 복잡하다.

서리낀 글래스 효과를 적용시킬 <div>객체를 다음과 같이 생성한다.

<div class="container"></div>

다음과 같이 <body>태그에 원하는 이미지를 적용시킨 후, 다음과 같이 CSS 스타일을 적용시켜 준다.

body {
    background-attachment: fixed;
}

다음과 같이 box-shadow 스타일을 사용하여 몇가지 색상을 추가해 준다.

.container:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
}

서리낀 효과(Frosted Effect)를 주기 위해 다음과 같이 블러 필터(Blur Filter) 를 적용시켜준다.

.container:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
}

부모 요소와 서리낀 효과를 적용시킬 요소의 상속 관계를 형성시키기 위해 다음과 같은 스타일을 적용시켜준다.

.container {
    background: inherit;
}

.container:before {
    background: inherit;
}

테스트

HTML 코드

<div class="container"></div>

CSS 코드

body {
    background: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3) no-repeat;
    /* Keep the inherited background full size. */
    background-attachment: fixed; 
    background-size: cover;
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container {
    width: 30rem;
    height: 20rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
    border-radius: 5px;
    position: relative;
    z-index: 1;
    background: inherit;
    overflow: hidden;
}

.container:before {
    content: "";
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
    margin: -20px;
}

실행 결과 열기/닫기

방법 2

다음과 같이 방법 1 보다 더 적은 스타일을 사용하여 서리낀 글래스 효과를 구현할 수 있다.

하지만, 방법 1에 비하여 이 스타일을 구현하는 지원하는 웹 브라우저 수가 적다.

방법1 과 비슷하게 필요한 요소를 생성하고 스타일을 적용시켜준다.

<div class="container"></div>

이 방법은 CSS의 스타일 속성인 backdrop-filter를 사용한다.

이 속성을 적용시키기에 앞서 다음과 같이 .container 객체에 스타일을 지정해준다.

.container {
    background-color: rgba(255, 255, 255, .15);
}

그리고 다음과 같이 필터를 적용시켜준다.

.container {
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(5px);
}

테스트

HTML 코드

<div class="container"></div>

CSS 코드

body {
    background: url(https://images.unsplash.com/photo-1544306094-e2dcf9479da3) no-repeat;
    background-size: cover;
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.container {
    width: 30rem;
    height: 20rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
    border-radius: 5px;
    background-color: rgba(255, 255, 255, .15);

    backdrop-filter: blur(5px);
}

실행 결과 열기/닫기

참고 : click

728x90

그리드형(광고전용)

저작자표시 비영리

'Programming > CSS3' 카테고리의 다른 글

[CSS] 다크/라이트 모드 구현 방법 (0)	2022.09.27
[CSS] 글자/단어 사이의 간격 조정하기 (letter-spacing, word-spacing) (0)	2022.09.21
[CSS] 링크 밑줄(Underline) 없애기 (0)	2022.04.10
[CSS] placeholder 속성에 스타일 적용하기 (0)	2022.03.30
CSS 요점 정리 (0)	2017.05.20
글꼴 다운로드 (0)	2017.05.19
플렉서블 박스 (Flexible Box) (0)	2017.05.19
CSS3의 그라데이션 (0)	2017.05.19