Claymorphism - 2022 UI 트렌드

HTML과 CSS를 사용하여 클레이모픽 UI를 만드는 방법?! 이 놀라운 2022 UI 트렌드에 대해 자세히 알아보세요.

저는 매년 널리 사용될 UI 트렌드를 살펴보는 것을 항상 좋아합니다. 작년에 우리는 흥미로운 디자인을 가진 Glassmorphism을 가졌습니다. UI 블록이 유리처럼 보이는 유리에서 영감을 받았습니다. 올해 새롭게 떠오르는 디자인은 클레이모피즘(Claymorphism)입니다. 이 기사를 읽고 이 UI 트렌드에 대해 자세히 알아보고 HTML 및 CSS를 사용하여 구현하십시오.

작년에 우리는 웹사이트와 애플리케이션의 UI 디자인에 많은 3D 이미지가 사용되는 것을 보았습니다. 3D 디자인은 부드럽고, 그림자 디테일이 깔끔하며 깊이가 많습니다. 평평하지 않고 둥글고 가벼우며 장난스럽고 친근한 느낌을 줍니다.
Claymorphism에는 이러한 모든 속성이 포함됩니다. 클레이모픽 요소에는 내부 및 외부 그림자가 있어서 구름처럼 가볍고 보송보송한 느낌을 줍니다. 또한 블록이 팽창된 것처럼 보이게 하는 부드러운 둥근 모서리가 있습니다.

클레이모픽 디자인의 주요 요소

큰 둥근 모서리.

첫 번째 내부 그림자는 블록의 상단과 왼쪽 내부를 덮는 약간 탁한 색조를 가집니다.

두 번째 내부 그림자의 색상이 첫 번째 내부 그림자보다 약간 어둡습니다. 이것은 블록의 아래쪽과 오른쪽 안쪽에 배치됩니다.

블록의 외부 그림자는 디자인을 돋보이게 하는 멋진 효과를 제공합니다. 외부 그림자가 더 넓게 퍼져 있고 동일한 x 및 y 값이 지정됩니다.

팽창된 모양을 제공하기 위해 가장자리가 둥글고 블록의 측면이 돔처럼 부풀어 있습니다.

아래는 그림 표현입니다

암호

이제 CSS를 사용하여 UI 요소를 빌드하는 방법을 살펴보겠습니다.

border-radius : 이 속성은 요소의 가장자리를 둥글게 만드는 데 사용됩니다. 약간 더 큰 값을 지정하면 요소가 가볍고 부드럽게 보여야 합니다.

background : 요소 배경에 적합한 색상을 선택합니다.

box-shadow : UI 요소의 가장 중요한 속성입니다. 내부 및 외부 그림자인 두 가지 유형의 그림자가 필요합니다. 요소에 내부 그림자를 제공하려면 키워드 inset 를 지정하십시오.

이제 요소를 빌드하는 데 필요한 CSS 속성을 이해했으므로 코드를 살펴보겠습니다.

.block{
  background:#fff;
  border-radius: 25% ;
  box-shadow: 20px 20px 16px 5px rgba(0, 21, 16,0.2), 
inset 12px 8px 16px 5px rgba(60, 165, 92,0.2), 
inset -12px -8px 16px 5px rgba(60, 165, 92,0.4);
}

주의사항

올바른 배경을 선택하십시오. 가장 잘 어울리는 것은 부드럽고 유쾌한 밝은 색상입니다. 클레이모픽 요소에는 특징을 높이는 그림자가 있으므로 그림자를 칭찬하는 올바른 배경을 선택하는 것이 중요합니다. 단색, 그라데이션 및 이미지는 일반적으로 배경으로 사용됩니다.

클레이모픽 모양의 블록에 적합한 색상도 중요합니다. 밝은 색상이 가장 널리 사용됩니다. 그들은 눈에 즐겁고 그러한 요소에 필요한 장난기 있고 푹신한 표정에도 적합합니다.

내부 및 외부 그림자에 적절한 깊이와 확산을 제공합니다. 또한 그림자의 색상은 요소의 색상과 일치하고 보완해야 합니다.

둥근 모서리는 요소를 보송보송하고 가벼워 보이게 만드는 핵심 요소입니다. 따라서 더 작은 둥근 모서리를 제공하는 데 자신을 제한하지 마십시오.

요소에 테두리를 지정하지 않습니다.

Claymosrphism의 디자인 컨셉을 따르는 요소를 성공적으로 구축했습니다. 샘플을 구축한 후 웹 사이트 구축에 사용할 수 있는 다양한 방법에 대해 궁금했습니다. 다음은 몇 가지 아이디어입니다.

UI 카드

버튼 요소

3D 일러스트와 아이콘

양식 요소를 고정하는 요소로

점토모피즘을 사용하여 두 가지 유형의 UI 요소를 만들었습니다. 이 새로운 UI 트렌드를 사용하는 아이디어를 얻으려면 이 codepen 데모를 살펴보십시오.



이 글에 대한 여러분의 생각을 알려주세요!! 저는 Frontend에 대한 블로그를 작성하고 자주 트윗합니다.

건배 🎊