Jump to content
Sign in to follow this  
Ceubex

Reflet lumineux sur un bouton ou un logo

Rate this topic

Recommended Posts

Bonjour,

J'ai actuellement un client qui me demande de lui faire un bouton sur lequel passe une espèce de reflet de lumière toutes les deux secondes pour attirer l'attention du visiteur.

Savez vous comment on peut faire ça ? il faudrait que cela soit compatible avec la transparence.

Merci pour votre aide.

Share this post


Link to post
Share on other sites

Un GIF transparent animé? Un sprite avec du JS pour le faire changer?

Jacques.

Share this post


Link to post
Share on other sites

Ah un sujet qui m'intéresse. Ca fait longtemps que je veux faire un truc comme çà simplement. Juste une étincelle ce serait bien aussi, non ? Avec le CSS3 que je ne connais pas bien, ya peut-être moyen maintenant ?

Share this post


Link to post
Share on other sites

En HTML5/CSS3, ça doit être possible, puisqu'on peut faire des animations avec.

Mais en l'état actuel des choses (HTML5/CSS3 pas forcément supporté à 100% par tous les navigateurs), il est préférable d'opter pour un gif transparent.

Share this post


Link to post
Share on other sites

Un gif animé ou du flash c'est comme vous voulez.

C'est pour faire une étincelle ou une truc qui passe en brillant rapidement en effet.

Le problème c'est que ça peux faire du boulot mine de rien. Il n'y a pas un truc pour faire ça rapidement ?

Share this post


Link to post
Share on other sites
Un gif animé ou du flash c'est comme vous voulez.

Nous on ne veut rien, c'est à toi de choisir.

D'après ce que tu décris, je pense que le plus simple serait de faire une gif animée. Avec Photoshop ou The Gimp, ça ne devrait pas être bien long.

Share this post


Link to post
Share on other sites

Ca dépend du détail de l'effet, mais on n'a rien sans rien, faire un "truc brillant passant rapidement" sur un bouton peut effectivement représenter quelques heures de travail si on veut un bon rendu. :)

Moi je déconseille un élément Flash rien que pour un bouton, c'est contraignant, chiant à intégrer et finalement pas obligatoire. Alors juste pour un simple bouton...

En revanche, il est possible de faire l'effet en Flash et de l'exporter en Gif Animé, et ça, ça reste encore la meilleure solution à mon avis pour un élément isolé d'un site comme un bouton. ^^

Un "truc" pour faire ça rapidement... Moi, là, comme ça... je vois pas. Il existe bien des sites et logiciels proposant de créer des Gifs à partir d'image gratuitement, mais évidemment 1) il faut avoir les images et 2) le rendu reste pas terrible. Après, si vraiment tu penses que ça va te consommer trop de temps, tu peux toujours rémunérer un professionnel qui ferait ça pour toi rapidement. ;)

Share this post


Link to post
Share on other sites

Par contre au moment de l'enregistrement pour le Web Photoshop fait vraiment des choses bizarre. Il faut par exemple un tramage de transparence par diffusion, c'est-à-dire que la transparence de mon calque blanc-transparent dégradé devient un ensemble de petit points (comme du bruit). Ca fait assez moche et j'ai passé une heure à essayé d'arranger ça pour un résultat nul.

Peut-être qu'il vaut mieux flash quand même. Tous les boutons de ce type que j'ai vu sur le Web étaient en flash.

Share this post


Link to post
Share on other sites

N'oublie pas que le GIF est limité à 256 couleurs. Si ton bouton original est déjà très coloré, avec l'effet en plus, ça peut exiger plus de couleurs que disponible, et forcément, ça se finit par un tramage. De surcroit, il est possible qu'il soit un peu trop restrictif et qu'il essaie d'utiliser la palette "web safe" qui n'est pas forcément adaptée (et qui n'a plus grand intérêt de nos jours).

Suivant l'outil utilisé, le mode d'édition peut aussi affecter le résultat. Je ne pense pas que ce soit le cas de Photoshop, mais dans certains outils, si tu pars d'une image 8 bits (indexée, quoi), il vaut mieux passer en 24/32 bits (RVB), faire les modifs, puis reconvertir. Le fait de faire la conversion avant la sauvegarde peut aussi avoir un effet (il y a différentes façons de faire la conversion RVB -> indexé qui ne donnent pas toutes les mêmes résultats).

Evidemment, note aussi que le GIF ne supporte pas de "niveaux de transparence": il y a une couleur précise qui est transparente, et puis c'est tout, il n'y a pas de canal alpha comme en PNG.

Jacques.

Share this post


Link to post
Share on other sites

il n'y a pas de canal alpha comme en PNG.

A quand la possibilité de faire des PNG animés ? :) (ou équivalent ;) )

Ca serait chouette quand même. Les GIF animés commencent réellement à se faire vieux...

Share this post


Link to post
Share on other sites

Ca existe déjà, mais le support reste limité, en particulier ce n'est pas supporté par IE ni Safari.


/>http://en.wikipedia.org/wiki/Animated_PNG

Ceci dit, comme indiqué précédemment, il est possible d'utiliser la technique du "sprite": tu mets les différentes étapes de l'animation les unes en dessous des autres dans un seul PNG, tu mets ça en background de ton élément, et ensuite en JS tu fais évoluer le background-position.

Jacques.

Share this post


Link to post
Share on other sites

Ceci dit, comme indiqué précédemment, il est possible d'utiliser la technique du "sprite": tu mets les différentes étapes de l'animation les unes en dessous des autres dans un seul PNG, tu mets ça en background de ton élément, et ensuite en JS tu fais évoluer le background-position.

C'est vrai que cette astuce passerait très très bien.

Je suis presque sûr qu'il doit dors et déjà exister des plugins JQuery qui doivent faire ça et qui permettent de spécifier un temps de défilement et ce genre de choses...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...