Practical development of CSS3: Hands-on development of different effects, and practical development of css3

Practical development of CSS3: Hands-on development of different effects, and practical development of css3

Hello, everyone, I amMojihua will launchIn this article, I will teach you how to develop a set of pureCorner Effect of CSS. As usual, I do not provide code downloading, But I can ensure that as long as the code in the tutorial is copied to the local computer, it will definitely achieve the same effect as my demo. I hope you can understand what I mean.

Now, let's start today's tutorial. First, let me show you the results of today's practical cases:

 

What does someone say this is? This is our practical development today. I will show you how to fold the results in the upper right corner.

Some people may find it difficult and incredible before I finish my explanation. I want to tell you: so easy. Next, please follow my decomposition steps to learn it step by step!

First, create a blue area. The Code is as follows:

<! DOCTYPE html> 

Next we apply the style to the. note element:

* {/* Clear the internal and external margins of all elements */margin: 0; padding: 0 ;}. note {/* set basic attributes of the folding style */width: 480px; height: 400px; margin: 2em auto;/* adjust. the outer margin of the note element */padding: 2em; background: #53A3B4 ;}

Now let's take a look at the running effect:

 

How can this folding effect be achieved? Please take care of the steps below.

I am usingCSS3Insert a piece of content to the page.

. Note: before {content: ""; display: block;/* pseudo elements are intra-row elements by default. Therefore, to set the width and height, this must be explicitly set to block */border-width: 0 16px 16px 0;/* set the border width */border-color: # fff transparent; background: transparent; border-style: solid;/* set the border to solid */width: 0;/* set the newly created element */}

 

Here I will give a brief introduction to the pseudo element: before. The content must be specified for the before pseudo element. If not, you must set content: "". Because the pseudo element is a row element by default, therefore, if you want to set the width and height, you must set it to block explicitly. If you have more details about pseudo elements, please pay attention to my space.

The pseudo element has been created, but I want the element I created to be located in the upper right corner of the. note area. Well, we can adjust the position of the element through the relative (relative positioning) and absolute (absolute positioning) of position.

Apply position: relative to. note ):

. Note {/* set basic attributes of the folding style */width: 480px; height: 400px; margin: 2em auto;/* adjust. the outer margin of the note element */padding: 2em; background: #53A3B4;Position: relative;}

 

Then, use the absolute positioning attribute to place the newly created object in the upper-right corner of the container:

. Note: before {content: ""; display: block;/* pseudo elements are intra-row elements by default. Therefore, to set the width and height, this must be explicitly set to block */border-width: 0 16px 16px 0;/* set the border width */border-color: # fff transparent; background: transparent; border-style: solid;/* set the border to solid */width: 0;/* set the newly created element */position: absolute;/* relative to the parent container, absolute positioning, set the border distance of the Offset parent container */top: 0; right: 0 ;}

Now let's look at the effect again:

That's great. The problem has already been solved. As we said at the beginning, the fold after the fold has a shadow effect. Now we will add a shadow style to. note: before:

/* Set the shadow effect of the element */-webkit-box-shadow: 0 1px 1px rgba (0.3, 0,),-1px 1px 1px rgba (, 0, 0, 0.2);-moz-box-shadow: 0 1px 1px rgba (0.3, 0, 0.2),-1px 1px rgba (, 0,); box-shadow: 0 1px 1px rgba (0.3, 0, 0.2),-1px 1px 1px rgba (, 0 );

 

Now let's look at the effect after adding the shadow style:

 

At this point, the success was that it was so easy to fold with pure CSS3.

As it is used as a display, I set a fixed height. If you want to set it to elastic, you can cancel its attribute.

For more practical tutorials, please stay tuned to my space. Thank you for reading this article.

 

Welcome to the internet technology exchange group: 62329335

Personal statement: the shared blog is absolutely original, and strives to verify every knowledge point through practical demonstration.