Content Link Component - Skeuomorphism Grayscale로 건너뛰기
블로그 콘텐츠를 위한 회색조의 스큐어모픽 디자인이 있는 간단하고 반응이 빠른 "콘텐츠로 건너뛰기" 링크. 다크 모드 지원이 포함됩니다.
HTML 코드
<a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-gray-200 focus:text-gray-900 focus:px-4 focus:py-2 focus:rounded focus:shadow-lg dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:focus:shadow-xl">Skip to content</a>
<main id="main-content" class="p-4">
<!-- Your main content goes here -->
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Main Content Area</h1>
<p class="text-gray-700 dark:text-gray-300">This is the main content of the page. The "Skip to content" link will bring you here.</p>
</main>관련 구성 요소
Content Link Component(콘텐츠 링크 구성 요소)로 건너뛰기
Skip to Content Link 컴포넌트는 물리적 버튼과 유사한 스큐어모픽 요소로 디자인되었습니다. 구성 요소에는 파스텔 색 구성표, 호버 효과를 포함한 중간 정도의 복잡성 및 어두운 테마 지원이 있습니다.
Content Link Component(콘텐츠 링크 구성 요소)로 건너뛰기
시각적으로 매력적인 3D 스타일의 콘텐츠로 건너뛰기 링크는 사용자가 소셜 미디어 인터페이스에서 탐색 메뉴를 우회할 수 있도록 도와줍니다. 이 구성 요소는 그림자와 변형을 통해 얻을 수 있는 3D 효과와 함께 보색 구성표(파란색 및 주황색)를 사용합니다. 반응형 디자인과 어두운 테마 지원이 특징입니다. 링크는 초점이 맞춰지거나 활성화될 때 뷰포트의 왼쪽 상단에 고정되어 표시되므로 키보드 탐색에 쉽게 액세스할 수 있으며 사용하지 않을 때는 눈에 거슬리지 않습니다.