HTML + CSSLiquid Glass
Icônes en verre clair à bord lumineux
Des icônes en verre clair dont le bord s’allume là où tombe la lumière ; elle suit le curseur et se teinte.
Réglages
16px
1x
8px
Code
<div class="uvq11-ico"><div class="wp" aria-hidden="true"></div><div class="gr"><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 12c0-3 1-6 3.5-6S17 10 12 12zM12 12c3 0 6 1 6 3.5S14 17 12 12zM12 12c0 3-1 6-3.5 6S7 14 12 12zM12 12c-3 0-6-1-6-3.5S10 7 12 12z"/></svg></span><span class="nm">Photos</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z"/><circle cx="12" cy="11" r="2.2"/></svg></span><span class="nm">Plans</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg></span><span class="nm">Musique</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4h12v16H6zM9 9h6M9 13h6M9 17h3"/></svg></span><span class="nm">Notes</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 7.5V12l3 2"/></svg></span><span class="nm">Horloge</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="9" r="3"/><path d="M9 3v1M3 9h1M4.8 4.8l.7.7M13.2 4.8l-.7.7M8 19h9a3.5 3.5 0 0 0 0-7 5 5 0 0 0-9.6 1.5A2.8 2.8 0 0 0 8 19z"/></svg></span><span class="nm">Météo</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8h3l1.5-2h7L17 8h3v11H4z"/><circle cx="12" cy="13" r="3.2"/></svg></span><span class="nm">Appareil photo</span></button><button type="button" class="ap"><span class="gl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8"/></svg></span><span class="nm">Réglages</span></button></div><div class="md" role="radiogroup" aria-label="Style des icônes"><label><input type="radio" name="uvq11-ico-m" value="c" checked><span>Transparent</span></label><label><input type="radio" name="uvq11-ico-m" value="t"><span>Teinté</span></label></div></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 Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Une grille d’écran d’accueil au style d’icônes transparentes : chaque tuile est en verre dépoli avec flou d’arrière-plan, un dégradé conique sur un bord masqué qui s’éclaire du côté tourné vers la lumière et du côté opposé, et un léger brillant intérieur. Au repos, la lumière tourne lentement et, au survol, elle pointe vers le curseur.
Passez de transparent à teinté avec le sélecteur segmenté, réglez la teinte avec la couleur principale et ajustez le flou. Renommez les applis ou changez les icônes au trait pour créer un lanceur, un tableau de bord ou une vitrine d’applications.