Pages : 1
#1 Le 06/03/2013, à 12: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, à 12: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 
Dernière modification par Morgiver (Le 06/03/2013, à 12:54)
Hors ligne
#3 Le 06/03/2013, à 13:18
- ToxxicZad
Re : Question CSS3
Hello ! Merci pour cette réponse rapide
Alors j'ai testé, mais la modification d'opacité ne s'applique pas aux dégradés 
United we run, divided we crawl.
Hors ligne
#4 Le 06/03/2013, à 13: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, à 13:28)
Hors ligne
#5 Le 06/03/2013, à 13: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, à 15: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 
Hors ligne
#7 Le 06/03/2013, à 17: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
T'as assuré !
United we run, divided we crawl.
Hors ligne
#8 Le 06/03/2013, à 17:30
- Morgiver
Re : Question CSS3
Avec plaisir, hésite pas à rajouter [RESOLU] dans le titre de ton topic
Hors ligne
#9 Le 06/03/2013, à 18: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, à 18: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
Pages : 1