자습서: CSS의 새로운 변형.

새로운 변체는 2020년 사용자 인터페이스/사용자 체험에 응용되는 새로운 추세이다.인스타그램에는 온전한 예가 있지만 이를 어떻게 하는지에 대한 정보는 별로 없다.

1 개념을 이해한다.

재료와 평면 디자인은 평면 디자인의 개념을 바탕으로 한다(재료 디자인은 입면 개념을 추가하지만 2차원 개념에는 적용된다).반면 2000년의 한 추세는 3d 표면의 착각에 기초한 것이다.평면과 3d 개념의 융합에서 새로운 형태가 탄생했다.
이 모든 것은 광원에 관한 것이다. 평면 디자인은 디자인에 음영이나 빛이 없다는 것을 의미한다.유일한 광원은 보통 밝은 대비색에서 나오지만 엄격하지 않다.컬러 바퀴는 그것의 완벽한 도구다.재료 디자인은 같은 개념을 사용하지만 낡은 패션 방식을 추가하고 초점 광원을 사용하여 내용에 대한 초점을 추가한다.그리고 내용을 향상시킨다.
향상된 재료 원소에 품질을 첨가하는 것은 새로운 형태로 이루어진 것이다.
빛이 디자인에 어떻게 작용하는가
Neomorphism은 모든 색상 기술에 적용되지만 단색 배색 방안에서 효과가 좋습니다.그러나 다음과 같은 규칙이 있습니다.

2. Da 규칙

새로운 형태는 광기술뿐만 아니라 색깔 규칙도 의미한다

2.1. 백인과 흑인은 더 이상 너의 친구가 아니다.

평면과 재질 디자인이 있고 흰색과 검은색이 거의 당신의 가장 좋은 배경이나 문자 친구입니다.새로운 형태에서는 금지된 색깔로 흰색보다 밝은 색깔도 검은색보다 어두운 색깔도 없기 때문에 질이 있는 3d플랫폼처럼 보이기 어렵다.컬러 표면은 도움이 될 수 있지만 최선의 해결 방안도 아니다.
흰색 배경은 두 정사각형을 평탄하게 보이고 컬러 사각형 음영은 음영 o광반사가 아니라 광원처럼 보인다

2.2. 새로운 도구, HSL 색상 모델 및 15% 광 규칙을 충족합니다.

대부분의 경우 프런트엔드 개발자와 UI 디자이너는 RGB 색상 모델을 사용하여 요소 색상을 정의합니다.그러나 새 동태를 사용하면 HSL 색상 모델을 사용하여 빛과 음영 색상을 정의할 수 있고 기본 색상과 보조 색상도 정의할 수 있습니다.
HSL은 색조, 포화도, 밝기를 나타내고 마지막 매개 변수는 제어해야 하는 벡터입니다. 이것이 바로 우리가 15% 규칙을 사용하는 이유입니다.빛 반사는 원본 색깔의 빛보다 15% 많고 음영의 빛은 15% 적다.프로젝트 배경에 맞는 흰색을 찾을 수 있도록 도와줄 수도 있다.

색상 바퀴(엘리언 소워즈가 창작), 배경은 명암의 극한이다.
하나의 임무에 대해 원색은 #00aaff가 될 것이다.만약 HSL 모델로 색을 분석한다면 HSL 벡터(200100%, 50%)를 발견할 수 있을 것이다. 이것은 빛반사와 음영 색이 각각 HSL(200100%, 65%)과 HSL(200100%, 35%)이거나 RGB#4dc3ff와 #0077b3에 있어야 한다는 것을 의미한다.이에 따라 div.card는 다음과 같이 해야 합니다.

각 정사각형은 서로 다른 높이를 가지고 있기 때문에 더 많은 모호함을 추가하여 재료에 유사한 내용을 적용하였다
HSL 모델을 직접 사용하려면 SCSS 또는 더 적은 웹 스타일 사전 프로세서를 사용할 수 있습니다.SCS가 어둡고 밝아지면 제대로 작동하지 않을 수 있으므로 HSL 기능을 사용하는 것이 좋습니다.내연 스타일은 이 컴퓨터(React-Native, Vue-Native 또는 flatter)의 경우 HSL 함수를 사용할 수 있습니다.

2.3. "내 공간이 필요해" 규칙.

Skeuomorphism은 작은 부품에 관한 것으로 그 중에는'유리'원소가 많아서 어떤 미니멀리즘 디자이너도 눈물을 흘린다.

그러나 걱정하지 마라. 신형태주의는 현실을 만지는 미니멀리즘이다.이것은 그것의 표면에 어떤 느낌의 무늬가 있다는 것을 의미한다.
그러나 프로젝트마다 정확한 공간량이 있다면 작업할 수 있다.더 많은 관심을 필요로 하는 항목에만 승진을 추가합니다.
Instagrams 게시물을 보면 다음과 같은 연구 사례를 볼 수 있습니다.

우리 인코딩합시다!

1. 
   

   일부 색상을 선택하고 밝기가 15%-85% 사이인 색상을 기억하십시오.권장 사항: 부드러운 색상 사용
   
   

   
   

    Background Colour: #262626 HSL(200, 0, 15)
    Text and Icon Colour: #d9d9d9 HSL(200, 0, 85)
   

2. 
   

   이 색상을 기반으로 빛 반사와 음영 색상은 반드시
   
   

   
   

    Light Colour: #4d4d4d HSL(200, 0, 30)
    Shadow Colour: #000000 HSL(200, 0, 0)
   

3. 
   

   같은div에 두 개의'boxshadow'를 추가하고 4px의 x, y의 편이량을 음영으로 하고 -4px를 광반사로 한다.이 두 가지 상황에서 8px의 모호함을 추가합니다
   

   
   

    div.card{
         background: #262626
         box-shadow: 
              #000000 4px 4px 8px,
              #4d4d4d -4px -4px 8px;
         } 
   

   여기 결과의 작은 예가 하나 있습니다:

   
   

   
   

   
   

   추가 장점: 가장자리에 모호함을 추가하고div에 작은 반경 경계를 추가하면 더욱 부드러운 고도 정의를 얻을 수 있습니다