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.

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

##　

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>

The above code will output the following result:

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

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

Copy after login

　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.

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!