28172 sujets

CSS et mise en forme, CSS3

[Résolu] Faire apparaitre une ombre portée avec la pseudo-classe :afte

Bonjour,

J'essaye de faire apparaitre une ombre portée sur une div en utilisant la pseudo-classe :after.
Après avoir jeté un coup d'oeil sur des exemples (creativejuiz, freshdesignweb) j'ai décidé de me lancer en en reprenant un et en l'adaptant à mon site.
La pseudo-classe :after marche bien pour le décor de la bordure de la div #niveaux .header , par contre pour l'ombre portée sur la div #niveaux .plan ça ne marche pas.

Voici le code (je ne fais apparaitre que l'essentiel):

<body>
		<div id="conteneur_header">	
			<div id="banniere">			
			</div>
		</div>	
			
		<div id="conteneur_niveaux">
			<div id="niveaux">
				<div class="plan plan1">	
					<div class="header">CP</div>
					<div class="price">$59</div>  
					<div class="monthly">per month</div>      
					<ul>
						<li><b>10GB</b> Disk Space</li>
						<li><b>100GB</b> Monthly Bandwidth</li>
						<li><b>20</b> Email Accounts</li>
						<li><b>Unlimited</b> subdomains</li>			
					</ul>
					<a class="signup" href="http://www..com">S'inscrire</a>						
				</div>
			</div>		
		
		<div id="conteneur_inf">
			<div id="inf">		
			</div>
		</div>
		<div id="conteneur_footer">
			<div id="foot">		
			</div>
		</div>		
</body>



Et la CSS:

	body 
			{
			<!--[if IE]><style type="text/css">body{ behavior: url("csshover.htc") }</style><![endif]-->						
			}
			
			* 
			{
			margin : 0;
			padding : 0;
			}
			
			body, html 
			{ 
			width: 100%;
			min-width: 990px;
			background-color:#212121;
			}
						
			img 	
			{
			border: 0; 
			}		

/* Bannière ---------------------------------*/
			
			#conteneur_header
			{
			height: 120px;
			background-color: #212121;
			/*position: relative;*/
			}
			
			#banniere
			{
			 width: 980px;
			 margin-left: auto;
			 margin-right: auto;
			 position: relative;
			}
			
/* Fin de la bannière -------------------------*/


  
/* Parie supérieure  --------------------------*/

			#conteneur_niveaux
			{
			background-color: white;
			/*height: 700px;*/
			display: block;
			}
			
			#niveaux
			{
			width: 980px;
			zoom: 1;
			margin-left: auto;
			margin-right: auto;
			padding-top: 100px;
			padding-bottom: 150px;
			margin-bottom: 0;
			text-align: center;
			background-color: white;
			}
			
			#niveaux:before, #niveaux:after 
			{
			content: "";
			display: table
			}

			#niveaux:after 
			{
			clear: both
			}

			#niveaux .plan 
			{
			font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;     
			background: #fff;      
			border: 1px solid #ddd;
			color: #333;
			padding: 20px;
			width: 140px;
			float: left;
			_display: inline; /* IE6 double margin fix */
			position: relative;
			margin: 0 5px;
			-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
			-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
			box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);		
			}

			#niveaux .plan:after
			{
			z-index: -1; 
			position: absolute; 
			content: "";
			bottom: 10px;
			right: 4px;
			width: 80%; 
			top: 80%; 
			-webkit-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
			-moz-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
			box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
			-webkit-transform: rotate(3deg);    
			-moz-transform: rotate(3deg);   
			-o-transform: rotate(3deg);
			-ms-transform: rotate(3deg);
			transform: rotate(3deg);
			}
			
			/* --------------- */	

			#niveaux .header 
			{
			position: relative;
			font-size: 20px;
			font-weight: normal;
			text-transform: uppercase;
			padding: 40px;
			margin: -20px -20px 20px -20px;
			border-bottom: 8px solid;
			background-color: #eee;
			background-image: -moz-linear-gradient(#fff,#eee);
			background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
			background-image: -webkit-linear-gradient(#fff, #eee);
			background-image: -o-linear-gradient(#fff, #eee);
			background-image: -ms-linear-gradient(#fff, #eee);
			background-image: linear-gradient(#fff, #eee);
			}

			#niveaux .header:after 
			{
			position: absolute;
			bottom: -8px; left: 0;
			height: 3px; width: 100%;
			content: '';
			background-image: url(images/bar.png);
			}
	
			#niveaux .plan1 .header
			{
			border-bottom-color: #B3E03F;
			}
	
			/* --------------- */

			#niveaux .price
			{
			font-size: 45px;
			}

			#niveaux .monthly
			{
			font-size: 13px;
			margin-bottom: 20px;
			text-transform: uppercase;
			color: #999;
			}

			/* --------------- */
			
			#niveaux ul 
			{
			margin: 20px 0;
			padding: 0;
			list-style: none;
			}

			#niveaux li 
			{
			padding: 10px 0;
			}
	
			/* --------------- */
		
			#niveaux .signup 
			{
			position: relative;
			padding: 10px 20px;
			color: #fff;
			font: bold 14px Arial, Helvetica;
			text-transform: uppercase;
			text-decoration: none;
			display: inline-block;       
			background-color: #72ce3f;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;     
			text-shadow: 0 -1px 0 rgba(0,0,0,.15);
			opacity: .9;       
			}

			#niveaux .signup:hover 
			{
			opacity: 1;       
			}

			#niveaux .signup:active 
			{
			-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
			-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
			box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;       
			}			

			#niveaux .plan1 .signup
			{
			background: #B3E03F;
			}
	
/* Fin de la partie supérieure --------------------------*/

			
/* Footer --------------------------------------------*/
			
			#conteneur_footer
			{
			width: 100%;
			height: 250px;
			margin: 0;
			background-color: #212121;
			}
			
			#foot
			{
			width: 980px;
			height: 80px;
			margin-left: auto;
			margin-right: auto;
			background-color: #212121;
			padding-top: 45px;
			border: 1px solid #212121;
			}
			
/* Fin du footer --------------------------------------*/



J'ai essayé d'analyser la raison, mais je ne vois pas. Je vous livre mon raisonnement, si vous pouviez m'éclairer sur mon erreur:

- La div #niveaux .plan:after est positionnée en absolute (le positionnement est ajusté avec bottom et right) et se positionne donc par rapport à #niveaux .plan (positionnée en relative).
- #niveaux .plan:after a une z-index négative pour se positionner sous #niveaux .plan qui lui a un z-index
- L'ombre a une couleur autre que le blanc
#niveaux .plan:after n'a pas de contenu (content='' ")

... pas facile à utiliser ces pseudo-classes !

Merci pour vos lumières.
Modifié par AbouKH (16 Dec 2013 - 17:30)
Salut,

C'est une erreur de z-index, enfin.. pas vraiment.
Tu dois mettre le parent de ton élément z-index:-1 en position:relative et un z-index supérieur (ou non je sais plus, dans le lien suivant je l'ai mis au cas ou).


#niveaux{
    position:relative;
    z-index:2;
}



Voici la correction
http://jsfiddle.net/aXt5V/
Modifié par artsx (16 Dec 2013 - 17:55)
Le problème est effectivement réglé en procédant comme indiqué.
Merci beaucoup d'avoir réagi rapidement et d'avoir pris le temps de tester la solution.
Sujet clos
Aller à