맞춤형 스크롤 바로 물건을 뿌리십시오

진정으로 매혹적인 스크롤 바와의 첫 만남은이 웹 사이트에있었습니다. 엄청나게 대담하고 시각적으로 눈에 띄는 스크롤 바를 특징으로하는 CSS- 트릭 v17의 출시는 지속적인 인상을 남겼습니다.

나는 놀랐다. 그런 디자인 요소 인 스크롤 바! - 전문 사이트에 영향을 미칠 수 있습니까? 미묘한 구배, 관대 한 곡선, 완벽하게 혼합 된 배경 및 만족스러운 두께는 대담하고 혁신적인 디자인 선택이었습니다. 스크롤 바의 촉각은 부인할 수 없었습니다. 그것은 단순히 시각적 무게를 이해하기 위해 상호 작용을 초대했습니다. 대담하고 아방가르드였으며 유쾌하게 접근 할 수 있었으며 오래된 브라우저에서 우아하게 저하되었습니다.

현재 CSS 트릭 스크롤바는 검은 색의 음소거 된 밝은 회색 인 더 세련되고 절제되어 있지만 여전히 브랜드 아이덴티티를 유지하고 미묘하게 그라디언트 효과를 보여줍니다. 그러나 산만 해지지 않아서 읽기 경험을 방해하지 않도록합니다. 우리의 효율성 중심 세계에서 MVP와 80/20 규칙을 우선시하는 Custom Scrollbar는 진정한 장인 정신을 나타냅니다. 그들은 단어가 단순히 전달할 수 없다는 세부 사항에주의를 기울입니다.

표준화 노력 (더 많은 것이 진행됨)은 API를 단순화했습니다 : 7 개의 의사 요소와 11 개의 의사 클래스는 거의 모든 측면과 스크롤 바의 상태를 목표로합니다. 이것은 광범위하게 들리지만 3 개만 마스터하는 것은 인상적인 커스터마이징에 충분합니다.

 <code>body::-webkit-scrollbar { /* required - the "base" of the bar - mostly for setting width */ } body::-webkit-scrollbar-track { /* the "track" of the bar - ideal for customizing "background" colors */ } body::-webkit-scrollbar-thumb { /* the draggable element—the star of the show! */ }</code>

이들은 선택된 다른 요소와 마찬가지로 작동하여 다양한 CSS 기술을 적용 할 수 있습니다. 미디어 쿼리, 백그라운드 기울기, 투명성 및 마진 (다양한 CSS 단위 사용)이 효과적으로 기능합니다. (그러나 모든 것이 가능하지는 않습니다. 나는 스크롤 바의 커서를 진정한 레트로 느낌으로 스타일링하고 싶습니다). Lea Verou의 CSS 배경 기울기를 실험하면서도 대중적이지 않은 개인화 된 스크롤 바 디자인 (엄지 손가락을위한 줄무늬 이발사 및 트랙의 투명한 하트)이되었습니다. 더 미묘한 버전을 구현 한 후 직장에서 모니 커 "Swyxbar"를 얻는 것은 의심 할 여지없이 독특했습니다.

모든 프론트 엔드 개발자는 적어도 한 번은 스크롤 바 사용자 정의의 경계를 푸시해야합니다. 그러나 특히 널리 사용되는 제품 (Google Wave가 시연 한대로)에서 사용자의 기대를 무시하는 스크롤 바를 만드는 것을 피하는 것이 중요합니다.

위 내용은 맞춤형 스크롤 바로 물건을 뿌리십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!