Some CSS3 picture styles of the upper

Last Update:2017-02-28 Source: Internet

Author: User

Tags add reflection relative

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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).

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

. 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

. 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-1p X 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

. 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

. 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), I Nset 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-1 2px 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

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

. 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 (2 55,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 (a) (p) (). td>

.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 (0%,rgba)), 255,255,255,0.7 (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

. 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)), 0,0,0,.3 (Color-stop ( 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), 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 (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 (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
	(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

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 3p
	x 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 RGB
A (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
	(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%, 80, From (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

. 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%, Rgba), to (255,255,255,0 (RGBA)) );
	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. For more reason, you can refer to: Before and:: The difference of before

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More