우리가 좋아하는 웹 사이트 : MD Nichrome

이 멋진 웹 사이트는 Mass-Driver의 MD 니크롬 서체를 보여줍니다. 영리한 애니메이션과 그래픽은 그 기능을 강조합니다.

이 애니메이션은 스타일을 사용합니다<video></video> 강요.

디자인에는 페이딩, 후행 문자와 같은 미묘하지만 효과적인 세부 사항이 포함됩니다. 이것은 CSS : white-space: nowrap; , overflow: hidden; , 그리고 선형 그라디언트 마스크는 페이드 효과를 생성합니다. 이것은 CSS 그라디언트를 브라우저 생성 이미지로 영리하게 사용합니다.

 H1 {
  흰색 공간 : Nowrap;
  오버플로 : 숨겨진;
  -webkit-mask-Image : 선형 그레이드 (오른쪽으로, 검은 75%, 투명);
}

이 사이트는 또한 글꼴의 OpenType 기능 (분수, 대체 문자)을 영리하게 보여줍니다. 호버링은 font-feature-setting: unset; .

 .요소 {
  글꼴 기능 설정 : UNSET;
}

그러나 가장 매력적인 측면은 배경입니다. 종이의 질감을 모방하는 반짝이는 애니메이션은 그라디언트로 겹쳐집니다. 이 쉬머는 PNG 이미지입니다. background-position 애니메이션 효과를 만듭니다. 미묘한 퍼지가 독특한 질감을 더합니다.

디자이너 Rutherford 열풍에 의해 설명 된 바와 같이 부드러운 배경 구배는 Bézier 곡선 기반 접근법을 사용하여 달성됩니다. 그는 선형 그라디언트에서 일반적인 "그레이 데드 존"문제를 해결하는 이러한 그라디언트를 생성하는 도구를 개발했습니다. 그의 도구는 컬러 보간을 미세한 제어 할 수있게합니다.

주목할만한 또 다른 기능은 끈적 끈적한 내비게이션입니다. 처음에 숨겨져있는 것은 스크롤에 나타나 타이포그래피에 대한 초점을 향상시킵니다. 이것은 CSS 스티커 포지셔닝으로 우아하게 구현됩니다.

 .Sticky-Thing {
  위치 : 스티커;
  상단 : 75px;
}

타이포그래피의 우선 순위를 정하는 미니멀리스트 디자인은 집중적이고 깔끔한 사용자 경험을 만듭니다.

위 내용은 우리가 좋아하는 웹 사이트 : MD Nichrome의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!