CSS(Cascading Style Sheet)는 웹 디자인에서 가장 널리 사용되는 기술 중 하나로 개발자가 시각적이고 반응성이 뛰어난 디자인을 만들 수 있도록 해줍니다. 웹 개발자로서 CSS를 마스터하는 것은 디자인 비전을 실현하고 모든 장치에서 좋은 사용자 경험을 보장하는 데 중요합니다. 다음은 CSS에 대해 알지 못할 수도 있는 몇 가지 팁입니다.

1. 신경형:

뉴모프심(Neumorphsime)은 소프트 UI 디자인을 의미하며 스큐어모피즘과 플랫 디자인을 결합한 인기 디자인 트렌드입니다. 이 스타일은 그림자와 하이라이트를 사용하여 부드러운 모양을 만듭니다. 작동 방식은 다음과 같습니다.

먼저 은은한 배경을 만듭니다. Neumotphsime으로 시작하려면 밝은 회색과 같은 부드러운 배경색을 선택하고,

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

그런 다음 이러한 스타일을 사용하여 요소를 만듭니다.

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

마지막으로 마우스를 가져갈 때 요소에 상자 그림자를 추가합니다.

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

그래서 우리는 이렇게 멋진 모습을 얻었습니다

당신도 이것을 만들 수 있습니다

이렇게 상자 그림자에 인셋을 추가하세요.

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() & Max() 및 클램프():

이러한 도구는 웹사이트와 앱을 더욱 동적이고 반응적으로 만들어줍니다. 이러한 함수를 사용하여 요소 크기 조정을 제어할 수 있습니다. 여기에서 유연한 타이포그래피를 만드는 방법은 다음과 같습니다.

min() 함수를 사용하면 여기 목록에서 가장 작은 값을 설정할 수 있습니다.

전에

.container {
  width:800px;
  max-width:90%;
}

후에

.container{
  width: min(800px,90%);
}

max() 함수는 min() 함수와 동일하게 작동하지만 목록에서 더 큰 값을 가져옵니다. 방법은 다음과 같습니다.

.container{
  width: max(800px,90%);
}

때때로 한 컨테이너에서 너비와 최소 및 최대 너비를 설정하는 경우, 작동 방식은 다음과 같습니다.

전에

.컨테이너 { 폭:50vw; 최소 너비:400px; 최대 너비:800px; }

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

후에

.컨테이너 { 너비: 클램프(400px,50vw,800px); }

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

삼. :Has() 및 :Not() 선택기:

:not() 선택기는 선택기 목록과 일치하지 않는 요소를 나타냅니다.

.container:not(:first-child) { 배경색: 파란색; }

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

:has() 선택기는 인수로 전달된 상대 선택기 중 하나라도 일치하는 경우 요소를 나타냅니다.

.container:has(svg) { 패딩: 20px; }

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

4. 텍스트 그라디언트:

이 트릭의 경우 이와 같이 텍스트 색상에 직접 그라디언트를 추가할 수 없습니다.

.텍스트{ 색상: 선형 그라데이션(오른쪽, 빨간색, 파란색); }

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

대신 우리가 하는 일

.텍스트{ 배경: 선형 그라데이션(오른쪽, 빨간색, 파란색); 배경 클립:텍스트; 색상:투명; }

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

짜잔, 정말 놀라운 효과를 얻었습니다

결론:

이 CSS 기술 중 하나를 익히면 웹 디자인 기술을 새로운 차원으로 끌어올릴 수 있습니다. 이러한 기술을 약간만 조정하면 시각적으로 놀라운 결과를 얻을 수 있고 디자인을 더욱 아름답고 사용자 친화적으로 만들 수 있습니다.

자세한 내용은 https://designobit.com/

에서 확인할 수 있습니다.