28221 sujets

CSS et mise en forme, CSS3

[RESOLU] Article sur fond transparent

Salut,

Pour la version 3 de mon site, j'aimerais utiliser les attributs de transparence. J'ai vu ça sur Babylon Design. Je crois que c'est pas (encore) validé, mmais j'ai quand même envie de tester.

Donc en gros j'ai un "conteneur d'article" ou je mets mes rubriques et un fond noir. Dans l'angle en bas à droite, je voudrais mettre quelque chose (là des "flammes bleues"). Et je voudrais donc que mon conteneur soit un peu transparent pour qu'on voie les flammes derrière. Sur mon psd ça donne ça :

http://sandwichpipo.free.fr/autres/articlev3.jpg

Donc j'ai essayé pas mal de trucs qui ont pas marché, et là, bah ça marche toujours pas mais on va dire que c'est le moins pire. En fait, ça marche tant que ma page n'est pas assez grande pour qu'il y aie une scrollbar. Parce que si on écrit un texte trop grand, et ben les flammes, au lieu de se mettre en bas de la page, elles se mettent en bas de l'écran :

http://sandwichpipo.free.fr/autres/articlev3-bug.jpg
(sur cette image je n'ai pas mis que du texte dans le conteneur d'article, mais ça revient au même)

Donc mon code :

Fichier CSS :
#page{
	margin:0;
	padding:0;
	float:left;
}
#flammes{
	width:100%;
	height:100%;
	background:url(flammes.jpg) right bottom no-repeat;
	padding:0;
	position: absolute;
}
#contener_articles{
	position:absolute;
}


Fichier HTML :
<body>

<div id="page">
<div id="contener_articles">

[ texte ]

</div>
<div id="flammes"></div>
</div>

</body>



Voilou, si quelqu'un a une idée...

Merci

Smiley biggrin
Modifié le 04 Feb 2005 - 20:05
Salut,

1) Pour l'aspect "transparence partielle", tu peux essayer la méthode "half-screen" de Todd Fahrner (décidément il en a inventé des trucs intéressants ce monsieur Smiley biggrin ) :
- tu crées une image de 2x2 px
- ligne 1 : un blanc un transparent
- ligne 2 : un transparent, un blanc
et tu la mets en fond de ton texte. NB : L'option "pixel noir" suppose que tu écris dessus avec une couleur claire.

2) Pour ta flamme, comment voudrais-tu qu'elle soit placée ?
a écrit :
Pour ta flamme, comment voudrais-tu qu'elle soit placée ?
Je voudrais qu'elle soit en bas à droite de ma page. Mais pas en bas à droite de l'écran, c'est à dire un peu comme le texte "Powered by Phedio v3.7 © dew
Contacter l'administrateur - x.x ms" en bas de ce forum, sauf que c'est une image et qu'une image c'est plus compliqué lol.
Merci pour la technique du "pixel noir", ça à l'air interessant, j'essaierais Smiley smile .
a écrit :
Des suggestions ?
Heu ben moi je l'ai trouvé en triffouillant, donc en gros ce que j'ai fait c'est :
1. Une selection "cisaillée" remplie de la couleur de la flamme
2. Filtres -> Deformation -> Cisaillement pour que ca ressemble un peu plus à la forme d'une flamme que de montagnes
3. Filtre -> Flou directionnel -> Angle à 90° (enfin je crois, celui ou la barre est verticale)
4. Duplication du calque et symétrie horizontale
5. Duplication de chaque calque, les réduire (selection de leur contenu (ctrl + click sur calque) -> contraction de la selection -> inversion de la selection -> suppression de ce qui est selectionné)
6. Leur mettre (aux deux nouveaux calques) une lueur interne noire en mode normal, à 100% et surtout en "centre".

Voila, bon c'est de mémoire, j'ai pas rouvert Photoshop, si t'as des problèmes, envoie moi un mp ou ton adresse MSN Smiley cligne . En passant, je l'ai mieux faite sur mon splash.
Modifié le 02 Feb 2005 - 19:05
Nan, vraiment personne ? Smiley decu
Formulé plus clairement, je veux juste qu'une image se cale en bas à droite de ma page...

Merki quand même..
Marvin Le Rouge a écrit :
Salut,

1) Pour l'aspect "transparence partielle", tu peux essayer la méthode "half-screen" de Todd Fahrner (décidément il en a inventé des trucs intéressants ce monsieur Smiley biggrin ) :
- tu crées une image de 2x2 px
- ligne 1 : un blanc un transparent
- ligne 2 : un transparent, un blanc
et tu la mets en fond de ton texte. NB : L'option "pixel noir" suppose que tu écris dessus avec une couleur claire.

J'avais une fois fait un truc comme ça. Sauf que sous IE, tout les petits gifs étaient affiché l'un après l'autre, ça faisait bizarre Smiley eek Le mieux c'est de faire un 2x2 comme tu dit, mais après de le répéter pour en faire un truc genre 128*128, qui est apparemment plus rapide à charger Smiley smile
a écrit :
Dans ce cas, mets simplement ton background sur le body.
J'ai pas trop compris. C'est pour l'histoire de la transparence ou pour caler mon image en bas à droite que tu dis ça ?
Sandwich a écrit :
Finalement j'ai trouvé, si quelqu'un a le même problème, qu'il me contacte Smiley smile

Le mieux serait encore de donner la solution ici même, comme cela tout le monde pourra la consulter Smiley cligne C'est un le principe d'un forum d'entraide Smiley lol
Ouep, je me disais que si personne ne le voulait c'était pas la peine mais t'as raison.
Alors pour que mon image s'affiche en bas à droite de la page, je mets 
#flammes{
	background:url(flammes.jpg) no-repeat;
	width:436px;
	height:407px;
	float:right;
	right:0;
        bottom:0;
	padding:0;
	position: absolute;
}

Le problème c'est que comme ça, je peux pas mettre du texte à droite des flammes : il y a le texte, et à la ligne l'image. Pour queles deux s'affichent au même niveau, il faut rajouter 
margin:-397px 0 0 0;

Les valeurs de la marge ne sont pas les mêmes sous IE et FF.

L'autre problème, c'est que si la page est trop grande pour l'écran (et qu'il y a donc apparition de scrollbar), l'image ne se met pas en bas de la page mais en bas de l'écran (comme je l'avais dit dans un message plus haut).
Pour régler ce problème, il faut enlever "bottom:0;" de la feuille de style, mais dans ce cas, ça marche si la page est trop grande pour l'écran, mais si elle ne l'est pas, il y a un bug.

Je suis donc en recherche d'un script JS qui me permettrait de vérifier si la page est trop grande pour l'écran, et si elle ne l'est pas, écrire 
	<div id="flammes" style="bottom:0"></div>

Au lieu de 
	<div id="flammes"></div>



Voila, ++ (et si quelqu'un a une idée pour le script... Smiley smile )
Modifié le 05 Feb 2005 - 12:43
Sujet clos
Aller à