CCHub Logo CCHub Tailwind Collection
구성 요소 콘텐츠 링크로 건너뛰기 콘텐츠 링크로 건너뛰기

콘텐츠 링크로 건너뛰기

Neumorphism 디자인 스타일, 트라이어딕 색 구성표, 블로그 및 콘텐츠 웹 사이트를 위한 복잡한 레이아웃이 있는 Skip to Content Link Component. 여기에는 Tailwind CSS를 사용하는 반응형 디자인과 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<a href="#content" class="skip-to-content-link">
  Skip to Content
</a>

<style>
  .skip-to-content-link {
    position: absolute;
    top: -40px;
    left: 0;
    background-color: #5a8f7b; /* One color from a triadic scheme */
    color: #e0f7fa; /* Another color from a triadic scheme */
    padding: 8px 12px;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    /* Neumorphism styles */
    border-radius: 10px;
    box-shadow: 7px 7px 15px rgba(50, 50, 50, 0.2), -7px -7px 15px rgba(255, 255, 255, 0.7);
  }

  .skip-to-content-link:focus {
    top: 10px;
    /* Neumorphism inset effect on focus */
    box-shadow: inset 5px 5px 10px rgba(50, 50, 50, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.7);
  }

  /* Dark mode styles */
  .dark .skip-to-content-link {
    background-color: #2c5f2d; /* Darker shade of the triadic color */
    color: #b2ebf2; /* Lighter shade of the triadic color */
    box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5), -7px -7px 15px rgba(70, 70, 70, 0.7);
  }

  .dark .skip-to-content-link:focus {
     box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(70, 70, 70, 0.7);
  }

  @media (max-width: 768px) {
    .skip-to-content-link {
      padding: 6px 10px;
    }
  }
</style>

관련 구성 요소

Content Link Component(콘텐츠 링크 구성 요소)로 건너뛰기

Skip to Content Link 컴포넌트는 물리적 버튼과 유사한 스큐어모픽 요소로 디자인되었습니다. 구성 요소에는 파스텔 색 구성표, 호버 효과를 포함한 중간 정도의 복잡성 및 어두운 테마 지원이 있습니다.

열다

브루탈리스트: 콘텐츠 링크로 건너뛰기(포레스트/그린)

원시적이고 대담한 '콘텐츠로 건너뛰기' 링크 구성 요소는 예약/예약 시스템에 적합한 숲/녹색 색상 팔레트를 사용하여 브루탈리즘 스타일로 디자인되었습니다. 반응이 빠르고 다크 모드를 지원합니다.

열다

콘텐츠 링크로 건너뛰기

Skip to Content Link 구성 요소는 Material Design 원칙, 단색 색 구성표 및 어두운 모드 지원으로 스타일이 지정되었습니다. 전자 상거래 웹 사이트에 적합하며 JavaScript 없이 Tailwind CSS를 사용하여 구축되었습니다.

열다