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

Source: Internet
Author: User

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 ".

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.