How to use CSS3 to achieve the roll angle effect of book pages (books)

We sometimes want to display an announcement or user tip message on the page.

A frequently used design is to use bookmark shapes.

We are able to add a volume angle effect to the bookmark. To make it more realistic. The so-called "roll angle" can actually be simulated with a small angle-tilted shadow effect.

Using CSS3 pseudo-elements to achieve this effect is very easy.

Give an example first. We have implemented the following effects in the left column of the WOW Site page (in red box):

Let's take a look at the detailed implementation.

First create a DIV element to hold the text information (can include many other elements), class named "Dog Ears" is the meaning of the roll angle:

<div class= "Dog-eared-tip" >put your tips here</div>

Then write CSS code such as the following:

.dog-eared-tip{    padding:7.5px 5px 7.5px 20px;    background: #DEAA2F;    FONT-SIZE:13PX ;    position:absolute;    text-align:center;    width:100%;    Color:black;} . Dog-eared_tip:before,. Work_tip:after {    Content: "";    position:absolute;    Z-index : -2;   -moz-transform:rotate ( -3deg);   -webkit-transform:rotate ( -3deg);   - O-transform:rotate ( -3deg);   -ms-transform:rotate ( -3deg);    transform:rotate ( -3deg);  & nbsp bottom:15px;    box-shadow:0 15px 10px rgba (0, 0, 0, 0.7);    height:50%;    left:10px;& nbsp   max-height:100px;    max-width:300px;    width:50%;}. Dog-eared_tip:after {   -moz-transform:rotate (3deg);   -webkit-transform:rotate (3deg);  & nbsp -o-transform:rotate (3deg);   -ms-transform:rotate (3deg);        transform:rotate (3deg);    left:auto;    right:10px;}

The above code first sets up the DIV's frequently used styles such as background, font, center, margin, and so on.

Then for the DIV's: Before and: After pseudo-elements to set the box Shadow (Box-shadow) and small angle rotation (rotate method),

The position of before and after is placed at the bottom of the Div, and the z-sequence is negative. The actual effect is that the pseudo-elements themselves are obscured by the div. But it just makes its outer shadow part exposed to the bottom.

Note that here please remember not to set overflow to the Div. Otherwise the shadow is not visible.

Basically, the last step, the tilt of both sides of the shadow is physically symmetrical, so we need to adjust: the skew angle of the after pseudo-element ( -3° is adjusted to 3°).

This way: The before corresponds to the bottom left corner of the label. : After corresponds to the curl shadow of the lower-right corner of the label.

This example is able to work under Ie11/chrome/ff/edge.

You can also use pseudo-classes in CSS3: hover and Transition properties. On the basis of this example, the mouse hover effect is added,

That is, when the user hovers over the page. We call this "breathing paper" as the effect of a slow smoothing of the volume angle.

Detailed can refer to the implementation of WOW home page.

by Iefreer

How to use CSS3 to achieve the roll angle effect of book pages (books)