퍼블리싱
[Css] 배경 blur 버튼 만들기 (애플 공식 홈 st. 글래스모피즘버튼 )
lionbum
2023. 11. 13. 14:11
버튼 뒤쪽에 blur 효과가 적용되어 버튼을 좀더 도드라져 보이게 합니다.
공식 애플 웹사이트를 방문했다가 위와같은 스타일의 버튼이 적용되어 있는 것을 보고 만들어 봤어요!
사실 이 스타일은 글래스모피즘 이라고 불립니다.
사용되는 css
backdrop-filter
요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다.
요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야 합니다.
적용 방법
backdrop-filter: blur(2px);
버튼으로 만들기
결과
css
.btn_blur {
backdrop-filter: blur(4px);
background-color: rgb(66 66 69/70%);
border-radius: 32px;
box-shadow: inset 0 0 1px rgb(232 232 237/11%);
color: rgb(245, 245, 247);
display: flex;
will-change: transform;
z-index: 1;
transition: linear 250ms background-color;
padding: 10px 50px;
}
저는 글래스모피즘 디자인을 참 좋아하는데요
이처럼 CSS에서도 blur 효과를 활용하여 글래스모피즘 디자인을 충분히 구현할 수가 있습니다!
이외에도 filter 효과를 활용하여 블러 효과를 줄수 있습니다.
이와 관련한 글도 참고 해보세요!
[CSS 활용] css로 블러 효과(포토샵 blur 효과 주기)
저도 다음에 써먹어 봐야겠어요!!!ㅎㅎ
😘
참고 사이트
728x90
반응형