HTML+CSS Web Page Production example: Make the top left corner of the effect of the scroll page

Article Introduction: HTML+CSS Web Page Production Example: the creation of the upper left corner of the effect of the scroll page.

English original http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/

In this article we will describe how to make the paper effect in the upper-left corner of the system.

I want to let me a few words with a roll angle folding effect of the paper background, if directly with a picture, it is easy to achieve, but here I want to use CSS to achieve.

This implementation of mine is not very innovative, but it is worth sharing, simply, in addition to a rectangular container, we need two triangles, as shown in the following figure:

When we get two triangles and position them, change the color of the triangle above to make it the same as the entire background color. You will find that we have made a folding effect.

HTML code

First create a div that contains a title, and a paragraph of text content. Div has two class, one (page) is to set the General page effect, another (FOLDTL) to set the paper's curl effect, the Foldtl TL represents top left, in addition we are still in the last top right folding effect.

Headline lorem ipsum dolor sit amet...

CSS Section

CSS section, I first do a piece of plain paper without the effect of curl: Set the background color to be eye-catching and comfortable black, then set the width and height of the paper, and fill the white background. You can also add a subtle gradient effect to the background of the paper, you can not do so, because the CSS inside to implement this to use is not very standard code, to adapt to different browsers. If you think it's not worth it, ignore it. Here's the code:

body {background: #272822;} page {background: #fff; WI dth:250px; height:330px; margin:50px; /* Optional Gradient * * Background:-moz-linear-gradient (top, #ffffff 0, #e5e5e5 100%);/* ff3.6+/background:-webkit- Gradient (linear, left top, left bottom, Color-stop (0%, #ffffff), Color-stop (100%, #e5e5e5)); /* chrome,safari4+ * * Background:-webkit-linear-gradient (top, #ffffff 0, #e5e5e5 100%);/* chrome10+,safari5.1+/BACKG Round:-o-linear-gradient (Top, #ffffff 0, #e5e5e5 100%);/* Opera 11.10+/background:-ms-linear-gradient (top, #ffffff 0 %, #e5e5e5 100%); /* ie10+/Background:linear-gradient (top, #ffffff 0, #e5e5e5 100%); */* The Consortium/Filter:progid:DXImageTransform.Microsoft . Gradient (startcolorstr= "#ffffff", endcolorstr= "#e5e5e5", gradienttype=0); /* ie6-9 */}

Now that we have the contour effect of the paper, it's time to beautify our fonts. The H2 label is set to a larger black font, Lilita one, and away from the upper edge, leaving a space for the upper left corner folding effect. The font inside the paragraph: set a certain padding, the color is gray, and the title is separated by a suitable distance.

. page H2 {padding:85px 0 0 20px; font:400 35px/1.5 "Lilita One", Helvetica, Sans-serif;}. Page P {padding:10px 20px; font:12px/1.5 Helvetica, Sans-serif; Color: #4b4b4b; }

If nothing happens the above code should show the following effect, not so engaging, but lay a foundation behind us.

CSS Triangle section:

Before we go on, we need to learn how to make triangles with CSS.

Create an empty div with class "triangle"

Width and height set to 0

Give the bottom and left borders a very thick width, but if different colors

The effects and CSS code are as follows:

As you can see, the rectangle is diagonally divided into two triangles with different colors. What happens if we let one of these borders become transparent?

So we can get a triangle, and we can switch to a border to make it transparent, and then we can get a point to a different triangle.

As for the right boundary of the left border of the upper boundary, you'll see for yourself.

Roll up the paper:

Use the triangle we just learned to make it on our paper. Three steps are required:

1.foldtl (mentioned above) div CSS style.

2. Add a triangle, with pseudo element: before

3. Add another triangle, with pseudo elements: after

Here's a three-step tutorial:

. foldtl {position:relative-webkit-box-shadow:5px 5px 5px rgba (0,0,0,0.8);-moz-box-shadow:5px 5px 5px Rgba (0,0,0,0.8 ); box-shadow:5px 5px 5px Rgba (0,0,0,0.8); }

As you can see, I just applied a relative position to the div (to use absolute positioning in the triangle) and then added a box shadow effect. By the way, it would be a lot easier not to use shadows in this project, I just wanted to tell you that this is really doable, just pay attention to a sufficient offset to the shadow, blocking the folding effect.

Now it's time to make the first triangle. This is a pseudo element, absolute positioning, and x and Y values are 0, and the rest is the same as the CSS we learned to make triangles.

. foldtl:before {content: ""; Position:absolute; top:0%; left:0%; width:0px; height:0px; border-bottom:70px solid #eee; border-left:70px solid Transparent; -WEBKIT-BOX-SHADOW:7PX 7px 7px Rgba (0,0,0,0.3); -MOZ-BOX-SHADOW:7PX 7px 7px Rgba (0,0,0,0.3); BOX-SHADOW:7PX 7px 7px Rgba (0,0,0,0.3); }

As shown in figure:

Cutting:

Cropping is actually in the upper left corner of the same color with the black background of the triangle, the method is basically the same as the first triangle.

. foldtl:after {content: ""; Position:absolute; top:0%; left:0%; width:0px; height:0px; BORDER-TOP:69PX solid #272822; BORDER-RIGHT:69PX solid Transparent; }

Now our whole effect is coming out: