HTML5 practice-detailed explanation of how to use css3 to enrich image styles (2)

In the previous tutorial "HTML5 Practice - css3 Image Style", I introduced how to add background-image packaging to the image, using box-shadow and border-radius to create the image Set up a variety of styles, interested friends can read back. But recently I encountered a problem when designing the PhotoTouch theme. The background-image size cannot be adjusted, which is not ideal for responsive design. Today we will try to solve the problem.

Problem

Most browsers do not render the border-radius and embedded box-shadow effects of images perfectly. This means that you cannot create effects such as embossing, highlights, and compression for images.

## Previous solution

In the previous solution, we added background-image

to the packaging of the image. Attribute , solves the above problem.

##　

Problems with background-image

The problem with using background-image is that it cannot achieve dynamic scaling of the image size. Therefore, this method is not so suitable for responsive designs that require image scaling.

New solution

The new solution is somewhat similar to the previous one. We add the CSS3 effect to the image mask layer: after pseudo-class. The advantage of this is that the image remains intact. properties and shrinkability.

　

jqueryStatements to achieve dynamic effects

　

jquery will query all the pictures under #demo and then make them dynamic Add span 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(){

    $(&#39;#demo img&#39;).each(function() {        
    var imgClass = $(this).attr(&#39;class&#39;);
        $(this).wrap(&#39;<span class="image-wrap &#39; + imgClass + &#39;" style="width: auto; height: auto;"/>&#39;);
        $(this).removeAttr(&#39;class&#39;);
    });

});</script>

　

Output result

The above code will output the following result:

<span class="image-wrap " style="width: auto; height: auto;">
    <img src="image.jpg"></span>

　

css skills

　

The css technique is very simple. The mask effect is used on .image-wrap:after, and 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,0,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,0,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,0,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,0,.4);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,.4);

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

　Picture style

Many different effects, such as: relief, cutout, compression and highlights, etc., can be achieved by using multiple inline box-shadows properties. Of course, you can also use :before to achieve other layout effects, such as highlights. You can view the demo source code to learn more details. Afterwards, you can resize your browser window to see if 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+.

The above is the detailed content of HTML5 practice-detailed explanation of how to use css3 to enrich image styles (2). For more information, please follow other related articles on the PHP Chinese website!