HTML5實踐-使用css裝飾圖片畫廊的程式碼分享（二）

　　在上一講中，我們的解決方案使用到了jquery去建立一個span標籤。在這一講中我們將用一種更好的解決方式，使用:before 和 :after 偽類。 :before常常會用到，他可以用來增加額外的元素。 

　　HTML

　　下面是一個以ul列表代表的圖片畫廊。

<ul class="gallery clip">
    <li>
        <img src="/static/imghwm/default1.png"  data-src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg"  class="lazy"   alt="image">
    </li>
    <li>
        <img src="/static/imghwm/default1.png"  data-src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg"  class="lazy"   alt="image">
    </li>
    <li>
        <img src="/static/imghwm/default1.png"  data-src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg"  class="lazy"   alt="image">
    </li></ul>

　　CSS

　　下面是為.gallery設定的css，這裡需要注意的一點是，我們需要為.gallery下面的a標籤設定position: relative。

.gallery {
    margin: 0 0 25px;
    text-align: center;
}.gallery li {
    display: inline-block;
    margin: 5px;
    list-style: none;
}.gallery a {
    position: relative;
    display: inline-block;
}

　　:before元素

#　　我們將會為 :before 元素指定一個30 x 60px大小的曲別針背景圖片。注意到我將css的content屬性設為空值。沒有空的content屬性，容器就不會顯示。

.clip a:before {
    position: absolute;
    content: ' ';
    top: -5px;
    left: -4px;
    width: 30px;
    height: 60px;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat;
}

　　藝術邊框

　　利用這種技術，你可以再圖片上新增任意的遮罩效果。下面的例子，我把圖片背景換成了藝術邊框。

.frame a:before {
    position: absolute;
    content: ' ';
    top: -22px;
    left: -23px;
    width: 216px;
    height: 166px;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat;
}

　　HTML5圖庫

　　我們可以使用html5標籤，創造出更進階的畫廊。下面的例子，我們使用

包裝圖片，

包含圖片標題。

<ul class="gallery tape">
    <li>
        <figure> 
            <img src="/static/imghwm/default1.png"  data-src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-4.jpg"  class="lazy"   alt="image">
            <figcaption>Image Caption</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="/static/imghwm/default1.png"  data-src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-5.jpg"  class="lazy"   alt="image">
            <figcaption>Image Caption</figcaption>
        </figure>
    </li>
    <li>
        <figure> <img src="/static/imghwm/default1.png"  data-src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-6.jpg"  class="lazy"   alt="image">
            <figcaption>Image Caption</figcaption>
        </figure>
    </li></ul>

　　CSS

#　　css中我加入了兩個:before，一個針對

元素，另一個針對

元素。遮罩圖片overlay.png被用在了figure:before上面，膠帶圖片用在了 a:before上面。

.tape li {
    width: 170px;
    padding: 5px;
    margin: 15px 10px;
    border: solid 1px #cac09f;
    background: #fdf8e4;
    text-align: center;
    box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
}.tape figure {
    position: relative;
    margin: 0;
}.tape a:before {
    position: absolute;
    content: ' ';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/overlay.png) no-repeat;
}.tape figcaption {
    font: 100%/120% Handlee, Arial, Helvetica, sans-serif;
    color: #787568;
}.tape a:before {
    position: absolute;
    z-index: 2;
    content: ' ';
    top: -12px;
    left: 50%;
    width: 115px;
    height: 32px;
    margin-left: -57px;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/tape.png) no-repeat;
}

　　CSS3 Transform

　　在這個例子中，我使用了軟木紋飾背景，並使用transform屬性轉變圖片。

.transform {
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/cork-bg.png);
    padding: 25px;
    border-radius: 10px;
    box-shadow: inset 0 1px 5px rgba(0,0,0,.4);
}.transform li {
    border: none;
}

　　Nth-of-Type

　　為了讓圖片旋轉的更隨機和自然，我使用nth-of-type去篩選圖片，為不同圖片設定不同的旋轉角度。

.transform li:nth-of-type(4n+1) {
    -webkit-transform: rotate(2deg);
}.transform li:nth-of-type(2n) {
    -webkit-transform: rotate(-1deg);
}.transform li:nth-of-type(4n+3) {
    -webkit-transform: rotate(2deg);
}

　　好了，今天的教學到此為止。

以上是HTML5實踐-使用css裝飾圖片畫廊的程式碼分享（二）的詳細內容。更多資訊請關注PHP中文網其他相關文章！