Neumorphism 하는 방법?

뉴모피즘은 디자인의 요소가 배경에 부착된 것처럼 보이지만 배경 밖으로 돌출된 것처럼 보이는 디자인 트렌드였습니다(떠다니는 것처럼 보이지 않음).


uxdesign.cc

마찬가지로 neumorphism은 CSS를 사용하여 쉽게 달성할 수 있습니다.

.html 파일에 div를 만듭니다.

<div class="box neumorphic-shadows">Neumorphism is cool</div>

CSS에서
페이지의 배경색을 설정하십시오. 뉴모피즘은 일반적으로 어두운 배경에서 가장 잘 작동하지만 선호도에 따라 다릅니다.

body { 
    background-color: #1b1e27; 
  }

#1b1e27

이제 요소에 대해
여기서 기억해야 할 유일한 중요한 점은 전경 요소의 색상이 배경과 동일해야 한다는 것입니다. 그렇지 않으면 더 이상 뉴모피즘이 아닙니다.

.box{
    background: #1b1e27;

    // shaping the card 
    height: 5em;
    width: 20em;
    align-items: center;
    border-radius: 50px;
    display: flex;
    height: 200px;
    justify-content: center;
    margin-left: 35%;
    margin-top: 15%;
    padding: 10px 20px;  

    // font
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    color: rgb(255, 255, 255); // color of the font 

  }

이제 실제 효과를 얻으려면 상자 그림자를 추가해야 합니다.

.neumorphic-shadows{
    box-shadow:  5px 5px 31px #111319,
    -5px -5px 21px #373d5081;
  }

양의 픽셀 거리(5px)가 있는 그림자 값이 그림자를 제어합니다

.

픽셀 거리가 음수(-5px)인 그림자 값이 하이라이트를 제어합니다

.

부호와 값을 변경하여 각각 그림자/하이라이트의 방향과 거리를 변경할 수 있습니다.


최종 결과

각주:
작업을 훨씬 쉽게 하기 위해 neumorphism.io을 사용할 수 있습니다. 이 웹사이트는 뉴모픽 효과를 위한 CSS 코드를 생성합니다. 원하는 대로 효과를 조정하고 생성된 CSS 코드를 얻을 수 있습니다.