1<article class="tp-card" tabindex="0">2 <div class="tp-3d">3 <div class="tp-shine" aria-hidden="true"></div>4 <div class="tp-media" aria-hidden="true">5 <div class="tp-orb"></div>6 <span class="tp-tag">-25%</span>7 </div>8 <div class="tp-body">9 <h3 class="tp-title">Nebula Headset</h3>10 <p class="tp-sub">Immersiver Raumklang · ANC</p>11 <div class="tp-foot">12 <div class="tp-price"><span class="tp-old">399€</span><strong>299€</strong></div>13 <button class="tp-btn" type="button">In den Warenkorb</button>14 </div>15 </div>16 </div>17</article>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Eine Glassmorphism-Karte mit einem Spotlight-Licht, das dem Mauszeiger folgt und den Rand zum Leuchten bringt.
Eine freistehende Premium-Karte mit einem flüssigen 3D-Neigungseffekt (Tilt). Beim Hovern verfolgt ein sanfter, holografischer Glanz den Mauszeiger. Die inneren Elemente (Icon, Text, Badge) haben eine eigene Z-Achsen-Übersetzung (Parallax), wodurch sie optisch aus der Karte heraustreten. Die JavaScript-Logik nutzt Event-Delegation und CSS-Variablen, sodass beliebig viele Karten dynamisch auf der Seite platziert werden können.