[Résolu] Ombre générée par CSS sur un cadre (:after)

Bonsoir à tous,

Mon problème est simple et je suppose qu'il y a une solution, moins simple certainement.

J'ai ce code HTML :

<h1>Texte</h1>

A côté, j'ai ce code CSS :

 h1 {
	background-image : url('../images/barre_titre.png');
	background-repeat : no-repeat;
	background-position : -1px 0;
	width : 560px;
	height : 27px;
	padding : 3px 0 0 5px;
	font-size : 8pt;
	font-weight : normal;
	color : #CCFFFF;
}

Comme vous pouvez le voir, le CSS génère autour du titre un cadre.

J'aimerais savoir s'il est possible, sans ajouter de code HTML, de faire une ombre sur ce cadre (top et right). Je songeais à utiliser l'attribut :after (les utilisateurs d'IE sauront s'en passer).

Merci d'avance.
Modifié par versgui (30 Oct 2006 - 02:18)

bonjour,

il suffit d'essayer pour savoir, ma demarche de test serait plutot sur before , un content vide , des dimensions legeremnt superieurs pour debordées , un positionnement en absolu et un z-index inferieur au h1 lui même ...

Enfin suffit de tester

++

Oups, tout d'abord je corrige mon code CSS, ce n'est pas le bon (mauvais copié/collé). Voici le bon :

h2 {
	border-top : 1px #9494FF solid;
	background-color : #6363C6;
	text-align : center;
	color : #CCFFFF;
	width : 98%;
	height : 15px;
	font-size : 9pt;
	font-family : Arial, Helvetica, sans-serif;
	font-weight : normal;
	padding : 2px 0 2px 0;
	margin-left : auto;
	margin-right : auto;
}

Bon, a priori, ca ne change rien.

J'ai ajouté un z-index : 99; sur la classe de h2 et j'ai créé cette classe :

h2:before {
	background-color: #000000;
	width : 100%;
	height : 17px;
	position : absolute;
	z-index : 98;
	content : "";
}

Rien n'est affiché (comme si la seconde classe n'existait pas).

re,

il manque un display:block; pour utilisé le pseudo element comme une balise supplementaire et pas seulement ajouté du texte ou une image .

essai ceci :
( le positionnement absolu est du au fait de son comportement block ! , la marge negative , sert juste a la resituée.)

h2:after {
height : 17px;
content:"";
border:3px solid;
border-top:0;
border-left:0;
display:block;
margin-top:-17px;
position:absolute;
}

heu , teste , car j'ai tester ça en ligne dans une popup et seulement avec firefoxe.

le :after est plus approprié en effet .

++
Modifié par gcyrillus (29 Oct 2006 - 23:45)

Merci, cela fonctionne très bien sous Firefox

J'ai dû enlever l'attribut position pour des raisons de compatibilité avec le reste de mon code CSS, il ne semble pas indispensable.

En revanche, il y a un soucis sous Opera : la bordure inférieure du cadre généré par la classe h2:after est 2 pixels trop haute. Je soupconne un bug de la part de ce navigateur et je ne sais pas trop comment le corriger (j'ai essayé avec toutes les valeurs de position et de modifier la valeur de height des deux classes sans succès).

Hors-sujet : y aurait pas un bug avec boutons de mise en forme sur ce forum ? Ils se mettent à la fin du texte...
Modifié par versgui (30 Oct 2006 - 00:29)

le bug d'opera provient du padding-top , il ne fusionne pas toujours les marges , ce bug se retrouve aussi parfois sur les marges horizontales.
pour garder ton padding-top , simule le avec un line-height , approximativement , un line-height:1.2em; pourrait faire l'affaire . retest quoi !

++<edit> le plus simple serait peut-etre de dimensioné l'ensemble en em (polices comprises , attention au petit ecart de IE pour le dimensionnement des titres ).
code testé

h2 {
	border-top : 1px #9494FF solid;
	background-color : #6363C6;
	text-align : center;
		width : 98%;
	height : 1em;
	font-size : 9pt;
	font-family : Arial, Helvetica, sans-serif;
	font-weight : normal;
	padding : 0px 0 0.2em 0;
	margin-left : auto;
	margin-right : auto;
        line-height:1.2em;


}
h2:after {
	 
	height : 1.2em;
	content:"";
        border:0.2em solid;
        border-top:0;
        border-left:0;
        display:block;
        margin-top:-1.2em;
margin-bottom:-0.2em;/* reprend le padding qui traine dans opera */
        
}

ça devrait mieux passer dans opera maintenant , grosso-modo il te faut retranché les padding de h2 sur : after (ou les elements suivant parfois , car opera ne les fusionnent pas , et les reportent un peu plus loin.

si besoin , re-annulé la marge negative du :after avec une marge positive sur h2 ... bidouille bidouille , ...
mais qui a raison dans cette affaire Opera ou lFirefoxe ?
re ++
Modifié par gcyrillus (30 Oct 2006 - 01:27)

Merci beaucoup, en gardant les valeurs en pixels, l'utilisation de margin-bottom avec une valeur négative semble suffisant