HTML5 practice-use CSS to decorate your image gallery-Part2

Document directory

• Html
• CSS
• Art border
• HTML5 Gallery
• CSS
• Css3 Transform
• Nth-of-type

Reprinted please specify original address: http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html

 

In the previous lecture, our solution used jquery to create a span tag. In this section, we will use a better solution: before and: After pseudo classes. : Before is often used to add additional elements.

Demo preview: http://webdesignerwall.com/demo/decorative-gallery-2/

 

Html

The following is an image gallery represented by the UL list.

<ul class="gallery clip">    <li>            </li>    <li>            </li>    <li>            </li></ul>

 

CSS

The following is the CSS set for. Gallery. Note that we need to set position: relative for the 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;}

 

　　 : Before Element

We will specify a 30x60 PX background image for the before element. Note that I set the content attribute of CSS to null. The container will not be displayed if there is no empty content attribute.

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

 

Art border

With this technology, you can add any mask effect to the image. In the following example, I replaced the image background with an artistic border.

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

We can use HTML5 tags to create more advanced galleries. In the following example, we use <figure> to wrap an image and <figcaption> to include the image title.

<ul class="gallery tape">    <li>        <figure>                         <figcaption>Image Caption</figcaption>        </figure>    </li>    <li>        <figure>                        <figcaption>Image Caption</figcaption>        </figure>    </li>    <li>        <figure>             <figcaption>Image Caption</figcaption>        </figure>    </li></ul>

 

CSS

In CSS, I added two: before, one for the <figure> element and the other for the <li> element. Overlay.png is used on figure: before, and tape 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: ' ';    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

In this example, I used a cork decoration background and used the transform attribute to transform the image.

.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

To make images rotate randomly and naturally, I use Nth-of-type to filter 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);}

 

Now, the tutorial is complete.

 

Address: http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2

 

HTML5 practice series