盒子陰影效果不適用於幻燈片

我有一個非常簡單的滑塊，我試圖在此鏈接http://www.paulund.co.uk/creating-different-css3-box-shadows-effects上實現幻燈片中所有圖像的＃5。我沒有太多的運氣！我什麼都得不到。感謝您提前提供任何幫助。盒子陰影效果不適用於幻燈片

幻燈片CSS：

.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>

來源

2013-01-08 user1913714

您需要的類「活動」適用於禮的什麼都看不到一個。然後返回該網站並查看陰影效果的前/後代碼。它目前不在你的CSS中的任何地方

好的，很酷。看看Wolf的jsfiddle，注意到這個影子被應用到h3上，而不是圖像或li本身。如果你把它應用到李，你會得到一些非常怪異的怪異。

來源

2013-01-08 18:19:08

我添加它這裏 - 請參閱更新 – user1913714

我直接應用於影子藍莓類和它的工作就像一個魅力。謝謝！我試圖將它應用於李和img。我沒有足夠的聲望投票你或我會。 – user1913714

嘗試demo here

在這裏，我已經修改了CSS類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%; 
}

來源

2013-01-08 18:28:38 Wolf

盒子陰影效果不適用於幻燈片

回答

相關問題