ro CSS 트릭이 당신을 놀라게 할 것입니다

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

1. 뉴모프시임:

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

먼저 은은한 배경을 만듭니다. 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%);
}

가끔 한 컨테이너에 너비와 최소 및 최대 너비를 설정하는 경우, 다음과 같은 작동 방식을 사용하는 클램프()라는 또 다른 함수가 있습니다.

이전

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

이후

.container {
  width: clamp(400px,50vw,800px);
}

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

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

.container:not(:first-child) {
  background-color: blue;
}

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

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

4. 텍스트 그라데이션:

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

.text{
  color: linear-gradient(to right, red,blue);
}

대신 우리가 하는 일

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

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

결론:

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

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

에서 확인하세요.

위 내용은 ro CSS 트릭이 당신을 놀라게 할 것입니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!