Crystal Effect
Un cristal hexagonal translucide, aux reflets bleus, violets et verts, qui pivote lentement sur lui-même dans une légère perspective, entouré d'une lueur bleutée.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La forme .xtl-shape (150×200 px) est découpée en hexagone par clip-path. Elle superpose deux couches : un dégradé blanc (40 %, 10 %, 30 %) avec une lueur blanche intérieure, puis, 3 px en retrait, un dégradé bleu, violet et vert qui donne la couleur du cristal.
L'animation xtlTurn la fait pivoter sur l'axe vertical de 0 à 180° puis la ramène, en 10 secondes, avec un petit basculement avant-arrière de 5°. À mi-course, le cristal se présente de profil et s'affine fortement avant de montrer sa face arrière.
Deux réparations : le conteneur .xtl-crystal porte maintenant une perspective de 600 px (sans elle, la rotation se voyait comme un simple aplatissement) et la lueur bleutée passe par filter: drop-shadow sur ce conteneur. Elle était auparavant une ombre de la forme, entièrement coupée par le découpage, donc invisible.
Accessibilité
- Décoratif : le cristal porte
aria-hidden="true"; il n'a ni texte ni rôle. Si vous l'utilisez comme logo, mettez le nom dans le lien qui l'entoure. - Mouvement réduit : avec
prefers-reduced-motion: reduce, le cristal s'arrête légèrement tourné (25°), ce qui garde l'impression de volume (mesuré : 2 animations en boucle → 0 pour deux copies). - Pas de clignotement : la rotation est lente et les couleurs restent pâles ; le passage de profil ne produit pas de flash.
- Contraste : les faces sont blanches et transparentes ; sur un fond clair, le cristal disparaît presque. Prévoyez un fond sombre ou des couleurs plus denses.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151 et Firefox 153 : 0 erreur, rotation en perspective, lueur visible, deux copies indépendantes, rien qui déborde à 390 px. Dans le WebKit 26.5 de Playwright, une image figée à mi-rotation ressemble à celle de Chromium, mais cet outil n'est pas une référence fiable pour la 3D CSS : la perspective reste non vérifiée pour Safari.
Sans clip-path, le cristal devient un rectangle aux mêmes dégradés ; sans transformations 3D, il s'affine et s'élargit sans profondeur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0268-root">
<div class="xtl-crystal" aria-hidden="true">
<div class="xtl-shape"></div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
--xtl-w et --xtl-h |
150px et 200px |
Taille du cristal (il ne dépasse jamais la largeur de son conteneur). |
--xtl-depth |
600px |
Perspective : plus petite, la rotation est plus marquée ; none rend l'ancien rendu aplati. |
--xtl-speed |
10s |
Durée d'un aller-retour complet (0 → 180° → 0). |
--xtl-face-1 à --xtl-face-3 |
blanc à 40 %, 10 %, 30 % | Dégradé de la couche extérieure, qui fait les reflets. |
--xtl-tint-1 à --xtl-tint-3 |
bleu à 30 %, violet à 20 %, vert à 30 % | Couleur du cœur du cristal : violet pour une améthyste, rose pour un quartz. |
--xtl-glow |
rgba(100,200,255,.3) |
Couleur de la lueur autour du cristal ; transparent pour la supprimer. |
--xtl-bg et --xtl-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour un logo ou une icône. |
FAQ
--xtl-speed) le rend encore plus discret.aria-label). Le cristal étant masqué aux lecteurs d'écran, c'est le lien qui donne l'information.
