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.
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>
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; }
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: ' '; top: -5px; left: -4px; width: 30px; height: 60px; background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat; }
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: ' '; top: -22px; left: -23px; width: 216px; height: 166px; background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat; }
We can use html5 tags to create more advanced galleries. In the following example, we use
##
<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>