HTML5 practice-use CSS to decorate your image gallery

ArticleDirectory

• Benefits of this CSS technique
• Basic Concepts
• Ie png hack
• Appearance
• Jquery Solution
• #1. Simple Gallery
• # 1b. Mini icon
• #2. Images with text
• # 2B. Pop-up text
• #3. Mini paper clips
• #4. Cork Gallery
• Sifr version (Text replacement)
• # 4B. Tape Effect
• #5. Black Box Art Gallery
• # 5B. Phnom Penh Art Gallery
• #6. watercolor Effect
• Sifr version
• #7. Highlights
• #8. Plank Gallery
• Last comment

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

 

This section describes how to use CSS to decorate your image gallery without modifying the image source. The technique used here is also very simple, that is, to create<Span> and useBackground-image generates a mask effect. This method is simple and flexible. More than 20 styles are introduced in the demo. For more information, see.

 

Demo preview address: http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html? Tb_iframe = true & Height = 550 & width = 840

Demo: http://www.webdesignerwall.com/file/decorative-gallery-demo.zip

 

Benefits of this CSS technique

• Save time-You do not need to create an image template in Photoshop and then generate an independent file for each image.
• Retain Original Image Source-We don't have to worry about the absence of the original image when we need to change the image topic in the future. Because we didn't modify him at all.
• Relatively flexible-You only need to adjust CSS to change a completely different style.
• Work on any site-This CSS technique applies to any site or image size.
• Solve browser compatibility problems-Has passed most browser tests (Firefox, Safari, opera, and even IE6 with weird behavior ).

 

Basic Concepts

We need to create a span element in the DIV of the IMG package, which appliesBackground-image to produce the mask effect. If you do not like to insert an empty span tag, we can use JavaScript to generate it dynamically. We will introduce it later. The followingCodeReveals how he works.

For CSS code, we need to note that you need to setPosition: relative, set for Span Position: absolute. In this way, you can set the top and left attributes for the span to arbitrarily manipulate its position in the div.

 

Ie png hack

To make transparent PNG images work in IE6, we need to use the powerful iepngfix. HTC hack. Download the iepngfix. HTC file and add the following code to the

 
<! --[If lt IE 7]> <style type = "text/CSS">. Photo span {behavior: URL (iepngfix. HTC) ;}</style> <! [Endif]-->
 

 

Appearance

We only need to modify the CSS of the specified span element to realize the change of different styles. View demoSource codeYou will find the secrets.

 

Jquery Solution

If you do not like to add an empty span tag directly on the page, you can use the following jquery code to dynamically Add a span.

<SCRIPT type = "text/JavaScript" src = "jquery. js"> </SCRIPT> <SCRIPT type = "text/JavaScript">$ (Document). Ready (Function(){//Pre-add span tag$ (". Photo A"). prepend ("<span> </span>");});</SCRIPT>
 

 

#1. Simple Gallery

Let's use the previously introduced technology to create a gallery.

# 1b. Mini icon

This example shows how to place different icons on the image. We need to set different CSS class names for the span tag.

 

#2. Images with text

This example shows how to create a gallery with a text connection.

# 2B. Pop-up text

 

#3. Mini paper clips

 

#4. Cork Gallery

Sifr version (Text replacement)

In this version, we use sifr to replace the text in EM with the handwriting.

# 4B. Tape Effect

 

#5. Black Box Art Gallery

# 5B. Phnom Penh Art Gallery

 

#6. watercolor Effect

Sifr version

 

#7. Highlights

 

#8. Plank Gallery

Finally, we will show you how to useBackground-image to achieve the effect of the Board.

 

Last comment

We can see that this CSS technique is quite flexible and he is very creative. He organically combines images with CSS. You can also use this method to create galleries of different styles.

 

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

 

HTML5 practice series