コンテンツリンクにスキップする
Glassmorphismでスタイル設定されたレスポンシブな「コンテンツへスキップ」リンクコンポーネントで、補完的な配色、適度な複雑さ、およびビジネス/企業のWebサイトに適したダークモードのサポートを実装しています。このコンポーネントは、Tailwind CSSクラスを使用して純粋にHTMLで実装され、JavaScriptは必要ありません。
HTMLコード
<a href="#content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:rounded-md focus:text-white focus:bg-black focus:bg-opacity-30 focus:backdrop-filter focus:backdrop-blur-lg focus:shadow-lg dark:focus:text-black dark:focus:bg-white dark:focus:bg-opacity-30 dark:focus:backdrop-filter dark:focus:backdrop-blur-lg dark:focus:shadow-lg">Skip to content</a>関連コンポーネント
コンテンツリンクコンポーネントにスキップする
物理ボタンに似たスキューモーフィック要素で設計された Skip to Content Link コンポーネント。このコンポーネントには、パステル調の配色、ホバー効果を含む適度な複雑さ、ダーク テーマのサポートがあります。
コンテンツリンクコンポーネントにスキップする
視覚的に魅力的な 3D スタイルの [コンテンツにスキップ] リンクは、ユーザーがソーシャル メディア インターフェイスのナビゲーション メニューをバイパスするのに役立ちます。このコンポーネントは、補色 (青とオレンジ) を使用し、影と変換によって 3D 効果を実現します。レスポンシブデザインとダークテーマのサポートを備えています。リンクは、フォーカスされているときやアクティブになっているときはビューポートの左上に固定されているように見えるため、キーボード操作に簡単にアクセスでき、使用していないときは目立たないようになっています。
コンテンツリンクコンポーネントにスキップする
Glassmorphism Skipは、曇りガラス効果、ぼかし、応答性、およびTailwind CSSを使用したダークモードのサポートを特徴とするコンテンツリンクにスキップします。