Glassmorphism: UI 추세
그 이름 자체가 경품인 유리 형태였다.이 UI 요소는 매끄러운 유리 기능과 유사하게 설계되었습니다.그 기본 사상은 투명한 유리 모양의 외관을 제공하기 위해 모호한 원소의 배경이다.
우리가 코드를 깊이 연구하기 전에, 몇 가지 예를 봅시다.
유리 형태의 디자인 특징
다음은 이 디자인의 몇 가지 특징으로 깔끔하고 명쾌한 유리 외관을 만드는 데 도움이 된다.
비밀 번호
먼저 HTML 요소를 분해합니다.우리는 단지 두 가지 요소만 있다.하나
<body>는 아버지 대상이고, 다른 하나<div>는 유리다.간단하죠?!CSS는 다음!!투명도, 모호 효과, 좋은 배경을 기억하는 것이 중요하다.준비됐습니다.
사용할 두 CSS 속성 보기
background: 이 속성을 사용하면 원소의 투명도를 증가시킬 것입니다.흰색은 rgba 형식을 사용합니다.투명한 배경을 제공하기 위해 알파 값을 추가합니다.backdrop-filter: 이 속성은 모호 효과를 추가하는 데 사용됩니다.그것은 대비도, 밝기를 바꾸고 색 변환을 실행할 수 있다.이러한 변경 사항은 요소 뒤의 모든 컨텐트에 적용됩니다.이런 효과가 작용하도록 하기 위해 중요한 디테일은 원소의 투명한 배경이다.이 값은 px 값에 표시됩니다.이 값이 높을수록 흐림 효과가 뚜렷해집니다.희미한 값을 증가시켜 유리를 모래유리처럼 느끼게 할 수 있다.브라우저 호환성을 살펴보겠습니다. 크롬, 엣지, Firefox, Opera, Safari에 적용됩니다.Android용 Internet Explorer 및 Firefox와 호환되지 않습니다.연결 대상MDN docsbackground-clip: 이 CSS 속성은 요소의 배경과 관계가 있습니다.이 옵션을 사용하면 요소의 배경이 경계 상자, 채우기 상자 또는 컨텐트 상자 아래로 확장되는지 여부를 결정할 수 있습니다.유리의 3D 효과를 얻기 위해 약간 다른 테두리 색을 사용하기 때문에 정확한 값은 padding-box입니다.브라우저 호환성에 대해 말하자면, 이것은 모든 사용 가능한 다른 브라우저에 적용된다.연결 대상MDN docs color: #ecf0f1;
border-radius: 8px;
padding: 20px;
background: rgba( 255, 255, 255, 0.2 );
border: solid 1px rgba(255,255,255,0.3);
backgroud-clip: padding-box;
backdrop-filter: blur(10px );
glassmorphism의 기본적인 실현을 구축한 후에, 나는 웹 페이지에서 그것을 어떻게 실제적으로 사용하는지 생각해 왔다.glassmorphism을 사용하는 웹 페이지를 만들 때 저는 여러분과 공유하고 싶은 경험과 교훈을 가지고 있습니다.
코드는 myGithub에 위탁 관리된다.다음은 이 페이지의 캡처입니다.
Freepik의 삽화입니다.대출 기록macrovector.
너무 좋아!!
이것이 바로 내가 유리 상태로 쏘는 것에 대한 견해다.우리는 이러한 스타일의 독특한 점을 토론하고 HTML과 CSS를 사용하여 효과를 재창조하는 방법을 연구했다.UI의 다음 단계가 될지 여부는 아직 확실하지 않습니다. 왜냐하면 UI는 한계가 있고 특정 상황에서만 잘 작동하기 때문입니다.그러나 모든 새로운 UI 트렌드처럼 디자이너들의 흥미를 끌었다.멋진 드리블, Behance 디자인을 보면서 영감을 얻고 자신만의 디자인을 만들 수 있습니다!
네가 이 문장을 좋아하길 바란다.
더 많은 유사한 문장을 팔로우해 주세요.다음까지^ ^
Reference
이 문제에 관하여(Glassmorphism: UI 추세), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/omeal/glassmorphism-upcoming-ui-trend-44fk텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
