CSS3 design page Case: Beautiful Web page picture design CSS Instance

Article Introduction: today I'm going to revisit this topic and show you how much can be achieved by using background-image methods. I'll show you how to use Box-shadow, Border-radius and transition to create different picture styles.

Translated from: CSS3 Image Styles
Chinese: CSS3 Picture Style
Please respect the copyright, reproduced please indicate the source, thank you ~ ~

When directly applying CSS3 inset Box-shadow or Border-radius directly on picture elements, browsers do not render them perfectly. However, if you use this image as a background image, you can add any style to it and the browser will render it nicely. Darcy Clarke and I did a simple tutorial on how to use jquery to dynamically create the perfect fillet picture . Today I'm going to revisit this topic and show you how much can be achieved by using background-image methods. I'll show you how to use Box-shadow, Border-radius and transition to create different picture styles.

Let's see the demo.

Questions (see demo)

Take a look at the demo, notice that the Border-radius and inset Box-shadow are used in the first line of the picture. Firefox renders Border-radius directly on the image element, but does not render inset Box-shadow. Chrome/safari are neither rendered.

Solution

To make Border-radius and inset Box-shadow work, the solution is to change the actual picture to Background-image.

Dynamic method

For dynamic implementation, you can simply use jquery to wrap a background picture outside of each picture element. The following jquery code will wrap all the pictures outside a span label and use the picture as its background image (the jquery code is written by Darcy Clarke ).

1 2 3 4 5 6 7 8 9 ten 13

<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 "+ $). attr ("class") + " style=" position:relative; Display:inline-block; Background:url ("+ $ (This). attr (" src ") +") No-repeat Center Center; Width: "+ $ (This)." width () + "px"; Height: "+ $ (this)." Height () + "PX;" /> "; }); $ (this). CSS ("opacity", "0"); }); </script>

Output

The script above will output the following HTML code:

1 2 3

<span class= "Image-wrap style=" position:relative display:inline-block background:url (image.jpg) No-repeat Center Center; width:150px; height:150px; " > </span>

Round picture (see demo)

Now that the picture is used as a background image, you can add whatever style you want to it. Here is a simple circular picture using the Border-radius implementation. If you don't know much about CSS3, you can read the basics of CSS3, or you can search for a front end observation .

Css

1 2 3 4 5

. Circle . image-wrap { -webkit-border-radius: 50em; -moz-border-radius: 50em; Border-radius: 50em; }

Card Style (see demo)

Here is a picture style like a card, with a number of inset Box-shadow.

Css

1 2 3 4 5 6 7 8 9

. 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 (see demo)

With a little change, I can convert the card style to emboss ...

Css

1 2 3 4 5 6 7 8 9

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

Soft relief Style (see demo)

And the relief style is really like, I just added a 1px of virtual ~ ~

Css

1 2 3 4 5 6 7 8 9

.soft-embossed. Image-wrap {-webkit-box-shadow:inset 0 0 4px Rgba (0,0,0,1), Inset 0 2px 1px rgba (255,255,255,.5), inset 0-9px 2px rgba (0,0,0,.6), inset 0-12px 2px Rgba (255,255,255,.3); -moz-box-shadow:inset 0 0 4px Rgba (0,0,0,1), inset 0 2px 1px rgba (255,255,255,.5) , inset 0-9px 2px rgba (0,0,0,.6), inset 0-12px 2px rgba (255,255,255,.3); Box-shadow:inset 0 0 4px Rgba (0,0,0,1), inset 0 2px 1px rgba (255,255,255,.5), Inset 0-9px 2px Rgba (0,0,0,.6), inset 0-12px 2px rgba (255,255,255,.3); -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }

Clip art style (see demo)

Also just inset Box-shadow, I can make it look like clip art.

Css

1 2 3 4 5 6 7 8 9

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

Distortion and luminescence (see demo)

In this case, I've added a variant to the picture's outer container. When mouseover, it changes from rounded corners to rounded, and then increases the glow effect. The luminous effect is achieved through multiple Box-shadow.

Css

1 2 3 4 5 6 7 8 9 19

. morphing-glowing . image-wrap { -webkit-transition:1s; -moz-transition:1s; Transition:1s; -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; }

LED Mask (see demo)

The Glow gradient mask is implemented by: after pseudo elements ...

Css

1 2 3 4 5 6 7 8 9 26 ( est )

. Glossy . image-wrap { -webkit-box-shadow: inset 0 -1px 0 rgba (0,0,0,.5); -moz-box-shadow: inset 0 -1px 0 rgba (0,0,0,.5); Box-shadow: inset 0 -1px 0 rgba (0,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 ( 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 (see Demo)

In this case, I move the mask gradient to the bottom, so it's a reflection ...

Css

1 2 3 4 5 6 7 8 9 24 ( est )

. 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) 0, Rgba (255,255,255,0) 100%); Background:-webkit-gradient (linear, left top , left bottom, color-stop (0%,rgba)), Color-stop (100%,rgba (255,255,255,0))); Background:linear-gradient (Top, Rgba (0,0,0,.3) 0%,rgba (255,255,255,0) 100%); Reflection . image-wrap:hover { position: relative; Top: -8px; }

Gloss and Reflection (see Demo)

In this example, I also used: before and: after pseudo elements to achieve a reflection of the luster effect.

Css

1 2 3 4 5 6 7 8 9 30 (a) (a) This is the same as the $ 50

. glossy-reflection. image-wrap {-webkit-box-shadow:inset 0-1px 0 rgba (0,0,0,.5), in Set 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 (0,0,0,.5), inset 0 1px 0 rgba (255,255,255,.6); -webkit-transition:1s; -moz-transition:1s; Transition:1s; -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)), 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 (see demo)

Here it uses: after pseudo elements to achieve a tape-style gradient at the top of the picture.

Css

1 2 3 4 5 6 7 8 9 21

. 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)), 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,0,.2); }

Distortion and coloring (see demo)

In this example, I used the following element to add a glow gradient to the mouseover.

Css

1 2 3 4 5 6 7 8 9 30 (a) (a) 38 km/SO

. morphing-tinting. image-wrap {position:relative; -webkit-transition:1s; -moz-transition:1s; Transition:1s; -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:1s; -moz-transition:1s; Transition:1s; -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%, (Rgba (0,0,0,0)), to (Rgba (0,0,0,1)); Background:-moz-radial-gradient (50% 50%, Circle, Rgba (0,0,0,0) 40px, Rgba (0,0,0,1) 80px); }

Circle with feathering Edge (see demo)

A divergent gradient can also be used as a masking layer to achieve a circular feather effect.

Css

1 2 3 4 5 6 7 8 9 19

. 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%, m, 50% 50%, 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 support

The method in this article can be used in browsers that support Border-radius, Box-shadow,: Before and: After pseudo elements, such as Chrome/safari/firefox, and in some backward browsers such as IE9 (including IE9) Can not fully support--IE6/7/8 without any performance, IE9 will have ordinary rounded corners.

Use your creativity.

As you can see, you could almost use: before and: after pseudo elements to achieve any effect. If you use CSS3 to achieve more creative picture effects, welcome to share with you through the comments.

PS, this article uses: Before/:after to implement pseudo element, in fact, I recommend using double colon, although the single colon has more browser support, but for these CSS3 implementation of the effect, double colon is more secure.