Créer un dégradé dinamique en background d'un DIV

Tout ce qui concerne la conception graphique de sites Web et les outils associés. Présentation de designs.

Créer un dégradé dinamique en background d'un DIV

Messagepar Matrix » 10 Juil 2008, 23:44

Bonjour,

Voilà mon problème, j'ai deux DIVs avec deux BG color différent.

J'aimerais créer un dégradé entre les deux, histoire de faire une continuité.
Vous allez me dire que je pourrais prendre photoshop et utiliser le magnifique outil qui fait des dégradés.
Mais dans ce cas il me faudrait une image fixe, hors la taille des DIVs n'est pas forcément tjs la même, il faudrait donc que cela soit dynamique.

Un moyen de faire ça en php/html/css?
Avatar de l’utilisateur
Matrix
Hello World, I'm new !
 
Messages: 267
Inscription: 19 Juin 2005, 18:07

Messagepar deathangel » 11 Juil 2008, 08:27

à priori, j'ai jamais vu ca en dynamique dans les CSS/DIV pour faire un dégradé. Par contre l'idée de l'image photoshop est la bonne. Il te suffit de générer une image de largeur 1pixel puis d'appliquer un background-repeat: repeat-x pour qu'il te remplisse la largeur de ton div. Pour la hauteur, il te suffit de dire image-height : 100% pour qu'il remplisse complètement la hauteur. à partir de là, peu importe la taille du div, ton dégradé s'adaptera automatiquement.
Je suis plus tout à fait sur de la syntaxe exacte, mais je sais que c'est faisable.
bon courage
95% des problèmes informatiques se situent entre la chaise et le clavier
--> Créez votre robot chien : http://doggyproject.free.fr/
--> Gagnez des PACK+ gratuitement : http://www.packbarre.com/
--> S.U.S Tennis de table http://www.sus.asso.fr
Avatar de l’utilisateur
deathangel
Hello World, I'm new !
 
Messages: 963
Inscription: 10 Avr 2005, 08:50
Localisation: Strasbourg

Messagepar Matrix » 11 Juil 2008, 12:21

Mon dégradés doit allez du haut vers le bas, et la taille du div varriante est la hauteur, la largeur est fixe, je trvaille verticalement.
Je ne vois pas comment avec un background-repeat on obtient un seul dégradé continu, cela va juste remettre x fois l'image du dégradé.

histoire d'etre plus clair :

j'ai ça:
Image

il me faut ça :
Image
Avatar de l’utilisateur
Matrix
Hello World, I'm new !
 
Messages: 267
Inscription: 19 Juin 2005, 18:07

Messagepar deathangel » 11 Juil 2008, 14:26

ah oki, je pensais à un dégradé horizontal pour prendre la largeur de la page :s

sinon j'ai trouvé ca en cherchant vite fait : http://batraciens.net/css-astuces/ajuster-image-de-fond.htm

c'est un peu magouille mais ca marche
95% des problèmes informatiques se situent entre la chaise et le clavier
--> Créez votre robot chien : http://doggyproject.free.fr/
--> Gagnez des PACK+ gratuitement : http://www.packbarre.com/
--> S.U.S Tennis de table http://www.sus.asso.fr
Avatar de l’utilisateur
deathangel
Hello World, I'm new !
 
Messages: 963
Inscription: 10 Avr 2005, 08:50
Localisation: Strasbourg

Messagepar NicoL3AS » 11 Juil 2008, 19:25

Tu peux créer ton dégradé sous photoshop et l'étirer/rétrécir suivant la taille de tes boîtes. Si la taille ne dépasse pas 1.5 fois la taille original (à vue de nez, hein :00000030: ) elle ne sera pas trop pixélisée je pense.
Tu peux également faire de la manipulation d'image en PHP grâce à l'extension GD. Je ne sais pas si elle est capable de faire des dégradés (à mon avis non) mais tu peux créer ta propre fonction qui le fait ou chercher un script sur le net. Par contre cette manipulation sera peut-être un traitement lourd pour ton serveur PHP... A voir.
La Destinée du Feu
Action-RPG 2D gratuit
Avatar de l’utilisateur
NicoL3AS
Hello World, I'm new !
 
Messages: 490
Inscription: 12 Aoû 2005, 17:46

Messagepar Matrix » 12 Juil 2008, 02:25

Oui merci, j'ai compris le principe, mais finalement je pense que je vais garder mon truc actuel. Pas besoin de se casser la tete pour des petites nuances graphique sans importance en l'occurence.

merci ;)
Avatar de l’utilisateur
Matrix
Hello World, I'm new !
 
Messages: 267
Inscription: 19 Juin 2005, 18:07

Messagepar monnier.an » 14 Juil 2008, 23:18

sinon tu peu faire une image de dégrader sous photoshop de la taille minimal de tes deux DIV et ensuite remplir le reste avec la couleur d'extrémiter des dégrader

de tel sorte que le dégrader se fasse au milieu
"The value of a question doesn't depend on its quality but on the value of the answer." A.J.

"You don't sculp this stone to make a cube. You sculpt it to become the beginning of a temple." A.J.
Avatar de l’utilisateur
monnier.an
Hello World, I'm new !
 
Messages: 170
Inscription: 23 Aoû 2006, 12:42
Localisation: Brest

Messagepar NicoL3AS » 15 Juil 2008, 18:35

monnier.an a écrit:sinon tu peu faire une image de dégrader sous photoshop de la taille minimal de tes deux DIV et ensuite remplir le reste avec la couleur d'extrémiter des dégrader

de tel sorte que le dégrader se fasse au milieu


Pas bête ça ^^
La Destinée du Feu
Action-RPG 2D gratuit
Avatar de l’utilisateur
NicoL3AS
Hello World, I'm new !
 
Messages: 490
Inscription: 12 Aoû 2005, 17:46

Messagepar deathangel » 15 Juil 2008, 19:55

monnier.an a écrit:sinon tu peu faire une image de dégrader sous photoshop de la taille minimal de tes deux DIV et ensuite remplir le reste avec la couleur d'extrémiter des dégrader

de tel sorte que le dégrader se fasse au milieu


quand je vois ces idées, par moment je me dis que le HTML aurait bien besoin d'une bonne refonte en plus d'une interprétation correcte par tous les navigateurs :)
limite, c'est le HTML le plus dur "language de programmation" c'est que du fake et des astuces

en tout cas l'idée est sympa, j'y repenserais au cas ou
95% des problèmes informatiques se situent entre la chaise et le clavier
--> Créez votre robot chien : http://doggyproject.free.fr/
--> Gagnez des PACK+ gratuitement : http://www.packbarre.com/
--> S.U.S Tennis de table http://www.sus.asso.fr
Avatar de l’utilisateur
deathangel
Hello World, I'm new !
 
Messages: 963
Inscription: 10 Avr 2005, 08:50
Localisation: Strasbourg

Messagepar NicoL3AS » 15 Juil 2008, 20:15

deathangel a écrit:limite, c'est le HTML le plus dur "language de programmation" c'est que du fake et des astuces


C'est ce qui fait tout son charme.
La Destinée du Feu
Action-RPG 2D gratuit
Avatar de l’utilisateur
NicoL3AS
Hello World, I'm new !
 
Messages: 490
Inscription: 12 Aoû 2005, 17:46

Messagepar Gandalf » 21 Aoû 2008, 16:44

c'est le HTML le plus dur "language de programmation" c'est que du fake et des astuces


Le HTML est un langage, mais pas de programmation, c'est pour ça que c'est parfois complexe de faire quelque chose de dynamique, compatible avec tous les navigateurs etc, etc ;)
Avatar de l’utilisateur
Gandalf
Hello World, I'm new !
 
Messages: 316
Inscription: 10 Avr 2005, 10:19
Localisation: Lorraine


Retourner vers Conception graphique et outils

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron