HTML5 practice-detailed explanation of how to use css3 to enrich image styles (2)-H5 Tutorial-php.cn

Table of Contents

Problem

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.

The above code will output the following result:

Home

Web Front-end

H5 Tutorial

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

黄舟

Mar 23, 2017 pm 03:58 PM

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>

Copy after login

Output result

The above code will output the following result:

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

Copy after login

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: &#39; &#39;;
    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.

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn