How to enrich image styles using the css3 attribute (Corner shadow gradient)

Comments: Use the image as the background-image. The added style browser can render the image. I will introduce how to use box-shadow, border-radius and transition create different image styles (Corner shadow gradient) and other effects

In css3, box-shadow and border-radius are used directly on the image, and the browser cannot render well. However, if the image is used as the background-image, the added style browser can render the image well. I will introduce how to use box-shadow, border-radius, and transition to create different image styles.
Problem
By viewing the demo, we can see that we have set border-radius and Embedded box-shadow for the first line of images. Firefox renders the border-radius of the image, but does not render the Embedded box-shadow. Neither chrome nor Safari is rendered.

The Code is as follows:
. Normal img {
Border: solid 5px #000;
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
-Webkit-box-shadow: inset 0 1px 5px rgba (0, 0,. 5 );
-Moz-box-shadow: inset 0 1px 5px rgba (0, 0,. 5 );
Box-shadow: inset 0 1px 5px rgba (0, 0,. 5 );
}

Firefox Effect:
 
Chrome/safari
 

Work und
To enable border-radius and Embedded box-shadow to work normally, we need to convert the image into a background-image method.
 
Dynamic Mode
To do this dynamically, we need to use jquery to add a background image packaging for each image. The following js Code adds a span package for each image. The background image path of the span is the image path.
The code is relatively simple and I don't think it is necessary to explain it. You can directly query the jquery api.

The Code is as follows:
<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 (){
$ ("Img"). load (function (){
$ (This). wrap (function (){
Return '<span class = "image-wrap' + $ (this ). attr ('class') + '"style =" position: relative; display: inline-block; background: url (' + $ (this ). attr ('src') + ') no-repeat center; width:' + $ (this ). width () + 'px; height: '+ $ (this ). height () + 'px; "/> ';
});
Certificate (this).css ("opacity", "0 ");
});
});
</Script>

Output
The above code will output the following results:

The Code is as follows:
<Span class = "image-wrap" style = "position: relative; display: inline-block; background: url(image.jpg) no-repeat center; width: 150px; height: 150px; ">

</Span>

Circular Image
Add border-radius to implement the Circular image. The effect is as follows:
 
Css:

The Code is as follows:
. Circle. image-wrap {
-Webkit-border-radius: 50em;
-Moz-border-radius: 50em;
Border-radius: 50em;
}

Card Style
The following is a card-style image that uses multiple Embedded box-shadow.
 
Css:

The Code is as follows:
. Card. image-wrap {
-Webkit-box-shadow: inset 0 0 1px rgba (0, 0, 0 ,. 8), inset 0 2px 0 rgba (255,255,255 ,. 5), inset 0-1px 0 rgba (0, 0, 0 ,. 4 );
-Moz-box-shadow: inset 0 0 1px rgba (0, 0, 0 ,. 8), inset 0 2px 0 rgba (255,255,255 ,. 5), inset 0-1px 0 rgba (0, 0, 0 ,. 4 );
Box-shadow: inset 0 0 1px rgba (0, 0, 0 ,. 8), inset 0 2px 0 rgba (255,255,255 ,. 5), inset 0-1px 0 rgba (0, 0, 0 ,. 4 );
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
}

Embossed Style
The following is the relief effect.
 
Css:

The Code is as follows:
. Embossed. image-wrap {
-Webkit-box-shadow: inset 0 0 2px rgba (0, 0, 0 ,. 8), inset 0 2px 0 rgba (255,255,255 ,. 5), inset 0-7px 0 rgba (0, 0, 0 ,. 6), inset 0-9px 0 rgba (255,255,255 ,. 3 );
-Moz-box-shadow: inset 0 0 2px rgba (0, 0, 0 ,. 8), inset 0 2px 0 rgba (255,255,255 ,. 5), inset 0-7px 0 rgba (0, 0, 0 ,. 6), inset 0-9px 0 rgba (255,255,255 ,. 3 );
Box-shadow: inset 0 0 2px rgba (0, 0, 0 ,. 8), inset 0 2px 0 rgba (255,255,255 ,. 5), inset 0-7px 0 rgba (0, 0, 0 ,. 6), inset 0-9px 0 rgba (255,255,255 ,. 3 );
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
}

Flexible relief Style
Compared with the embossed style, the 1px blur attribute is added to the new style.
 
Css:

The Code is as follows:
. Soft-embossed. image-wrap {
-Webkit-box-shadow: inset 0 0 4px rgba (255,255,255,), inset 0 2px 1px rgba ,. 5), inset 0-9px 2px rgba (0, 0 ,. 6), inset 0-12px 2px rgba (255,255,255 ,. 3 );
-Moz-box-shadow: inset 0 0 4px rgba (255,255,255,), inset 0 2px 1px rgba ,. 5), inset 0-9px 2px rgba (0, 0 ,. 6), inset 0-12px 2px rgba (255,255,255 ,. 3 );
Box-shadow: inset 0 0 4px rgba (255,255,255,), inset 0 2px 1px rgba ,. 5), inset 0-9px 2px rgba (0, 0 ,. 6), inset 0-12px 2px rgba (255,255,255 ,. 3 );
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
}

Image cutting style
You can use the Embedded box-shadow to achieve the image cutting effect.
 
Css:

The Code is as follows:
. Cut-out. image-wrap {
-Webkit-box-shadow: 0 1px 0 rgba (255,255,255 ,. 2), inset 0 4px 5px rgba (0, 0, 0 ,. 6), inset 0 1px 0 rgba (0, 0, 0 ,. 6 );
-Moz-box-shadow: 0 1px 0 rgba (255,255,255 ,. 2), inset 0 4px 5px rgba (0, 0, 0 ,. 6), inset 0 1px 0 rgba (0, 0, 0 ,. 6 );
Box-shadow: 0 1px 0 rgba (255,255,255 ,. 2), inset 0 4px 5px rgba (0, 0, 0 ,. 6), inset 0 1px 0 rgba (0, 0, 0 ,. 6 );
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
}

Deformation and Luminescence
In this example, we add the transition attribute to the image packaging. When the mouse slides over, it changes from rounded to circular. Then we use multiple box-shadow to achieve the luminous effect.
 
Css:

The Code is as follows:
. Morphing-glowing. image-wrap {
-Webkit-transition: 1 s;
-Moz-transition: 1 s;
Transition: 1 s;
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
}
. Morphing-glowing. image-wrap: hover {
-Webkit-box-shadow: 0 0 20px rgba (255,255,255,. 6), inset 0 0 20px rgba (255,255,255, 1 );
-Moz-box-shadow: 0 0 20px rgba (255,255,255,. 6), inset 0 0 20px rgba (255,255,255, 1 );
Box-shadow: 0 0 20px rgba (255,255,255,. 6), inset 0 0 20px rgba (255,255,255, 1 );
-Webkit-border-radius: 60em;
-Moz-border-radius: 60em;
Border-radius: 60em;
}

Highlights
The highlight effect is achieved by adding the: after pseudo class to the element.
 
Css:

The Code is as follows:
. Glossy. image-wrap {
-Webkit-box-shadow: inset 0-1px 0 rgba (0, 0,. 5 );
-Moz-box-shadow: inset 0-1px 0 rgba (0, 0,. 5 );
Box-shadow: inset 0-1px 0 rgba (0, 0,. 5 );
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
}
. Glossy. image-wrap: after {
Position: absolute;
Content :'';
Width: 100%;
Height: 50%;
Top: 0;
Left: 0;
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
Background:-moz-linear-gradient (top, rgba (255,255,255, 0.7) 0%, rgba (255,255,255,. 1) 100% );
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, rgba (255,255,255, 0.7), color-stop (100%, rgba (255,255,255 ,. 1 )));
Background: linear-gradient (top, rgba (255,255,255, 0.7) 0%, rgba (255,255,255,. 1) 100% );
}

Reflection Effect
In this example, we move the highlight effect to the bottom to implement the reflection effect.
 
Css:

The Code is as follows:
. Reflection. image-wrap: after {
Position: absolute;
Content :'';
Width: 100%;
Height: 30px;
Bottom:-31px;
Left: 0;
-Webkit-border-top-left-radius: 20px;
-Webkit-border-top-right-radius: 20px;
-Moz-border-radius-topleft: 20px;
-Moz-border-radius-topright: 20px;
Border-top-left-radius: 20px;
Border-top-right-radius: 20px;
Background:-moz-linear-gradient (top, rgba (0%, 0, 0,. 3) 255,255,255, rgba (100%, 0 );
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, rgba (, 0, 0 ,. 3), color-stop (100%, rgba (255,255,255, 0 )));
Background: linear-gradient (top, rgba (0%, 0, 0,. 3) 255,255,255, rgba (100%, 0 );
}
. Reflection. image-wrap: hover {
Position: relative;
Top:-8px;
}

Highlights and Reflections
In this example, we use before and after to combine the highlights and reflections.
 
Css:

The Code is as follows:
. Glossy-reflection. image-wrap {
-Webkit-box-shadow: inset 0-1px 0 rgba (0,0, 0,. 5), inset 0 1px 0 rgba (255,255,255,. 6 );
-Moz-box-shadow: inset 0-1px 0 rgba (0,0, 0,. 5), inset 0 1px 0 rgba (255,255,255,. 6 );
Box-shadow: inset 0-1px 0 rgba (255,255,255, 0,. 5), inset 0 1px 0 rgba (,. 6 );
-Webkit-transition: 1 s;
-Moz-transition: 1 s;
Transition: 1 s;
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
}
. Glossy-reflection. image-wrap: before {
Position: absolute;
Content :'';
Width: 100%;
Height: 50%;
Top: 0;
Left: 0;
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
Background:-moz-linear-gradient (top, rgba (255,255,255, 0.7) 0%, rgba (255,255,255,. 1) 100% );
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, rgba (255,255,255, 0.7), color-stop (100%, rgba (255,255,255 ,. 1 )));
Background: linear-gradient (top, rgba (255,255,255, 0.7) 0%, rgba (255,255,255,. 1) 100% );
}
. Glossy-reflection. image-wrap: after {
Position: absolute;
Content :'';
Width: 100%;
Height: 30px;
Bottom:-31px;
Left: 0;
-Webkit-border-top-left-radius: 20px;
-Webkit-border-top-right-radius: 20px;
-Moz-border-radius-topleft: 20px;
-Moz-border-radius-topright: 20px;
Border-top-left-radius: 20px;
Border-top-right-radius: 20px;
Background:-moz-linear-gradient (top, rgba (230,230,230,. 3) 0%, rgba (230,230,230, 0) 100% );
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, rgba (230,230,230 ,. 3), color-stop (100%, rgba (230,230,230, 0 )));
Background: linear-gradient (top, rgba (230,230,230,. 3) 0%, rgba (230,230,230, 0) 100% );
}

Tape Style
In this example, we use: after to implement the effect of the tape.
 
Css:

The Code is as follows:
. Tape. image-wrap {
-Webkit-box-shadow: inset 0 0 2px rgba (0, 0, 0 ,. (7), inset 0 2px 0 rgba (255,255,255 ,. 3), inset 0-1px 0 rgba (0, 0, 0 ,. 5), 0 1px 3px rgba (0, 0, 0 ,. 4 );
-Moz-box-shadow: inset 0 0 2px rgba (0, 0, 0 ,. (7), inset 0 2px 0 rgba (255,255,255 ,. 3), inset 0-1px 0 rgba (0, 0, 0 ,. 5), 0 1px 3px rgba (0, 0, 0 ,. 4 );
Box-shadow: inset 0 0 2px rgba (0, 0, 0 ,. (7), inset 0 2px 0 rgba (255,255,255 ,. 3), inset 0-1px 0 rgba (0, 0, 0 ,. 5), 0 1px 3px rgba (0, 0, 0 ,. 4 );
}
. Tape. image-wrap: after {
Position: absolute;
Content :'';
Width: 60px;
Height: 25px;
Top:-10px;
Left: 50%;
Margin-left:-30px;
Border: solid 1px rgba (137,130, 48,. 2 );
Background:-moz-linear-gradient (top, rgba (254,243,127,. 6) 0%, rgba (240,224, 54,. 6) 100% );
Background:-webkit-gradient (linear, left top, left bottom, color-stop (0%, rgba (254,243,127 ,. 6), color-stop (100%, rgba (240,224, 54 ,. 6 )));
Background: linear-gradient (top, rgba (254,243,127,. 6) 0%, rgba (240,224, 54,. 6) 100% );
-Webkit-box-shadow: inset 0 1px 0 rgba (255,255,255,. 3), 0 1px 0 rgba (0, 0,. 2 );
}

Deformation and coloring
In this example, we use "after" on the element to achieve radial gradient when the mouse is over.

Css:

The Code is as follows:
. Morphing-tinting. image-wrap {
Position: relative;
-Webkit-transition: 1 s;
-Moz-transition: 1 s;
Transition: 1 s;
-Webkit-border-radius: 20px;
-Moz-border-radius: 20px;
Border-radius: 20px;
}
. Morphing-tinting. image-wrap: hover {
-Webkit-border-radius: 30em;
-Moz-border-radius: 30em;
Border-radius: 30em;
}
. Morphing-tinting. image-wrap: after {
Position: absolute;
Content :'';
Width: 100%;
Height: 100%;
Top: 0;
Left: 0;
-Webkit-transition: 1 s;
-Moz-transition: 1 s;
Transition: 1 s;
-Webkit-border-radius: 30em;
-Moz-border-radius: 30em;
Border-radius: 30em;
}
. Morphing-tinting. image-wrap: hover: after {
Background:-webkit-gradient (radial, 50% 50%, 40, 50% 50%, 80, from (rgba (,), to (rgba )));
Background:-moz-radial-gradient (50% 50%, circle, rgba (,) 40px, rgba (,) 80px );
}

Yuhua edge circle
We can also use radial gradient to generate a mask to achieve the effect of feathers.
 
Css:

The Code is as follows:
. Feather. image-wrap {
Position: relative;
-Webkit-border-radius: 30em;
-Moz-border-radius: 30em;
Border-radius: 30em;
}
. Feather. image-wrap: after {
Position: absolute;
Content :'';
Width: 100%;
Height: 100%;
Top: 0;
Left: 0;
Background:-webkit-gradient (radial, 50% 50%, 50, 50% 50%, 70, from (rgba (255,255,255, 0), to (rgba (255,255,255, 1 )));
Background:-moz-radial-gradient (50% 50%, circle, rgba (255,255,255, 0) 50px, rgba (255,255,255, 1) 70px );
}

Browser compatibility
This method works well in most browsers that support the border-radius, box-shadow,: before and: after features (such as Chrome, Firefox, and Safari. In browsers that do not support new features, only the original image is displayed.
Create your own implementations
With the help of the before and after pseudo classes, you can create many styles for images. You can try to create new effects on your own.