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(콘텐츠 링크 구성 요소)로 건너뛰기

Tailwind CSS를 사용하여 반응형 효과 및 어두운 테마 지원과 함께 3D 스타일의 '콘텐츠로 건너뛰기' 링크를 제공하는 웹 구성 요소입니다.

열다

콘텐츠 링크로 건너뛰기

반응형 Skip to Content Link 구성 요소는 파스텔 색상 구성표가 있는 스큐어모픽 스타일로 디자인되었습니다. 이 구성 요소는 블로그 및 콘텐츠 사용을 위한 것이며 다크 모드에 대한 지원을 포함합니다.

열다

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

시각적으로 매력적인 '콘텐츠로 건너뛰기' 링크 구성 요소는 마이크로 인터랙션에 중점을 둔 대시보드용으로 설계되었으며, Tailwind CSS를 통한 보색 구성표 및 다크 모드 지원을 활용합니다.

열다