28173 sujets

CSS et mise en forme, CSS3

Salut,

Je viens de lire ce tutoriel concernant la création d'un ombre portée sur un texte.

A la fin de la 2eme solution, Raphaël indique
a écrit :
Important : Notez que pour l'instant, Internet Explorer (dans toutes ses versions) ne reconnaît pas encore la pseudo-classe :after. Dans ce navigateur, seul le titre (c'est à dire l'ombre) sera affiché. Attention à ne pas lui donner une couleur trop similaire au fond de page !


Dans ce cas précis, puisque IE ne reconnait pas :after, pourquoi ne pas utiliser une règle que seul IE reconnait, les filtres "filter:shadow quelque chose" ?
J'ai trouvé une autre solution, entièrement compatible (à quelques pixels de décalage d'ombre près) et qui fonctionne sous FF et IE sans hack.
Elle devrait pouvoir fonctionner sur les autres navigateurs.

C'est sûr qu'elle n'est pas très "propre" mais, en attendant mieux, elle permet de choisir n'importe quel couleur pour l'ombre et on peut ajouter une image de fond. Voir un exemple ici (le texte "Nos Clients")

Voici le code HTML
	<div id="TitrePage">
		<span id="ombre">Nos Clients</span>
		<div id="titre">Nos Clients</div>
	</div>

et le code CSS
#TitrePage {
	position: relative;
	background: url(trait.gif) white repeat-x left center;
	padding: 15px 0;
	border: solid 0px red;
	}
/* Propriétés communes */
#TitrePage #ombre, #TitrePage #titre {
	font: bold 32px/32px verdana, sans-serif;
	padding-right: 15px;
	border: solid 0px blue;
	}
/* Propriétés propres */
#TitrePage #ombre {
	color: LightGrey;
	background-color: white;
	}
#TitrePage #titre {
	background-color: transparent;
	position: absolute;
	color: black;
	top: 12px;
	left: -3px;
}

Le principe est le suivant (on veut que l'ombre soit à 3px à droite et en à 3px en bas) :
- Le calque conteneur sert à position l'ensemble et à fournir une image de fond globale
- Le span réprésente l'ombre. son fond est opaque de façon à masquer le background derrière le texte.
- Le div représente le texte. il est positionné en absolute (c'est pourquoi le contenuer est lui-même positionné). Son déclage est facilement calculable :
* top = 12px = le padding du conteneur - les 3px voulus = 15 - 3 = 12
* left = directement le décalage voulu en négative = -3

Les avantages :
- Simple d'emploi
- Cross Browsers
- Pas de restrictions sur la couleur de l'ombre
- Pas de hack
- on peut mettre un background qui sera ou non masqué par le texte

Les inconévients :
- Le code HTML est plus "lourd" car, même sans la gestion du fond d'écran, il faut le conteneur. Sauf si le titre se place en haut d'un conteneur existant (qui doit être positionné je le rappele) ou sur le body.
- il existe un léger décalage entre la position de l'ombre sous FF et celle sous IE. Pourquoi ? Mystère !

J'attend vos critiques (ça vaa saaaaiiiiignnneerr Smiley kc )et propositions d'amélioration.

Smiley cligne
Modérateur
Si c'est pour créer l'ombre sur un titre, il faudrait donc utiliser une balise de titre : h1,h2,h3,h4..etc.

Ensuite, je ne suis pas sûr que c'est une bonne idée d'ajouter du contenu au document html juste pour donner un effet d'ombre. Si on désactive le CSS, je doute que l'effet soit agréable :

Nos clients Nos clients

Je préfère laisser tomber l'effet d'ombre plutôt que mettre du contenu textuel inutile au document. Surtout que l'effet d'ombre n'apporte pas vraiment un plus au niveau design. Ca reste un choix personnel.
Modifié par Merkel (12 May 2005 - 19:26)
Ricou13 a écrit :


 <div id="TitrePage">
<span id="ombre">Nos Clients</span>
<div id="titre">Nos Clients</div>
</div>



Alors celle là elle est un peu forte...

Déjà que mettre 2 fois le même texte c'est très très très très très très très très et encore une fois très limite, mais alors les <div id="titre" et j'en passe, c'est magnifique...

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, y en avait pas assez ? ahh non, t'as pas sur lequel choisir sous la profusion...
Olivier a écrit :
Déjà que mettre 2 fois le même texte c'est très très très très très très très très et encore une fois très limite, mais alors les <div id="titre" et j'en passe, c'est magnifique...
J'avais prévenu que c'étais pas très "propre" mais la solution du tuto ne fonctionne pas avec IE et ne peut pas mettre de background qui disparaisse sous le texte.

J'avais oublié, effectivement, ce point de texte en double dans les inconvénients. Je te fais remarquer que, certes, ça n'apparait pas à l'écran mais dans la solution du tuto, on doit également saisir 2 fois le même texte.

Bon je sais, c'est pas une excuse Smiley confused mais je préciserais, comme circonstance atténuante que je suis néophique en CSS autrement que pour mettre des font à des liens.

Je cherche à faire cet effet car il existe déjà (en image) sur mon site original , qu'il plait bien au patron de la société, mais je voudrais éviter de créer des images pour chaque page surtout que le catalogue de produits est dynamique (bdd et php) et qu'il s'étoffe tous les jours.

Alors ! Comment y fait le monsieur pour mettre une image de fond ? Smiley smile
Olivier a écrit :
Utilises sFIR pour ce genre de trucs, là c'est vraiment de la bidouille...

Heu, c'est quoi sFIR ?
bouquins a écrit :
tu voulais dire "néophyte", je pense

Put...n la faute ! Non seulement je suis effectivement néophyte (comment j'ai pu écrire ça, moi ? Smiley sweatdrop ) mais maintenant, je passe pour un blaireau orthographyte Smiley lol

A propos de blaireau, c'est quoi la définition d'un "geek" ?
Modifié par Ricou13 (12 May 2005 - 21:52)
Olivier a écrit :
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, y en avait pas assez ? ahh non, t'as pas sur lequel choisir sous la profusion...


J'ai bien vu que sur le tuto, on utilisais <h1>, c'est pour ça d'ailleurs que j'utilise un span et un div interne. Parce que hx est de type "bloc" et prend donc toute la largeur dispo. Si on lui applique un fond blanc pour cacher le background sous le texte, le background sera caché sur toute la largeur dispo.

J'ai posté un autre sujet là-dessus
Ricou13 a écrit :


J'ai bien vu que sur le tuto, on utilisais <h1>, c'est pour ça d'ailleurs que j'utilise un span et un div interne. Parce que hx est de type "bloc" et prend donc toute la largeur dispo. Si on lui applique un fond blanc pour cacher le background sous le texte, le background sera caché sur toute la largeur dispo.

J'ai posté un autre sujet là-dessus


Tu peux mettre ton <h*> en float: left; et il prend plus toute la largeur.

sFIR, c'est une technique permettant de remplacer du texte par ce même texte en version flash, le tout en conservant le texte original pour les non utilisateurs de flash.

Un aperçu ici :
http://www.latchman.org/sam/
Olivier a écrit :
Tu peux mettre ton <h*> en float: left; et il prend plus toute la largeur.

Ben, voilà ! Fallait commence par ça Smiley biggrin

Voici donc une solution plus "propre"
HTML
<div id="TitrePage1"><h4 title="Nos Clients">Nos Clients</h4></div>
et le CSS
#TitrePage1 {
position: relative;
background: url(trait.gif) white repeat-x left center;
padding: 15px 0;
height: 30px;
}
#TitrePage1 h4 {
font: bold 32px/32px verdana, sans-serif;
color: LightGrey;
background-color: white;
margin: 0;
padding-right: 15px;
float: left;
}
#TitrePage1 h4:after {
display: block;
margin-left: -3px;
margin-top: -35px;
color: black;
content: attr(title);
}

Par contre :
- Je ne vois toujours pas de solution plus simple pour le background
- Ne fonctionne toujours pas sous IE

Je cherche du coté des filtres IE pour faire queqlque chose de compatible... Smiley cligne
Modérateur
Content que tu essaye de trouver quelque chose de plus propre. Smiley cligne

Car un grand sage a dit un jour : "Vaut mieux quelque chose de propre qui fonctionne que sur quelques navigateurs qu'un truc qui reste sale sur 100% des navigateurs."

C'était peut-être pas un grand sage finalement, mais ma conscience.
Voilà, je vous propose une version différente (je ne dis pas "améliorée" parce que sinon, je vais me faire lyncher Smiley lol )

Malheureusement cela ne résoud pas mon pb de background Smiley decu

Le principe est de faire une ombre pour IE puis de se servir des règles non reconnues pour que cela fonctionne sur les autres navigateurs
code HTML
<h1 title="Nos Clients">Nos Clients</h1>

CSS pour IE
h1 {
	float: left; /* ou width: 100%; */
	font: bold 32px/32px Geneva, verdana, sans-serif;
	color: black;
	filter:DropShadow(color=#C0C0C0, offx=3, offy=3); /* Traité par IE only */
}

C'est volontairement l'ancienne syntaxe du filter car je crois que la nouvelle (filter:progid:DXImageTransform.Microsoft.DropShadow) ne fonctionne qu'à partir de IE6.
On doit cependant définir une largeur ou mettre en float pour que le filtre s'applique (chez billou, ils devaient être en train de travailler sur le filtre "SmokePetard" quand ils ont pondu cette nécessité !)

Seul IE affichera une ombre. Reste à modifier le CSS pour les autres :
body>h1 {
	color: LightGrey;
	}
h1:after {
	display: block;
	margin-left: -3px;
	margin-top: -35px;
	color: black;
	content: attr(title);
}

- "body>h1" remet la couleur en gris puisque ce sera, en fait, l'ombre du texte. J'ai lu ici que
a écrit :
IE5 applies child selectors if they are nicely formatted:

body > div#foo{
position:fixed; /* IE5 applies this rule */
}

WOEI (Dutch expression) that sucked! We changed it to:

body>div#foo{
position:fixed; /* IE _doesn't_ apply this rule */
}

- le code du :after est exactement le même que pour le tuto

Je sais, vous allez me dire que "filter:DropShadow" c'est : Berk ! Pas beau !
Mais, utiliser des hacks speciaux IE ou des hacks que seul IE comprend, revient au même

EDIT : Vous auriez pas une petite idée pour y ajouter un background qui soit masqué sous le texte ?
Même une toute pitite !
Siouplait, j'ai une femme et un enfant

Smiley lol
Modifié par Ricou13 (13 May 2005 - 15:58)
Modérateur
Je ne dirais pas que filter:DropShadow c'est un hack, mais plutôt un style propriétaire à IE.

Je préfère de loin que tu utilise les déclarations propriétaires que d'ajouter du texte dans le document. Dédoubler du texte pour ajouter du style n'a pas de sens. C'est le travail des CSS après tout. Je ne vois aucun mal à utiliser les filters propriétaires. Un peu comme lorsqu'on veut mettre une image transparente via CSS. On utilise souvent 3 déclarations, celle pour IE, celle pour Moz, et une autre, pour être certain que ca passe pas mal partout.

Le seul mal est au niveau de la conscience, de la pureté du code CSS. Mais utiliser un filter microsoft n'a pas vraiment de répercussions négatives sauf au niveau moral, donc pour moi, c'est okay de l'utiliser si c'est vraiment voulu par le client, le boss ou le designer.
Salut,

Je viens d'essayer « filter:DropShadow » et je trouve ça vraiment moche : ce n'est pas du tout lisse !

Sinon, une solution possible (à défaut d'être parfaite) serait bien d'ajouter une seconde fois le texte, mais sous forme de commentaire (conditionnel, pour Internet Explorer) :
<h1 title="Gros titre">
<!--[if IE]><span class="ombre">Gros titre</span><![endif ]-->
Gros titre </h1>


h1 {
	font: bold 3em/1em verdana, sans-serif;
	color: red;
	padding: 0.2em;
	background: yellow;
}

h1:before, .ombre {
	display: block;
	margin-left: 0.05em;
	margin-bottom: -1.05em;
	content: attr(title);
	color: gray;	
}

Ainsi le problème en style désactivé ne se poserait plus que dans le cas de IE 5.X et supérieurs (donc potentiellement pas mal de monde quand même Smiley lol .) et plus de problème dans le cas des anciens navigateurs, IE 3 et 4 compris, ni les navigateurs textuels etc..

Néanmoins, je ne sais pas trop comment fonctionnent les lecteurs d'écran avec Internet Explorer et si ceux ci vont lire le commentaire conditionnel ?

Par rapport à ce tuto, il me paraît plus judicieux de ne pas utiliser PX comme unité, mais EM : sinon en changeant la taille des caractères, « l'ombre » se décale. Et aussi d'utiliser plutôt :before pour générer le texte qui sert d'ombre, sinon certains navigateur risqueraient de se retrouver seulement avec « l'ombre », ce qui risque ne de pas être terrible point de vue couleur !
Modifié par Alan (01 Mar 2006 - 10:24)