Il y’a quelques mois, j’avais essayé de faire un effet de spot lumineux avec SVG. Pour expérimenter, j’ai voulu réaliser le même effet avec HTML, CSS et Javascript seulement. Mais avant de continuer l’explication, je vous donne le lien pour tester avec un Webkit récent (Safari4 ou Chrome) ou Firefox:
Donc, pour réaliser cette démo, j’ai mélangé les ingrédients suivants:
- des CSS gradients, pour générer le spot;
- des web fonts, pour avoir une jolie typographie;
- des CSS transforms, pour incliner le texte;
- des couleurs RGBA, pour avoir de la transparence;
- la propriété
pointer-events, pour pouvoir cliquer sous le spot - et un peu de Javascript, pour rendre ça interactif.
La raison pour laquelle cette démo ne fonctionne qu’avec Webkit, c’est que je n’ai pas trouvé comment réaliser le même dégradé radial avec Firefox. Je sais que Firefox les supporte, mais la syntaxe est différente et ne permet pas de définir la taille du dégradé manuellement.
J’ai dit une connerie, ça marche très bien sous Firefox grâce à Florent Verschelde.
Je pense qu’il doit y avoir encore plein d’autres manières de créer cet effet (avec du <canvas> par exemple). Vous feriez ça comment vous?
3 replies on “Créer un spot lumineux avec CSS3 et Javascript”
Essai de syntaxe avec linear-gradient, à creuser (j’ai repris et modifié un exemple de la doc de Mozilla, je sais pas trop à quoi correspond le 45deg dans cette histoire):
-moz-radial-gradient(
50% 50% 45deg,
circle closest-side,
transparent 0,
transparent 100px,
rgba(0, 0, 0, 0.8) 120px
)
Ça se rapproche, non?
En passant, je crois bien que la fonte ne passe pas car les fichiers donnent des erreurs 403 (problèmes de permissions?). Ce que tu ne vois peut-être pas si tu as installé League Gothic en local. 😉
S’il vous plaît excuser mon français. C’est super, je l’espère, ne vous dérange pas je l’ai utilisé sur mon site.