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

Source: Internet
Author: User
Tags add reflection relative

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.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.