Effet d'ombre de boîte ne fonctionne pas pour le diaporama

Question

J'ai un curseur très simple et j'essaye d'implémenter le # 5 à ce lien http://www.paulund.co.uk/creating-different-css3-box-shadows-effects pour toutes les images dans le diaporama. Je n'ai pas beaucoup de chance! Je n'arrive à rien du tout. Merci d'avance pour toute aide.

le css slide:

.blueberry { margin: 0 auto; padding-bottom:25px; width:auto;} 

.blueberry .slides { 
    display: block; 
    position: relative; 
    overflow: hidden; 
} 

.blueberry .slides li { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

.blueberry .slides li img { 
    display: block; 
    width: 100%; 
    max-width: none; 
} 

.blueberry .slides li.active { display: block; position: relative; } 
.blueberry .crop li img { width: auto; } 

.blueberry .pager { 
    height: 40px; 
    text-align: center; 
} 

.blueberry .pager li { display: inline-block; } 
.blueberry .pager li a, 
.blueberry .pager li a span { 
    display: block; 
    height: 4px; 
    width: 4px; 
} 

.blueberry .pager li a { 
    padding: 18px 8px; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    -o-border-radius: 6px; 
    -ms-border-radius: 6px; 
    -khtml-border-radius: 6px; 
    border-radius: 6px; 

} 

.blueberry .pager li a span { 
    overflow: hidden; 
    background: #c0c0c0; 
    text-indent: -9999px; 
    -webkit-border-radius: 2px; 
    -moz-border-radius: 2px; 
    -o-border-radius: 2px; 
    -ms-border-radius: 2px; 
    -khtml-border-radius: 2px; 
    border-radius: 2px; 

} 

.blueberry .pager li.active a span { 
background: #404040; 

} 

.shadow:before, .shadow:after 
{ 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 25px; 
    left: -25px; 
    width: 50%; 
    top: 80%; 
    max-width:400px; 
    background: #777; 
    -webkit-box-shadow: 0 35px 20px #777; 
    -moz-box-shadow: 0 35px 20px #777; 
    box-shadow: 0 35px 20px #777; 
    -webkit-transform: rotate(-8deg); 
    -moz-transform: rotate(-8deg); 
    -o-transform: rotate(-8deg); 
    -ms-transform: rotate(-8deg); 
    transform: rotate(-8deg); 
} 

.shadow:after { 

    -webkit-transform: rotate(8deg); 
    -moz-transform: rotate(8deg); 
    -o-transform: rotate(8deg); 
    -ms-transform: rotate(8deg); 
    transform: rotate(8deg); 
    right: 10px; 
    left: auto; 
} 

HTML:

<div class="blueberry"> 
    <ul class="slides shadow"> 
    <li><img src="images/avatar.jpg" /></li> 
    <li><img src="images/ironman.jpg" /></li> 
    <li><img src="images/tron.jpg" /></li> 
    <li><img src="images/greenhornet.jpg" /></li> 
    </ul> 
</div> 

Answer 1

Vous devez appliquer la classe "active" à l'un de voir quoi que ce soit de l'li. Puis revenez sur ce site et regardez le code avant/après pour l'effet d'ombre. Ce n'est pas n'importe où dans votre CSS pour le moment

Okay, cool. Regardez le jsfiddle de Wolf, notez que l'ombre est appliquée à un h3, pas l'image ou le li lui-même. Si vous l'appliquez à la li, vous obtiendrez une étrange bizarrerie.

Answer 2

Essayez le demo here

Ici, j'ai modifié le CSS pour la classe box

.box { 
    width:70%; 
    height:200px; 
    background:#FFF; 
    margin:40px auto; 
    background-image:url('http://unleashthefanboy.s3.amazonaws.com/wp-content/uploads/2012/05/MARK2.jpg'); 
    background-color:#cccccc; 
    background-size:100%; 
}