HTML + CSSOverlays
Bandeau d'annonce en haut
Une bande en haut traversée par un reflet, avec un lien vers la nouveauté et une croix qui la replie.
Réglages
16px
1x
Code
<div class="uv-oab"><div class="bn" role="region" aria-label="Annonce"><div class="in"><span class="tg">Nouveau</span><span class="tx">Nouveau : modèles de factures avec ton logo</span><a href="#">Voir les nouveautés</a><button type="button" class="x" aria-label="Fermer l’annonce"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div></div><div class="ap"><div class="nb"><i></i><i></i><i></i></div><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div></div><button type="button" class="fire">Afficher le bandeau</button></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Overlays
Voir tout : OverlaysOù l’utiliser
Les lancements, soldes ou changements de conditions méritent souvent un mince bandeau au-dessus de la navigation plutôt qu'un popup. Celui-ci utilise un dégradé entre tes deux couleurs avec un reflet doux qui le traverse, une étiquette Nouveau, le message et un lien. À la fermeture, la hauteur se replie en douceur et le contenu remonte sans à-coup.
Le repli anime les lignes de grille, il fonctionne donc avec n'importe quelle longueur de message. Mémorise la fermeture pour que les visiteurs ne le revoient pas.