Bonsoir à tous,
 
Je cherche à faire depuis longtemps un effet de dégradé en CSS uniquement.
 
J'ai remarqué par hasard ce sur ce thème de dotclear que cet effet est présent sur les liens : http://www.svay.com/files/daClear/daClear.html (c'est la version de démonstration officielle)
 
j'ai un peu fouillé la CSS mais je ne saisis pas très bien comment le dégradé est réalisé   , si quelqu'un pouvait m'aider    
 
lien de la CSS: http://www.svay.com/files/daClear/daClear/style.css

je vois pas de dégradé...(a part peut être sur le titre...) en tout cas, c'est surement une image qui génère le dégradé.

Pas de degradé possible en CSS.
C'est un effet javascript.

a bah je viens de voir.
Je pense pas que ça soit du javascript, mais plutôt un gif tout con qui passe du blanc au transparent.
 
(cf http://www.svay.com/files/daClear/ [...] /menu.gif)

'fectivement

Heum mettons que le gif y soit pour quelque chose, mais il fais 1x1 pixel c'est pas lui qui gère tout le dégradé.
 
Et c'est un dégradé dynamique, pas statique comme le serait une image, c'est un effet progressif.

Pour te convaincre :

Pour résumé, c une image de 1 px de large et de la hauteur de la page, qui est répété autant de fois que necessairesur la largeur(pour un dégradé de haut en bas).

oui mais en fait non !
 
-> EnergieZ : Je sais lire le code source et je ne suis pas totalement novice en CSS, ce que tu dis là est basé sur ce que tu as lu dans le code.
Et l'image en question menu.gif fais bien 1 x 1 pixel (enregistrez là et ouvrez là avec n'importe quel logiciel de retouche pour vérifier).
 
En outre ce n'est pas avec une simple image de 1 x 1 pixel qu'on arrive à produire un dégradé pareil lors du hover sur les liens.
 
J'espère que tout le monde voit de quoi je veux parler, je le répète pour être sûr: lors du hover sur les liens du menu de droite, il y a bien un effet de dégradé progressif (comme l'effet de fondu des menus de Windows XP) et c'est ça que j'aimerais comprendre !

vu que ca ne fonctionne que sous IE et pas sous FF, ca doit etre un javascript moisi mais non, aucune balise script dans le code source ?
   
bizarre !

ça marche sous FF, sauf que le GIF n'a pas la même vitesse d'animation ! Donc tu vois beaucoup moins bien l'effet.

Hmm zapan, d'après ce que j'ai vu ce n'est pas un gif animé.
 
Et ce n'est pas du javascript, sinon j'aurais mis [JS] et pas [CSS]
 
Et ça marche sous tous les browsers de surcroit....c'est dingue ça, et personne ne sait ce que c'est  

bah ta mal vu    
 
j'déconne    
on parle bien du dégradé qui passe du blanc au bleu clair quand la souris passe sur un des liens de la colonne de droite ?  
 
bah c'est un gif animé    
 
 
ta mal vu, stou    
 
 
 
 
   

wé enfin ca fait 10 posts que je t'ai mis une source html complete qui met en exemple le truc ... (a tester sous FF ... IE a du mal avec le a:hover) mais le principe est la !

7 trames la gif annimée

bah non, ça a l'air de mieux marché sous IE justement.
Firefox ne 'rejoue' pas le GIF donc on a l'animation qu'une fois.
 
Je ne sais pas si c'est le comportement normal ou pas. (que le gif ne soit joué qu'une fois)
 
De toute façon, un site avec ou sans ce genre d'anim, ça ne change pas grand chose.

Ah bon effectivement c'est un gif animé mea culpa
 
Je suis déçu tiens, je pensais avoir mis la main sur une méthode de dégradé CSS  

recherche "fade everything" css , tu devrais trouver ton bonheur
( avec du js cela dit )
pour du :hover avec que des css, j'ai une idée mais ... non il vaut mieux pas ^^

Je trouve dommage que même la norme CSS 3 n'implémentera pas les dégradés, ça serait pourtant un gain de place et de transfert de générer un dégradé avec du code plutot que de placer des images à la place !
 
Pour les méthodes de fade in / out en javascript ce n'est justement pas ce que je cherche, car un site doit pouvoir conserver son aspect et son accessibilité même quand le JS est désactivé  

Je sais pas si 0x90 pensait à ca, mais on doit pouvoir appeller un nouveau div sur un hover... si on enchaine les div, on peut compter sur la lenteur de rendu des navigateurs pour donner un effet dégradé.

 
c'est quoi cette idée ???    
 
Les div, ils auront un sens sémentique pour ta page ?    
 
je pense que c'st une mauvaise idée    

Et je pense que c'est plutôt sur les z-index qu'il faudrait jouer et que ça serait imperceptible à + de 90 MHz de CPU.

Je me demande si les navigateurs seront assez lent pour donner une impression de dégradé avant que le navigateur ne sature la mémoire de l'ordinateur tout en ayant un dégradé visible ... Et va faloir qu'on m'explique comment faire avec cette méthode là pour avoir un dégradé aussi lent/rapide avec un athlon bi core haut de game actuel et avec un celeron de portable d'il y a 3-4 ans.

Non mais ca fait benchmark en même temps...

C'est exactement l'idée que j'avais eu, et elle est effectivement très mauvaise ^^.
 
( et vous êtes casse couille avec la sémantique du div )

Les div (et les span pour les éléments en ligne) n'ont pas vraiment de signification sémantique. Ils servent à regrouper des éléments sans préjuger du contenu.

 
Exactement, ils n'apportent rien mais n'enlèvent rien au sens du contenu. une page avec des divs entourant d'autres éléments n'est pas moins compréhensible pour un parseur ou un lecteur.
Inversement ils permettent de créer une sémantique pour le lecteur via l'utilisation des id/classes, lorsque l'expressivité de l'html fait défaut. ( le tout sans avoir besoin de toute la hypitude d'un langage xml )

0x90 > Les div et les span (dixit le w3c) sont des éléments servant à en grouper plusieurs autres. ( le titre du paragraphe parle par lui même : "7.5.4 Grouping elements: the DIV and SPAN elements" )  
Où est donc le regroupement quand tu ne fais que même un autre div à l'intérieur?
De plus, ca sont des éléments sans signification sémantiquement parlant, c'est a dire qu'ils ne doivent pas être utilisé si le regroupement à une signification sémantique correspondant à une balise bien défini. Par exemple, quel intéret y aurait il à utiliser un div à la place d'une balise de type Hx si c'est pour encadrer un titre de chapitre?
 
Alors bon, on peut paraitre chiant à dire qu'il ne faut pas utiliser des div n'importe comment, mais c'est la compréhension de tous qui est en jeux alors si t'as envie de faire un site dont 99.99 % des balises sont des div, te géne pas, fait le. Mais ensuite vient pas te pleindre que "tonton marcel", le petit aveugle du quartier, il te dise que ton site, c'est qu'une suite de phrase sans structure.

 
t'as vraiment lut mon post ? oO

En fait, oui, a moitié à la vas vite avec un colégue qui rallait à côté par se sa modif d'une page du site ne marchait pas alors qu'il avait fait que la moitié de ce qu'il fallait pour que ca marche malgrés l'example qu'il avait sous les yeux.
 
Bref, désolé j'avais mal lu.

Et quand on ne voit rien en particulier sous IE et Firefox on dit quoi ?  

Bonjours a tous, je suis nouveau sur le Forum.
J'ai presque trouver la solution a ton problème. (je n'ai pas trouver comment afficher du texte par dessus)
Je suis moi même web master (amateur) et j'avais eu la même idée que toi de faire un dégrader. D'ailleurs, le site sur le quel on le voit le mieux en évidence, et a mon avis http://www.deezer.com (site de musique).
 
J'ai donc pas mal cherché sur internet et la solution pour réaliser se dégrader est un java script.
Il s'aggit de réaliser un fade-in quand tu passe la souris dessus (le fond aparait),
et un fade-off quand la souris repart. Comme çà, le fond du texte retrouve sa couleur d'origine.
 
Remarque :
Je ne sais pas si tu as remarqué que le dégradé partait toujours de la couleur de font.  
 
 
Voici le lien sur le quel j'ai trouver le script :
http://brainerror.net/scripts/javascript/blendtrans/
 
Bien que je suppose que tu es capable de comprendre ce site, je vais t'explique comme faire.
 
Pour commencer, je te conseille de t'entrainer sur une page test. Si tu a un serveur php, je te donerai une autre astuce mais ce n'est pas le principale sujet de cette discutions.
 
Colle dans la basile <head></head>
Ce script (clique dessus pour l'afficher, car je ne sais pas faire des zone de texte):
 

 
Ensuite,dans la balise <body></body>, tu crée un tableau.

 
Je vais t'expliquer comment faire les réglages de transparence :
javascript:opacity('nom_a_changer_a_chaque_cellule', 100, 0, 500)
 
nom_a_changer_a_chaque_cellule :
C'est ce qui permet de définir a quel image tu applique la transparence
 
100 :
C'est le pourcentage de transparence au debut de l'action
 
0 :
C'est le pourcentage de transparence a la fin de l'action
 
500 :
C'est le temps que met a ce faire le dégrader.
 
 
Comme je l'ai dit au début, je ne sais pas comment marquer le texte par dessus ces images. Je cherche encore le solution, mais en attendant, tu peu toujours metre une image avec le lien marquer dessus.
J'espere que ceci pourra te servir ainsi qu'a d'autre. Et que d'autre programateur nous apporterons la solution du texte.
 
Bonne programation a tous
 
 

Houla, déterrage de topic    (c'était il y a 2 ans ½, as-tu regardé la date ?)
 
Sinon merci pour ta participation, mais ça fait belle lurette que j'avais implémenté une solution JS (mootools dispose de ces fonctions en natif...)
Sinon petite remarque, ça se voit que tu débutes, parce que les scripts tout fait avec des manipulations JS directement dans le code, c'est à proscrire (un petit coup d'oeil sur l'intégration de JS non intrusif / manipulation DOM t'aidera à comprendre)