28220 sujets

CSS et mise en forme, CSS3

CSS et blur

Bonjour,

je créé un nouveau design et le cadre principal à un effet de blur autour (Photoshop): exemple

J'éssaye de bien sur avoir l'effet de blur sur une page or avec css il est quassi impossible et utilisé png reviendrait à pénaliser les utilisateur de IE et puis c'est lourd.

Par hasard, une solution est possible ou je dois laisser tomber l'idée du blur ?

Merci d'avance.
<body>
<div id="blankspace"></div>
	<div id="container">
		<div id="nav"><a id="zone1" href="" title="Home Page"></a><a id="zone2" href="" title="Photos"></a><a id="zone3" href="" title="More"></a>
		<a id="zone4" href="" title="Forum"></a><a id="zone5" href="" title="Contact"></a>
		</div>
		<div id="gridleft">
			<div id="news"><p>Lorem ipsum dolor sit amet, consectetu adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
			<img src="images/bar.gif" width="100" height="1" alt="" />
			<h6>News</h6>
			<p>18-07 | Lorem ipsum dole sit amet, consectetu adipiscing elit, sed diam nonummy nibheuismod iincidunt.</p>
			<p>17-07 | Lorem ipsum dole sit amet, consectetu adipiscing elit, sed diam nonummy nibheuismod iincidunt.</p>
			</div>
		</div>
		<div id="content"><p>Lorem ipsum dole sit amet, consectetu adipiscing elit, sed diam nonummy nibheuismod iincidunt. Lorem ipsum dole sit amet, consectetu adipiscing elit, sed diam nonummy nibheuismod iincidunt. Lorem ipsum dole sit amet, consectetu adipiscing elit, sed diam nonummy nibheuismod iincidunt. Lorem ipsum dole sit amet, consectetu adipiscing elit, sed diam nonummy nibheuismod iincidunt. Lorem ipsum dole sit amet, consectetu adipiscing elit, sed diam nonummy nibheuismod iincidunt.</p></div>
	</div>
</body>
</html>


Le début, il y a encore beacoup à changer mais tout est fait par css donc je vois trop en quoi html peux m'aider Smiley smile
Modifié par Valhala (19 Jul 2005 - 12:46)
par code HTML, j'entendais aussi le CSS Smiley smile Je me suis mal exprimé, c'est une mauvaise habitude ^^

En effet, la, ca ne nous aide pas !
@Valhala
Merci d'utiliser les bbcode pour présenter tes extraits de code sur le forum. Smiley cligne
Tu peux éditer ton message Smiley biggrin .
Je sais, j'ai remarqué mon erreur mais je trouve pas de bouton d'édition, je suis habitué à phpbb ou IPB mais la je trouve vraiment pas, désolé.

Voila le css

	body
	{
		margin: 0; padding: 0;
		text-align: center;
		height: 100%; 
		width: 100%; 
		color: #FFF;
		background-image: url(images/bg.gif);
		background-repeat: repeat;
		background-attachment: fixed;
	}
	
	#container
	{
		margin: 0 auto;
		width: 664px;
		height: 460px;
		border: 1px solid #D2D7DB;
		background: #fff;
	}
	
	#blankspace { height: 80px; }	
	
	#nav
	{
		width: 646px;
		height: 110px;
		margin: 10px 10px 4px 10px;
		background: url(images/nav.gif);
	}
	
	#gridleft { float: left; text-align: left; border: 1px solid #D9DEE3; width: 115px; height: 325px; margin-left: 13px; }
	#news { width: 115px; height: 323px; }
	#news p { margin: 4px 15px 10px 5px; text-align: left; font: 90% Arial, Helvetica, sans-serif; color: #6B6B6B; }
	#news img { margin: 0 0 5px 7px; }
	
	#content { border: 1px solid #D9DEE3; width: 510px; height: 70px; text-align: left; margin-left: 136px; }
	#content p { margin: 0 15px 10px 5px; font: 90% Arial, Helvetica, sans-serif; color: #6B6B6B; padding-top: 4px;}


J'ai enlevé des trucs non nécessaire
Salut
"blur" c'est l'ombre autour du cadre ?
Dans ce cas ca m'interesse également de connaitre l'astuce Smiley langue .

PS: pour le bouton d'édition, c'est certainement parce que tu n'était plus loggé, y'a un "déloggage" automatique assez rapide sur ce forum (en tt cas chez moi).
si j'étais toi, je ferais un background centré horinzontalement.
Ensuite, il suffit que tu t'arranges pour que le blur (en image) colle avec le background, et c'est gagné !
Justement c'est presque impossible, il y a toujours 1px de différence entre différents browsers et puis l'image devient vite lourde avec ça.

P.S: j'ai édité mon deuxième message et éffectivement j'etais pas enregistré mais bon c'est super rapide comme time out Smiley smile
Je pense qu'il existe un moyen de le faire en css ou html sans alourdir la page avec des images.

Regardez par exemple sur ce site : http://www.ladybug.fr/

La bande du haut fait cet effet sur tout le long de la page... et c'est pas fait avec une image.
Le bouton d'édition se trouve en haut à droite de chacun de tes posts dans la barre ou il y a ton nom, la date et l'heure.
Quand j'ai cliqué sur ce post, je croyais que " blur " était le javascript "on blur" en fait, c'est juste le flou de ton ombre portée ?
Il y a beaucoup de sites qui utilisent ce genre d'ombre sans que css empèche quoi que ce soit. Ce doit être que tes blocs images n'englobent pas toutes la surface, ombre comprise... Je ne vois rien d'autre, car une image avec ou sans représentation d'une ombre... reste une image. Css ne peut pas dégrader la qualité d'une image. Il peut, quand on le veut, modifier les rapports hauteurs/largeur, l'échelle, l'opacité et c'est tout. Certains utilisent des méthodes plus sophistiquées pour leurs ombres de blocs AListApart : ombres portées sous les blocs mais ça reste fabriqué avec des images comme les tiennes et leur rendu est correct.
Karyboo: c'est fait avec une image Smiley smile

Aureance: l'article est très bien mais vu que IE a du mal avec png je ne peux pas vraiment appliquer sur mon site et puisque mon background est de couleur différente je ne peux pas utiliser le gif donc aucune des deux solutions est possible pour mon cas.

Je crois que tant que IE7 est pas sorti il-y aura pas de solution Smiley decu
Kariboo, c'est Cette image qui fait l'ombre sur le site que tu me montres !

Moi, j'ai déjà fait ca grace à un fond et une Div centré.
Si tu maitrise bien CSS, aucune raison qu'il y ait des décallages de quelques pixels en fonction du navigateur. Smiley ravi
Effectivement c'est bien une image... Fock Smiley ravi !

De toute facon c'est le résultat qui compte... avec une image aussi légère que celle la on obtient un bon effet donc c'est cool.
Modifié par karyboo (19 Jul 2005 - 14:58)
Sylvain a écrit :
Si tu maitrise bien CSS, aucune raison qu'il y ait des décallages de quelques pixels en fonction du navigateur. Smiley ravi


J'y suis arrivé jusqu'au moment ou je le teste en 800x600 .... Smiley langue .
C'est pas gagné quoi donc en attendant IE7 j'oublie cette idée, dommage.
Sujet clos
Aller à