Home > Web Front-end > H5 Tutorial > body text

HTML5 practice-code sharing for using css to decorate image galleries (2)

黄舟
Release: 2017-03-23 15:43:09
Original
1618 people have browsed it

In the previous lecture, our solution used jquery to create a span tag. In this lecture we will use a better solution, using :before and :after Pseudo-classes. :before is often used to add additional elements.

HTML

The following is a picture gallery represented by a ul list.

<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>
Copy after login

CSS

The following is the css set for .gallery. One thing to note here is that we need to set position: relative for the a tag under .gallery.

.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;
}
Copy after login

 :before element

We will specify a 30 x 60px paperclip background image for the :before element. Notice that I set the css content attribute to a null value. Without an empty content attribute, the container will not be displayed.


.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;
}
Copy after login

Art Border

Using this technique, you can add any masking effect to the image. In the example below, I changed the image background to an artistic border.

.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;
}
Copy after login

 HTML5Gallery

We can use html5 tags to create more advanced galleries. In the following example, we use

to wrap the image, and
to contain the image title.

##

<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>
Copy after login

CSS

I added two: before in css, one for the
element and the other for the
  • element. The mask image overlay.png is used on figure:before, and the tape image is used on 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: &#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;
    }
    Copy after login

    CSS3 Transform

    In this example, I used a cork texture background and transformed it using the transform attribute picture.

    .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;
    }
    Copy after login

     Nth-of-Type

    In order to make the image rotation more random and natural, I use nth-of-type to filter the images and set different rotation angles for different images.


    .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);
    }
    Copy after login
    Okay, that’s it for today’s tutorial.

    The above is the detailed content of HTML5 practice-code sharing for using css to decorate image galleries (2). For more information, please follow other related articles on the PHP Chinese website!

  • Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template