Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2115 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] un degradé de couleur !

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] un degradé de couleur !

n°1279313
ANViL
yep...definitely ♫
Posté le 08-01-2006 à 22:55:38  profilanswer
 

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é  :sweat: , si quelqu'un pouvait m'aider  :hello:  
 
lien de la CSS: http://www.svay.com/files/daClear/daClear/style.css


Message édité par ANViL le 08-01-2006 à 22:56:44
mood
Publicité
Posté le 08-01-2006 à 22:55:38  profilanswer
 

n°1279335
zapan666
Tout est relatif
Posté le 08-01-2006 à 23:28:54  profilanswer
 

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é.

n°1279337
afbilou
pouet your life
Posté le 08-01-2006 à 23:32:49  profilanswer
 

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

n°1279341
zapan666
Tout est relatif
Posté le 08-01-2006 à 23:40:59  profilanswer
 

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)

n°1279349
afbilou
pouet your life
Posté le 08-01-2006 à 23:48:44  profilanswer
 

'fectivement :)

n°1279365
ANViL
yep...definitely ♫
Posté le 09-01-2006 à 00:14:38  profilanswer
 

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.


Message édité par ANViL le 09-01-2006 à 00:16:32
n°1279377
afbilou
pouet your life
Posté le 09-01-2006 à 00:33:48  profilanswer
 

Pour te convaincre :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>
  4. <title>Test</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6. <style type="text/css">
  7.  a:hover {
  8.   background-image: url(http://www.svay.com/files/daClear/daClear/images/menu.gif);
  9.   background-repeat: repeat-x repeat-y;
  10.  }
  11. </style>
  12. </head>
  13. <body>
  14. <h1>Site</h1>
  15. <ul>
  16.  <li><a href="#">Test test test</a></li>
  17.  <li><a href="#">Test test test</a></li>
  18.  <li><a href="#">Test test test</a></li>
  19.  <li><a href="#">Test test test</a></li>
  20.  <li><a href="#">Test test test</a></li>
  21.  <li><a href="#">Test test test</a></li>
  22.  <li><a href="#">Test test test</a></li>
  23.  <li><a href="#">Test test test</a></li>
  24. </ul>
  25. </body>
  26. </html>

n°1279461
energiez
Posté le 09-01-2006 à 10:40:12  profilanswer
 

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).

n°1279627
ANViL
yep...definitely ♫
Posté le 09-01-2006 à 15:26:59  profilanswer
 

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 !

n°1279632
afbilou
pouet your life
Posté le 09-01-2006 à 15:37:59  profilanswer
 

ANViL a écrit :

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 !


 :sweat:

mood
Publicité
Posté le 09-01-2006 à 15:37:59  profilanswer
 

n°1279746
mechkurt
Posté le 09-01-2006 à 18:30:32  profilanswer
 

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 ?
 :pt1cable:  
bizarre !


---------------
D3
n°1279759
zapan666
Tout est relatif
Posté le 09-01-2006 à 18:44:46  profilanswer
 

mechkurt a écrit :

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 ?
 :pt1cable:  
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.


---------------
my flick r - Just Tab it !
n°1279790
ANViL
yep...definitely ♫
Posté le 09-01-2006 à 19:18:16  profilanswer
 

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] [:airforceone]
 
Et ça marche sous tous les browsers de surcroit....c'est dingue ça, et personne ne sait ce que c'est  :sweat:

Message cité 1 fois
Message édité par ANViL le 09-01-2006 à 19:19:15
n°1279808
zapan666
Tout est relatif
Posté le 09-01-2006 à 19:31:56  profilanswer
 

ANViL a écrit :

Hmm zapan, d'après ce que j'ai vu ce n'est pas un gif animé.


bah ta mal vu  :o  
 
j'déconne  :D  
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é  :D  
 
 
ta mal vu, stou  :o  
 
 
 
 
 :D  


---------------
my flick r - Just Tab it !
n°1279810
afbilou
pouet your life
Posté le 09-01-2006 à 19:34:16  profilanswer
 

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 ! :o

n°1279812
kalex
Posté le 09-01-2006 à 19:36:51  profilanswer
 

7 trames la gif annimée :o

n°1279814
zapan666
Tout est relatif
Posté le 09-01-2006 à 19:38:26  profilanswer
 

afbilou a écrit :

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 ! :o


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.


---------------
my flick r - Just Tab it !
n°1279850
ANViL
yep...definitely ♫
Posté le 09-01-2006 à 20:11:52  profilanswer
 

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

n°1279861
0x90
Posté le 09-01-2006 à 20:18:08  profilanswer
 

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 ^^


Message édité par 0x90 le 09-01-2006 à 20:18:38

---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
n°1279900
ANViL
yep...definitely ♫
Posté le 09-01-2006 à 20:35:55  profilanswer
 

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é  :jap:

n°1283766
Galeenet
Posté le 14-01-2006 à 21:48:00  profilanswer
 

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é.

n°1283773
zapan666
Tout est relatif
Posté le 14-01-2006 à 21:53:28  profilanswer
 

Galeenet a écrit :

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é.


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


---------------
my flick r - Just Tab it !
n°1283775
kalex
Posté le 14-01-2006 à 21:56:57  profilanswer
 

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. :D

n°1284385
omega2
Posté le 16-01-2006 à 12:24:45  profilanswer
 

Galeenet a écrit :

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é.

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.

n°1284404
mechkurt
Posté le 16-01-2006 à 12:40:38  profilanswer
 

omega2 a écrit :

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...


---------------
D3
n°1284623
0x90
Posté le 16-01-2006 à 15:20:38  profilanswer
 

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 :o )


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
n°1284678
kalex
Posté le 16-01-2006 à 15:47:37  profilanswer
 

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.

n°1284684
0x90
Posté le 16-01-2006 à 15:51:22  profilanswer
 

kalex a écrit :

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 )


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
n°1284791
omega2
Posté le 16-01-2006 à 17:50:52  profilanswer
 

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.

Message cité 1 fois
Message édité par omega2 le 16-01-2006 à 17:51:19
n°1284846
0x90
Posté le 16-01-2006 à 18:42:11  profilanswer
 

omega2 a écrit :

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


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
n°1284850
omega2
Posté le 16-01-2006 à 18:47:06  profilanswer
 

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. :jap:

n°1471552
grosbin
OR die;
Posté le 07-11-2006 à 12:23:13  profilanswer
 

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


---------------
Développeur Php Annecy
n°1781328
Mars II
Posté le 02-09-2008 à 11:37:57  profilanswer
 

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):
 

Spoiler :


function opacity(id, opacStart, opacEnd, millisec) {
 //speed for each frame
 var speed = Math.round(millisec / 100);
 var timer = 0;
 
 //determine the direction for the blending, if start and end are the same nothing happens
 if(opacStart > opacEnd) {
  for(i = opacStart; i >= opacEnd; i--) {
   setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
   timer++;
  }
 } else if(opacStart < opacEnd) {
  for(i = opacStart; i <= opacEnd; i++)
   {
   setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
   timer++;
  }
 }
}
 
//change the opacity for different browsers
function changeOpac(opacity, id) {
 var object = document.getElementById(id).style;  
 object.opacity = (opacity / 100);
 object.MozOpacity = (opacity / 100);
 object.KhtmlOpacity = (opacity / 100);
 object.filter = "alpha(opacity=" + opacity + " )";
}
 
function shiftOpacity(id, millisec) {
 //if an element is invisible, make it visible, else make it ivisible
 if(document.getElementById(id).style.opacity == 0) {
  opacity(id, 0, 100, millisec);
 } else {
  opacity(id, 100, 0, millisec);
 }
}
 
function blendimage(divid, imageid, imagefile, millisec) {
 var speed = Math.round(millisec / 100);
 var timer = 0;
 
 //set the current image as background
 document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + " )";
 
 //make image transparent
 changeOpac(0, imageid);
 
 //make new image
 document.getElementById(imageid).src = imagefile;
 
 //fade in image
 for(i = 0; i <= 100; i++) {
  setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
  timer++;
 }
}
 
function currentOpac(id, opacEnd, millisec) {
 //standard opacity is 100
 var currentOpac = 100;
 
 //if the element has an opacity set, get it
 if(document.getElementById(id).style.opacity < 100) {
  currentOpac = document.getElementById(id).style.opacity * 100;
 }
 
 //call for the function that changes the opacity
 opacity(id, currentOpac, opacEnd, millisec)
}


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

Spoiler :


<table>
<tr>
<td onMouseOut="javascript:opacity('nom_a_changer_a_chaque_cellule', 100, 0, 500)"  
onMouseOver="javascript:opacity('nom_a_changer_a_chaque_cellule',0, 100, 500)">
 
Tu met ton image ici :
<img src="ton_image.jpg" id="nom_a_changer_a_chaque_cellule">
 
<td/>
</tr>
</table>


 
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
 
 

n°1781424
ANViL
yep...definitely ♫
Posté le 02-09-2008 à 14:12:41  profilanswer
 

Houla, déterrage de topic  [:cerveau meriadeck]  (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)


Message édité par ANViL le 02-09-2008 à 14:13:14

---------------
Easy Ridin'  ⎝⏠⏝⏠⎠  
mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] un degradé de couleur !

 

Sujets relatifs
[CSS] impossible de changer la couleur du fond sous FF (IE ok) RESOLUProbleme affichage liens CSS...
CSS - problemes de listes imbriquéesLotus Notes et les CSS
[Html/CSS] Virer les tableauxprobleme de couleur
Erreur de validation CSSvba word couleur tableau
[CSS] Problème de CSS avec Firefox, mais pas avec Opera ou IE. 
Plus de sujets relatifs à : [CSS] un degradé de couleur !


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR