首頁 > web前端 > H5教程 > HTML5實踐-使用css裝飾圖片畫廊的程式碼分享(二)

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

黄舟
發布: 2017-03-23 15:43:09
原創
1679 人瀏覽過

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

  HTML

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

1

2

3

4

5

6

7

8

9

10

<ul class="gallery clip">

    <li>

        <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">

    </li>

    <li>

        <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt="image">

    </li>

    <li>

        <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">

    </li></ul>

登入後複製

  CSS

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

1

2

3

4

5

6

7

8

9

10

11

.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屬性,容器就不會顯示。


1

2

3

4

5

6

7

8

9

.clip a:before {

    position: absolute;

    content: &#39; &#39;;

    top: -5px;

    left: -4px;

    width: 30px;

    height: 60px;

    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat;

}

登入後複製

  藝術邊框

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

1

2

3

4

5

6

7

8

9

.frame a:before {

    position: absolute;

    content: &#39; &#39;;

    top: -22px;

    left: -23px;

    width: 216px;

    height: 166px;

    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat;

}

登入後複製

  HTML5圖庫

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

包裝圖片,
包含圖片標題。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<ul class="gallery tape">

    <li>

        <figure>

            <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-4.jpg" alt="image">

            <figcaption>Image Caption</figcaption>

        </figure>

    </li>

    <li>

        <figure>

            <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-5.jpg" alt="image">

            <figcaption>Image Caption</figcaption>

        </figure>

    </li>

    <li>

        <figure> <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-6.jpg" alt="image">

            <figcaption>Image Caption</figcaption>

        </figure>

    </li></ul>

登入後複製

  CSS

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

元素,另一個針對
  • 元素。遮罩圖片overlay.png被用在了figure:before上面,膠帶圖片用在了 a:before上面。


    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    .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: &#39; &#39;;

        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: &#39; &#39;;

        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屬性轉變圖片。

    1

    2

    3

    4

    5

    6

    7

    8

    .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去篩選圖片,為不同圖片設定不同的旋轉角度。


    1

    2

    3

    4

    5

    6

    7

    .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中文網其他相關文章!

  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板