Voir le nouveau contenu

Bienvenue sur GeekZone
Inscrivez-vous sur GeekZone pour profiter des fonctions avancées du forum, proposer des news, participer aux conversations, ouvrir votre galerie, profiter de la messagerie interne et venir tester nos modérateurs avec du bon troll... Attention, ils ont la gâchette facile. C’est aussi pour ça que GeekZone est le meilleur site de passionnés depuis 2002 ! Si vous avez déjà un compte, connectez-vous - sinon, il est temps d'en créer un.

Javascript désactivé détecté

Vous avez actuellement le javascript qui est désactivé. Plusieurs fonctionnalités peuvent ne pas marcher. Veuillez réactiver le javascript pour accéder à toutes les fonctionnalités.

1

Problème de dégradé en CSS3 + png transparent

Débuté par Deadlock , 30 May 2011 23:48

Veuillez vous connecter pour répondre

8 réponses à ce sujet

#1
Deadlock

Posté 30 May 2011 - 23:48

Lord Jedi Geek

Membre
569 messages

Bonjour à tous,

je suis en train de coder un site en html 5 / css 3 en ce moment et j'ai un problème d'affichage d'image de fond :
j’utilise pour couleur de fond de mon body un dégradé en css3 avec par dessus une image png 24bits avec de la transparence. J'ai aussi une couleur de fond normale pour remplacer le dégradé pour les navigateur qui ne le gère pas.

Mon problème est que je n'arrive pas à avoir mon dégradé + le png qui affichent en même temps, je n'arrive qu'a avoir la couleur de fond normale et le png.

Voilà mon css :

body {
	height: 95%;
	display: block;
	position: relative;
	text-align: center;

	background-color: -webkit-gradient( /*pour chrome*/
		linear,
		left bottom,
		left top,
		color-stop(0.2, #66CC99),
		color-stop(0.9, #CCFFCC)
	);

	background-color: -moz-linear-gradient( /*pour FF*/
		center bottom,
		#66CC99 20%,
		#CCFFCC 90%
	);

	background-color: #66CC99; /*pour les vieux browsers*/
	background-image: url(../images/site/fondbambou.png);
}

Si quelqu'un à une idée, je suis preneur ^^

Merci

Modifié par Deadlock, 31 May 2011 - 00:02.

Sinon c'est pas drôle !

Tenarsha Hunter spé FD - Hawks Reborn - Burning Legion

Virtual Art, Atelier de d'infographie et de dessin à Toulouse

Retour en haut

#2
Chateau_Dur

Posté 31 May 2011 - 06:36

Lord Jedi Geek

Membre
733 messages

Yo,

Je commencerais par l'image, puis le dégradé, puis le fallback.

L'ordre est important !

Dis-moi si ça marche.

Tcho !

Retour en haut

#3
cedric

Posté 31 May 2011 - 08:03

Senseï Geek

Membre
1732 messages

Lieu:Chièvres, Belgique

C'est normal ton dernier background-color: #66CC99 prend le dessus sur les autres, tu dois le mettre avant les dégradés.

Retour en haut

#4
Chateau_Dur

Posté 31 May 2011 - 08:10

Lord Jedi Geek

Membre
733 messages

oui j'ai pensé à l'envers, j'aurais dû prendre ma douche avant de répondre :innocent:

Mais en y reflechissant, je pense que tu pourras pas passer ton image séparément du fallback. Essaye de les mettre dans une seule instruction.

Modifié par Chateau_Dur, 31 May 2011 - 08:11.

Retour en haut

#5
PERECil

Posté 31 May 2011 - 09:37

Développeur de Magna Stella

Membre
4624 messages

Lieu:Strasbourg, France

Il me semble que tu vas avoir un autre problème: tes background color spécialisés par browsers se "mangent" entre eux.

Je crois que si tu mets la spec pour webkit puis mozilla, ca va marcher pour mozilla, mais pas pour webkit (il va tomber sur le second background color pour mozilla, ne pas le comprendre, et annuler les modifications).

A vérifier. (La solution étant, je crois de stacker toutes les propriétés dans la même règle)

Note: Ce problème n'intervient pas avec les règles css personnalisées de type -moz-box-shadow, etc.

Blog: Moments choisis de culture Geek | Twitter | XNA Connection: Actus, tutoriels, et ressources sur XNA

Retour en haut

#6
cedric

Posté 31 May 2011 - 11:02

Senseï Geek

Membre
1732 messages

Lieu:Chièvres, Belgique

Non c'est prévu pour.
http://gradients.glrzad.com/

Retour en haut

#7
Deadlock

Posté 31 May 2011 - 15:47

Lord Jedi Geek

Membre
569 messages

Bon en mettant avant les dégradés ça marche pas mieux et en plus la couleur de fallback ne s'affiche plus sous IE8 ^^

body {
	height: 95%;
	display: block;
	position: relative;
	text-align: center;
	
	background-color: #66CC99; /*pour les vieux browsers*/

	background-color: -webkit-gradient( /*pour chrome*/
		linear,
		left bottom,
		left top,
		color-stop(0.2, #66CC99),
		color-stop(0.9, #CCFFCC)
	);
	
	background-color: -moz-linear-gradient( /*pour FF*/
		center bottom,
		#66CC99 20%,
		#CCFFCC 90%
	);
	
	background-image: url(../images/site/fondbambou.png);	
}

Sinon, question du gros noob que je suis : si je met mes instructions de gradient dans une règle à part, comment je l'applique à body ? je lui colle un id ?

Sinon c'est pas drôle !

Tenarsha Hunter spé FD - Hawks Reborn - Burning Legion

Virtual Art, Atelier de d'infographie et de dessin à Toulouse

Retour en haut

#8
Chateau_Dur

Posté 31 May 2011 - 19:21

Lord Jedi Geek

Membre
733 messages

Essaye ça :

body {
	 body {
		height: 95%;
		display: block;
		position: relative;
		text-align: center;   
		background: #66CC99 url(../images/site/fondbambou.png);   
		background: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.02, rgb(102,204,153)),
			color-stop(0.9, rgb(204,255,204)) url(../images/site/fondbambou.png)
		);
		background: -moz-linear-gradient(
			center bottom,
			rgb(102,204,153) 2%,
			rgb(204,255,204) 90% ²
		 url(../images/site/fondbambou.png)); 

}
}

Si tu veux tes gradients séparés, tu fais une classe:

.degrade{
ton code
}

et tu l'appliques à ton body:

<body class="degrade">

Si l'image n'apparait pas, tu fais une div supplémentaire, ce sera plus flexible et tu te prends pas la tête.

Sinon si tu as une image de ce que tu veux faire, ça peut aider :rolleyes:

Modifié par Chateau_Dur, 31 May 2011 - 19:26.

Retour en haut

#9
Deadlock

Posté 11 June 2011 - 17:53

Lord Jedi Geek

Membre
569 messages

Bon j'ai trouvé pour FF (et normalement chrome mais pas testé)

body {
	height: 95%;
	display: block;
	position: relative;
	text-align: center;
	background-color: #66CC99; /*fallback*/
	
	/*pour firefox*/
	background-image: url(../images/site/fondbambou.png), -moz-linear-gradient(
	center bottom,
	#66CC99 20%,
	#CCFFCC 90%
	);
	
	/*pour chrome*/
	background-image: url(../images/site/fondbambou.png), -webkit-gradient( /*pour chrome*/
	linear,
	left bottom,
	left top,
	color-stop(0.2, #66CC99),
	color-stop(0.9, #CCFFCC)
	);
}

Merci votre aide