HTML5 practices-how to use css3 to enrich our image styles-Part2

ArticleDirectory

• Problem
• Previous solutions
• New Solution
• Image Style
• Browser compatibility

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

 

In the previous tutorial "HTML5 practice-css3 image style", I introduced how to add imagesBackground-ImagePackaging, with the helpBox-shadow and border-radius are used to set a variety of image styles. If you are interested, you can read back. But recently I encountered a problem when designing the phototouch topic,The background-image size cannot be adjusted, which is not ideal for responsive design. We will try to solve the problem today.

Demo preview: http://webdesignerwall.com/demo/css3-image-styles-part-2/

 

Problem

Most browsersBorder-radius and Embedded Box-shadow rendering are not perfect. This means that you cannot create relief, highlight, compression, and other effects for images.

 

Previous solutions

In the previous solution, we added the image PackagingThe background-image attribute solves the preceding problem.

Problems with background-Image

The problem with using background-image is that it cannot dynamically scale the image size. Therefore, this method is not suitable for responsive design that requires image scaling.

 

New Solution

The new solution is similar to the previous one. we add the effects of css3 to the Image Mask Layer: After pseudo class. The advantage of this is that the image maintains integrity and condensibility.

Jquery statements that achieve dynamic results

Jquery will query # all the images under the demo, and then add them dynamicallySPAN packaging.

<SCRIPT type = "text/JavaScript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript">$ (Document). Ready (Function() {$ ('# Demo IMG'). Each (Function(){VaRImgclass = $ (This). ATTR ('class'); $ (This). Wrap ('<SPAN class = "image-wrap' + imgclass + '" style = "width: auto; Height: auto;"/>'); $ (This). Removeattr ('class');});});</SCRIPT>
 

Output result

The aboveCodeThe following result is output:

 
<SpanClass= "Image-wrap"Style= "Width: auto; Height: auto ;"><IMGSRC= "Image.jpg"></Span>
 

CSS skills

The CSS technique is simple. The masking effect is used.. Image-wrap: above after, BOrder-radius is used on both the image and. Image-wrap: After to achieve the style effect.

CSS

 . Image-wrap { Position : Relative ; Display : Inline-block ; Max-Width : 100% ; Vertical-align : Bottom ;} . Image-wrap: After { Content : '' ;Width : 100% ; Height : 100% ; Position : Absolute ; Top : -1px ; Left : -1px ; Border : Solid 1px # 1b1b1b ; -Wekbit-box-shadow :Inset 0 0 1px rgba (255,255,255,. 4), inset 0 1px 0 rgba (255,255,255,. 4), 0 1px 2px rgba (, 0,. 3) ; -Moz-box-shadow : Inset 0 0 1px rgba (255,255,255,. 4), inset 0 1px 0 rgba (255,255,255,. 4), 0 1px 2px rgba (, 0,. 3) ; Box-shadow : Inset 0 0 1px rgba (255,255,255,. 4), inset 0 1px 0 rgba (255,255,255,. 4), 0 1px 2px rgba (, 0,. 3) ; -WebKit-border-radius : 7px ; -Moz-border-radius : 7px ;Border-radius : 7px ;} . Image-wrap img { Vertical-align : Bottom ; -WebKit-box-shadow : 0 1px 2px rgba (0, 0,. 4) ; -Moz-box-shadow : 0 1px 2px rgba (0, 0,. 4) ; Box-shadow : 0 1px 2px rgba (0, 0,. 4) ;-WebKit-border-radius : 6px ; -Moz-border-radius : 6px ; Border-radius : 6px ;}

 

Image Style

Many different effects, such as relief, cutting, compression, and highlight, can be achieved through multiple embeddedBox-shadows attribute. You can also use: Before to achieve another layout effect, such as highlight. You can view the demo.Source codeTo learn more. Then, you canAdjust the size of your browser window to check whether the image size has changed.

 

Browser compatibility

This technique is supported by most modern browsers that support JavaScript and css3, for example:Chrome, Firefox, Safari, and ie9 +.

 

Address: http://webdesignerwall.com/tutorials/css3-image-styles-part-2

 

HTML5 practice series