How to Use CSS3 to implement the effect of book pages (books)

How to Use CSS3 to implement the effect of book pages (books)

Sometimes we want to display an announcement or user prompt on the page. A common design is to use bookmarks.

We can add a volume angle to the bookmarks to make them more realistic. The so-called "volume angle" can be simulated using a shadow effect with a small angle tilt.

It is easy to implement this effect with the pseudo elements of CSS3.

First, an example is provided. The following results are displayed in the left sidebar of the WOW Site Page (in the red box ):

 

Let's take a look at the specific implementation.

First, create a div element to hold text information (more elements can be included). The class name is "dog ears", which means the volume angle:

put your tips here

Then write the following CSS code:

.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);  bottom: 15px;  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);  height: 50%;  left: 10px;  max-height: 100px;  max-width: 300px;  width: 50%;}.dog-eared_tip:after {  -moz-transform: rotate(3deg);  -webkit-transform: rotate(3deg);  -o-transform: rotate(3deg);  -ms-transform: rotate(3deg);    transform: rotate(3deg);  left: auto;  right: 10px;}

The above code first sets common div styles such as background color, Font, center, and margin.

Then, set box-shadow and small-angle rotation for the: before AND: after pseudo elements of the div ),

Place the before and after positions at the bottom of the div, And the z sequence is negative. The actual effect is that the pseudo element itself is blocked by the div, however, the outer shadow is exposed to the bottom.

Note: Do not set the overflow invisible style for the div. Otherwise, the shadow is invisible.

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

In this way, before corresponds to the lower left corner of the tag, and after corresponds to the curly shadow of the lower right corner of the tag.

This example works in IE11/Chrome/FF/Edge.

You can also use the pseudo class hover and transition attributes in CSS3 to add the mouse hover effect on the basis of this example,

That is to say, when a user hovers over a book page, it shows the smooth effect of the scroll angle. We call this a "breathing paper ".