Zur Inhaltslink-Komponente springen
Ein visuell ansprechender Link "Zum Inhalt springen" im 3D-Stil, der Benutzern hilft, Navigationsmenüs auf einer Social-Media-Oberfläche zu umgehen. Die Komponente verwendet ein komplementäres Farbschema (Blau und Orange) mit einem 3D-Effekt, der durch Schatten und Transformationen erzielt wird. Mit responsivem Design und Unterstützung für dunkle Themen. Der Link wird im fokussierten oder aktiven Zustand oben links im Ansichtsfenster fixiert angezeigt, sodass er für die Tastaturnavigation leicht zugänglich ist, während er bei Nichtgebrauch unauffällig bleibt.
HTML-Code
<!-- Skip to Content Component with 3D Design -->
<div class="relative z-50">
<!-- Skip link - hidden by default but visible on focus -->
<a href="#main-content"
class="fixed top-4 left-4 transform -translate-y-20 focus:translate-y-0 transition-transform duration-200 ease-in-out
p-3 rounded-lg
text-white font-bold
bg-blue-600 hover:bg-blue-700
dark:bg-orange-500 dark:hover:bg-orange-600
focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-blue-400
shadow-[0.5rem_0.5rem_0px_0px_rgba(237,137,54,0.8)] dark:shadow-[0.5rem_0.5rem_0px_0px_rgba(37,99,235,0.8)]
transform-gpu hover:translate-y-1 hover:translate-x-1 hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(237,137,54,0.8)] dark:hover:shadow-[0.3rem_0.3rem_0px_0px_rgba(37,99,235,0.8)]
text-sm md:text-base">
Skip to Content
</a>
</div>
<!-- Simulated content for demonstration purposes -->
<header class="w-full bg-gray-100 dark:bg-gray-800 p-4">
<nav class="flex justify-between items-center">
<div class="text-blue-600 dark:text-orange-500 font-bold text-xl">SocialApp</div>
<div class="space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Home</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Profile</a>
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-orange-500">Messages</a>
</div>
</nav>
</header>
<!-- Main content that will be skipped to -->
<main id="main-content" class="container mx-auto p-4 mt-4">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Your Feed</h1>
<!-- Sample social media post -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">Just discovered this amazing 3D design technique! #design #creativity</p>
<img src="https://picsum.photos/seed/picsum1/600/400" alt="Post image" class="w-full h-64 object-cover rounded-lg mb-3">
<div class="flex space-x-4">
<button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
Like
</button>
<button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
Comment
</button>
<button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
Share
</button>
</div>
</div>
<!-- More content to make skipping meaningful -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Suggested Friends</h2>
<div class="space-y-3">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
</div>
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="User avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="font-semibold text-gray-800 dark:text-gray-200">Sarah Williams</p>
</div>
<button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full text-sm">Follow</button>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Trending Topics</h2>
<div class="space-y-2">
<div class="text-blue-600 dark:text-orange-500 hover:underline">#3DDesign</div>
<div class="text-blue-600 dark:text-orange-500 hover:underline">#TailwindCSS</div>
<div class="text-blue-600 dark:text-orange-500 hover:underline">#WebAccessibility</div>
<div class="text-blue-600 dark:text-orange-500 hover:underline">#ResponsiveDesign</div>
</div>
</div>
</div>
</main>Verwandte Komponenten
Zur Inhaltslink-Komponente springen
Eine visuell ansprechende "Skip to Content"-Link-Komponente, die für Dashboards mit Schwerpunkt auf Mikrointeraktionen entwickelt wurde, unter Verwendung eines komplementären Farbschemas und der Unterstützung des Dunkelmodus durch Tailwind CSS.
Zum Content Link springen - Retro Monochromatic
Weiter zu Content Link Component mit Retro-/Vintage-Design, monochromatischem Farbschema und einfacher Komplexität.
Zur Inhaltslink-Komponente springen
Eine Komponente vom Typ "Zum Inhaltslink springen", die mit skeuomorphen Elementen entworfen wurde, die einer physischen Schaltfläche ähneln. Die Komponente verfügt über ein pastellfarbenes Schema, eine moderate Komplexität einschließlich Hover-Effekten und Unterstützung für dunkles Design.