HTML + CSSLiquid Glass

Porte vitrée à lettrage gravé

Le nom du café gravé dans la vitre, avec un reflet qui suit le curseur ; touchez la porte et elle s’ouvre.

Réglages

16px
1x

Code

<div class="uvq11-etch"><button type="button" class="dr" aria-pressed="false" aria-label="Ouvrir la porte du café"><span class="pane"><span class="et"><b>Café Norte</b><small>depuis 1962</small></span><span class="gl"></span></span><span class="hdl"></span><span class="tag"><span>Ouvert</span></span></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Liquid Glass

Voir tout : Liquid Glass

Où l’utiliser

Une porte de café en bois peint avec une grande vitre et son nom gravé à l’acide en italique à empattements. Les lettres sont remplies, grâce à background-clip, d’une copie floue et blanchie de l’intérieur alignée sur la scène derrière, si bien qu’elles évoquent le verre dépoli plutôt que la peinture. Un reflet doux glisse sur la vitre avec le pointeur.

Saisissez le nom de votre commerce et repeignez le cadre et les lampes chaudes. Toute la porte est un bouton bascule qui s’ouvre en perspective, et la pancarte suspendue se balance à chaque fois. Idéal pour un restaurant, un café ou une boutique.