Contenu | Rechercher | Menus

Annonce

Si vous rencontrez des soucis à rester connecté sur le forum (ou si vous avez perdu votre mot de passe) déconnectez-vous et reconnectez-vous depuis cette page, en cochant la case "Me connecter automatiquement lors de mes prochaines visites".

#1 Le 06/03/2013, à 13:27

ToxxicZad

Question CSS3

Bonjour à tous !

Je me risque à poster cette question dans ce forum, et dans cette section, au risque de me faire réprimander par les maniaques du rangement.

Ici pas de C++ ou Python comme dans la description de la section mais juste du CSS3.

J'aurais aimé savoir s'il était possible  d'ajouter de la transparence à un dégradé. Je ne parle pas d'un dégradé qui va d'une couleur à de la transparence mais d'un dégradé couleur -> couleur dont on modifierait l'opacité.

Par exemple :

background-image: -moz-linear-gradient(bottom, rgb(140,140,140) 47%, rgb(79,79,79) 83%);

(Je ne prends que le kit -moz- mais on est d'accord sur le fait que je les ai tous mis)

Ceci donne un dégradé noir -> gris, tout va bien. J'aimerais maintenant ajouter un effet filigrane, modifier l'opacité de ces dégradés, afin qu'on aperçoive légèrement le background.

Voilà, veuillez m'excuser pour cette intrusion presque hors sujet, mais je sais que je trouve toujours réponse à mes questions sur ce forum.

Merci d'avance et une très bonne journée !

Zad


United we run, divided we crawl.

Hors ligne

#2 Le 06/03/2013, à 13:54

Morgiver

Re : Question CSS3

http://www.w3schools.com/css/css_image_transparency.asp

L'exemple est sur une image au début, ensuite il enchaine sur un bloc smile

Dernière modification par Morgiver (Le 06/03/2013, à 13:54)

Hors ligne

#3 Le 06/03/2013, à 14:18

ToxxicZad

Re : Question CSS3

Hello ! Merci pour cette réponse rapide smile

Alors j'ai testé, mais la modification d'opacité ne s'applique pas aux dégradés sad


United we run, divided we crawl.

Hors ligne

#4 Le 06/03/2013, à 14:26

Morgiver

Re : Question CSS3

Il y a une astuce avec Opacity.

Tous les bloc qui seront dans le bloc affecté par opacity ou alors au dessus du bloc affecté par opacity, sont eux aussi affecté :

Tu peux tester ce code :

<!DOCTYPE html>
<html>
	<body>
		<style>
		#couleur {
			background-image: -moz-linear-gradient(bottom, rgb(140,140,140) 47%, rgb(79,79,79) 83%);
			padding: 50px;
			width: 200px;
			height: 200px;
		}
		#opacite {
			padding: 50px;
			width: 250px;
			height: 250px;
			opacity: 0.1;
		}
		</style>
		<div id="opacite">
			<div id="couleur">
			</div>
		</div>
		<div id="couleur">
		</div>
	</body>
</html>

Comme tu peux le voir, le bloc du dessus est plus clair que celui d'en dessous.
Si tu met une image en background sur body, on la verra normalement.
Faut essayer de jouer sur les effets indirect sur les autres bloc.

Dernière modification par Morgiver (Le 06/03/2013, à 14:28)

Hors ligne

#5 Le 06/03/2013, à 14:39

ToxxicZad

Re : Question CSS3

Hmmmm je vois l'astuce. Je pense qu'il y a moyen de bricoler quelque chose. Je pensais que c'était faisable sans bricolage mais après tout, quel plaisir dans la programmation si ce n'est de bricoler, hein ? ^^.

Encore merci pour toutes ces infos, je vais essayer tout ça !


United we run, divided we crawl.

Hors ligne

#6 Le 06/03/2013, à 16:19

Morgiver

Re : Question CSS3

Salut,

Je viens de tester ça :

<!DOCTYPE html>
<html>
	<body>
		<style>
		#couleur {
			background: -moz-linear-gradient(bottom, rgb(140,140,140) 47%, rgb(79,79,79) 83%);
			opacity: 0.3;
			padding: 50px;
			width: 200px;
			height: 200px;
		}
		</style>
		
		<div id="couleur">
		</div>
	</body>
</html>

Je pensais que tu l'avais déjà testé, mais apparemment non, parce que chez moi, ca fonctionne, le bloc couleur est un peu transparent.
Donc ça fonctionne wink

Hors ligne

#7 Le 06/03/2013, à 18:12

ToxxicZad

Re : Question CSS3

Yes merci de refaire signe !!!

Bon sang, si j'avais testé. Mais je viens de comprendre pourquoi ça ne marchait pas...

J'ai pris le kit "-moz-" comme exemple dans ma question... et tu as donc compris que j'étais sous firefox, du moins tu l'es toi-même. En copiant collant ton code avec le kit -moz- et en l'ouvrant avec Chromium........................................................... BREF !

Du coup je certifie que ça fonctionne, et te remercie encore du coup smile

T'as assuré !


United we run, divided we crawl.

Hors ligne

#8 Le 06/03/2013, à 18:30

Morgiver

Re : Question CSS3

Avec plaisir, hésite pas à rajouter [RESOLU] dans le titre de ton topic wink

Hors ligne

#9 Le 06/03/2013, à 19:54

louis94

Re : Question CSS3

Bonjour,

Est-ce que spécifier les couleurs avec rgba() ne serait pas plus propre ? La propriété opacity s'applique à tout l'élément, alors que c'est uniquement l'arrière-plan qu'on veut modifier.
Par exemple :

<!DOCTYPE html>
<html>
	<body>
		<style>
		#couleur {
			background: -moz-linear-gradient(bottom, rgba(140,140,140, 0.3) 47%, rgba(79,79,79, 0.3) 83%);
			padding: 50px;
			width: 200px;
			height: 200px;
		}
		</style>
		
		<div id="couleur">
		</div>
	</body>
</html>

Louis

Hors ligne

#10 Le 06/03/2013, à 19:59

Morgiver

Re : Question CSS3

Ça dépend de l'utilisation que tu en fait.

Si tu ne veux que ton dégradé pour fond de ton bloc, oui en effet, ça ne sert à rien de mettre opacity.
L'avantage avec cette propriété, c'est qu'elle rend transparent le fond de ton bloc. Résultat, tu vois ce qu'il y a en dessous.
C'est un effet sympathique, pour garder pour garder l'image que tu as mis en fond. Avec un effet de gris et/ou une texture tu peux faire un effet de verre/glace pas tout a fait transparente.

Hors ligne

Haut de page ↑