Glassmorphism 자습서 - HTML과 CSS만으로 새로운 디자인 트렌드를 실현하는 방법을 배웁니다

6519 단어 cssglassmorphismtutorialhtml
만약 디자인과 관련된 사이트, 예를 들어Dribble를 자주 방문한다면 새로운 디자인 트렌드에 주의할 수 있을 것이다.뿐만 아니라 애플과 마이크로소프트 등 유명 브랜드들도 사용하고 있다.그게 도대체 뭘까요?
기술적으로 말하자면 그것은 투명한 배경으로 희미하고 음영적이며 옅은 색의 테두리를 첨가하여 컬러 배경 위의 카드 모양 요소에 사용한다.이것은 사용한 배경에 따라 사용자 인터페이스에 더욱 개성화된 외관을 만들 것이다.
이것은 유리 상태사라고 한다.
나는 디자인에 대한 세부 사항을 깊이 파고들고 싶지 않다. 아주 좋은 article on UX Collective은 이미 이 점을 광범위하게 포괄하고 있지만, HTML과 CSS로만 이 효과를 실현하는 방법을 보여 주고 싶다.
그러니까 더 이상 귀찮게 하지 말고 시작합시다!

배경 선택


우선 어떤 종류의 배경 이미지나 점차적인 변화도 일치하지 않는다는 것을 알아야 한다.선명한 색을 사용하도록 권장하고, 모양과 간단한 배경을 사용하는 것이 매우 상세한 이미지가 아니라 관건이 될 것이다.
이 경우, 우리는 실제 그림에 따라 불러오는 시간이 증가하지 않도록 배경 사다리 효과를 적용할 것입니다.
HTML 파일의 <body> 태그에 다음 스타일을 추가합니다.
body {
    background: #edc0bf;
    background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
    padding: 4.5rem;
    margin: 0;
}
대부분의 브라우저에서 modern browsers already support it을 지원하지만 브라우저에서 그래디언트 속성을 지원하지 않을 경우 첫 번째 배경 속성은 대체 속성으로 사용됩니다.
구글 글꼴의 인터와 같은 더 좋은 글꼴 스타일도 사용할 수 있다.<head> 태그에 다음 코드를 추가하여 글꼴을 포함합니다.
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];400;500;600;700&display=swap" rel="stylesheet">
그런 다음 CSS 파일의 바디 태그에 글꼴 시리즈를 적용합니다.
body {
    /* other styles */
    font-family: 'Inter', sans-serif;
}

카드 요소 만들기


카드에 HTML 표시를 설정하는 것부터 시작하겠습니다. 실제로는 glassmorphic 효과가 발생합니다.제목, 설명 및 링크를 추가하여 간단함을 유지합니다.
<div class="card">
    <h3 class="card-title">Glassmorphism is awesome</h3>
    <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
    <a href="https://ui.glass">Read more</a>
</div>
카드와 요소에 기본 스타일을 추가합니다.
.card {
    width: 400px;
    height: auto;
    padding: 2rem;
    border-radius: 1rem;
}

.card-title {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.2rem;
}

p, a {
    font-size: 1rem;
}

a {
    color: #4d4ae8;
    text-decoration: none;
}

지금은 좀 나아 보이지만 보시다시피 배경이 없습니다.왜냐하면 다음 절에서 효과를 추가하는 방법을 보여 드리겠습니다.

유리 변형 효과 추가


반투명 배경을 설정하고 백그라운드 필터 속성을 사용하여 배경에 모호한 효과를 추가하면 효과가 간단합니다.다음 속성을 에 추가합니다.CSS 파일의 카드 요소:
.card {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

경탄할 만한!배경이 지금 흰색과 반투명한 것을 볼 수 있지만 유리 형태 효과가 어디에 있는지 물어볼 수도 있다.
응, 너는 아직 그것을 볼 수 없다. 왜냐하면 원소 뒤에 그것을 창조할 충분한 독특한 것이 없기 때문이다.SVG 이미지를 사용하여 모양을 추가합니다.
다음 HTML 태그를 추가합니다.
<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">
다음 CSS 스타일을 추가합니다.
.shape {
    position: absolute;
    width: 150px;
    top: .5rem;
    left: .5rem;
}

이제 유리가 변형되는 모든 효과를 볼 수 있고, 뒤에는 더욱 독특한 모양과 투명한 카드의 모호한 효과가 있다.너무 좋아 보여요!
보시다시피 유리 변형 효과를 얻기 위해서는 디자인 요소를 정확하게 포지셔닝하는 데 많은 노력이 필요하지만, 일단 유리가 생기면 매우 독특해 보일 것이다.
원소 뒤의 형상은 무엇이든지 될 수 있다. 적어도 이론적으로는 이렇다.그러나 가장 좋은 것은 형상이나 삽화이다. 주로 디테일이 풍부하지 않은 요소들이다.
이 자습서의 코드를 사용하려면 다음과 같은 코드 펜 예가 있습니다.
Themesberg(Glassmorphism effect)의 코드펜 @themesberg 참조.

브라우저 지원


웹 개발자로서, 우리는 시장의 대다수 브라우저가 우리가 작성한 코드에 접근할 수 있도록 확보할 책임이 있다.이 강좌에서 사용하는 대부분의 CSS 속성은 backdrop-filter 속성을 제외한 모든 브라우저에서 지원됩니다.

IE 11은 전혀 지원하지 않습니다. 솔직히 말하면 앞으로 몇 년 동안 IE 11은 큰 영향을 미치지 않을 것입니다.Bootstrap 5가 도래함에 따라 그들도 no longer added support for IE 11>을 보유하고 있으며 마이크로소프트는 올해 8월에 IE 11에 대한 지원을 중지할 것이라고 발표했다.그러니까 너무 걱정하지 말았어야지.
그러나 여기에는 또 다른 가능한 문제가 있다.어떤 이유에서든지 Firefox는 기본적으로 backdrop-filter 속성을 사용하지 않습니다. 비록 브라우저가 이런 스타일을 지원하지만.우리는 머지않아 이 기능을 기본적으로 사용하기를 희망한다.
caniuse에서 브라우저가 지원하는 backdrop-filter 속성에 대한 더 많은 정보를 읽을 수 있습니다.
이를 바탕으로 유리 형태 효과는 생산 모델에 사용할 수 있습니까?대다수 상황에서 나는 그렇다고 말할 것이다.사실blur는 몇 개의 브라우저에서 모두 작용하지 않는다(더 정확히 말하면Firefox는 3.76%). 그러나 이것은 이러한 브라우저 중의 소수의 브라우저에 대해 인터페이스가 좋지 않다는 것을 의미하지 않는다.
기업급 응용 프로그램에서 무장애성은 중요한 요구이다. 나는 반드시 그것을 사용해야 하는 것은 아니지만 개인이나 상업 사이트, 심지어 일부 응용 프로그램 인터페이스에 사용할 수도 있다.

결론


나는glassmorphism이 재미있는 디자인 트렌드라고 믿는다. 이것은 틀림없이 현실 생활에서의 응용 프로그램에 사용할 수 있을 것이다. 그러나 이를 실현할 때 약간의 단점이 존재한다. 왜냐하면 디자인 경험이 필요하기 때문이다. Firefox 기본 지원도 단점이 있기 때문에 장래에 바뀔 수 있다.
나는 이 강좌가 당신이 새로운 디자인 추세와 웹 인터페이스에서 그것을 어떻게 실현하는지 더 많이 이해할 수 있도록 도와줄 수 있기를 바랍니다.당신들 앞에서 제가 당신들에게 프로젝트를 소개하겠습니다. 저는 줄곧 Themesberg의 동료와 함께 일하고 있습니다.그것은 유리 형태의 사용자 인터페이스라고 불린다.

기본적으로, 우리는 glassmorphism 디자인 원칙을 완전히 바탕으로 한 CSS UI 라이브러리를 구축하고 있지만, 이것은 자신의 디자인 사이트에 익숙하지 않은 개발자들이 더욱 쉽게 사용할 수 있다.이 프로젝트는 시작될 것이다.
업데이트를 등록하고 프로젝트 발표 시 ui.glass에 발표할 수 있습니다.
gem'data-confirm-modal'에서bootstrap풍 경보
페이스북은 어떻게'놀랍게'기계 학습을 하는가!

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage