Use CSS3 pseudo elements to implement Stereo Photo stacking effect, css3

Use CSS3 pseudo elements to implement Stereo Photo stacking effect, css3

The pseudo elements introduced in CSS3 allow Web developers to produce complex visual effects without adding HTML tags. For example, before and afterCSS3Pseudo elements can help you achieve a lot of interesting results. This tutorial will show you how to useCSS3Create a set of beautiful image stack effects for the elements.

 

 

Download the demo plug-in

 

Articles you may be interested in

• 10 useful results in Web development [Source Code download]
• Excellent jQuery Ajax paging plug-ins and tutorials carefully selected
• 12 amazing creative 404 error page Designs
• Let the website get started! 12 excellent jQuery animation plug-ins
• Amazing 8 HTML5 & JavaScript Special Effects

 

Link to this article: Use CSS3 pseudo elements to achieve the visual effect of photo Stack

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

How to Use CSS3 to create a specific style of 3D effect text

Copy the Code as follows :. example-class {text-shadow: [X offset] [Y offset] [Blur size] [Colour];} Note: X indicates the displacement on the X axis and can be a negative value; Y indicates the displacement on the Y axis, which can be a negative value. Blur indicates the projection width, which cannot be a negative value. Color indicates the Projection Color. Stacked multi-layer CSS projection although we do not need to stack multi-layer projection, but through stacked multi-layer projection, there will be a better 3D effect to start creating 3D text. You may choose a color deeper than the text to use as the color of the projection, so in this example, I will use white text, use a deeper gray color as the projection color. In this example, I render the 3D effect of H2 text. The css code is as follows: copy the Code as follows: h2 {text-shadow: 1px 1px 0 # CCC, 2px 2px 0 # CCC,/* end of 2 level deep gray shadow */3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444;/* end of 4 level deep dark shadow */} the effect is as follows: Well, you have created basic 3D text here, however, let's further expand the text that slides over the mouse, and use the transision attribute of css to achieve smooth fade-in and fade-out effects. First, use the transform attribute to zoom in and copy the code: h2: hover {/* CSS3 Transform Effect */-webkit-transform: scale (1.2 ); /* Safari & Chrome */-moz-transform: scale (1.2);/* Firefox */-o-transform: scale (1.2 ); /* Opera */}: Use the transition attribute to implement the fade-in and fade-out Effect. The Code is as follows: h2 {/* CSS3 Transition Effect */-webkit-transition: all 0.12 s outgoing-out;/* Safari & Chrome */-moz-transition: all 0.12 s outgoing-out;/* Firefox */-o-transition: all 0.12 S between-out;/* Opera */} Here, we use CSS3 to implement the 3D effect of the text, and when the mouse slides over, it enables the font to zoom in, and there is a fade-in and fade-out effect, all of which are implemented with pure CSS.

How to Use CSS3 to create 3D effects and text to implement style Solutions

Copy the Code as follows :. example-class {text-shadow: [X offset] [Y offset] [Blur size] [Colour];} Note: X indicates the displacement on the X axis and can be a negative value; Y indicates the displacement on the Y axis, which can be a negative value. Blur indicates the projection width, which cannot be a negative value. Color indicates the Projection Color.
Stacked multi-layer CSS projection
Although we do not need to stack multi-layer projection, it will have a better 3D effect through stack multi-layer projection.
Start creating 3D text
You may choose a color that is deeper than the text to use as the projection color, so in this example, I use white text and a little deeper gray as the projection color, in this example, I render the 3D effect of H2 text. The css code is as follows:
The copy code is as follows: h2 {text-shadow:
1px 1px 0 # CCC,
2px 2px 0 # CCC,/* end of 2 level deep gray shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444;/* end of 4 level deep dark shadow */} the effect is as follows: Well, you have created basic 3D text here. However, let's further implement the zoomed-in effect of text sliding over the mouse, and use the transision attribute of css to implement smooth fade-in and fade-out effects.
First, use the transform attribute to zoom in the font.
Copy the Code as follows: h2: hover {/* CSS3 Transform Effect */
-Webkit-transform: scale (1.2);/* Safari & Chrome */
-Moz-transform: scale (1.2);/* Firefox */
-O-transform: scale (1.2);/* Opera */}: Use the transition attribute to implement fade-in and fade-out.
Copy the Code as follows: h2 {/* CSS3 Transition Effect */
-Webkit-transition: all 0.12 s outgoing-out;/* Safari & Chrome */
-Moz-transition: all 0.12 s outgoing-out;/* Firefox */
-O-transition: all 0.12 s bytes-out;/* Opera */} Here, we use CSS3 to implement the 3D effect text, in addition, moving the mouse over enables font to zoom in and fade in and out, which is implemented with pure CSS.