Shulou(Shulou.com)06/01 Report--

This article editor for everyone to introduce in detail "css how to achieve the curl effect of the paper page", the content is detailed, the steps are clear, the details are handled properly, I hope that this "css how to achieve the curl effect of the paper page" article can help you solve your doubts, the following follows the editor's ideas slowly in depth, together to learn new knowledge.

1. Bright anchor links

A {color: # 00e;} a:visited {color: # 551a8b;} a:hover {color: # 06e;} a:focus {outline: thin dotted;} a:hover, a:active {outline: 0;} a, a:visited, a:active {text-decoration: none; color: # fff;-webkit-transition: all .3s ease-in-out;} a:hover, .glow {color: # ff0; text-shadow: 00 10px # ff0;}

2. The curling effect of the paper page

Ul.box {position: relative; z-index: 1; / * prevent shadows falling behind containers with backgrounds * / overflow: hidden; list-style: none; margin: 0; padding: 0;} ul.box li {position: relative; float: left; width: 250px; height: 150px; padding: 0; border: 1px solid # efefef; margin: 0 30px 30px 0; background: # fff;-webkit-box-shadow: 0 1px 4px rgba (0,0,0,0.27), 0 40px rgba (0,0,0.06) inset -moz-box-shadow: 0 1px 4px rgba (0,0,0,0.27), 00 40px rgba (0,0,0.06) inset; box-shadow: 0 1px 4px rgba (0,0,0,0.27), 00 40px rgba (0,0,0,0.06) inset;} ul.box li:before,ul.box li:after {content:'; z-index:-1; position: absolute; left: 10px; bottom: 10px; width: 70%; max-width: 300px / * avoid rotation causing ugly appearance at large container widths * / max-height: 100px; height: 55%;-webkit-box-shadow: 0 8px 16px rgba (0,0,0,0.3);-moz-box-shadow: 0 8px 16px rgba (0,0,0,0.3); box-shadow: 0 8px 16px rgba (0,0,0,0.3);-webkit-transform: skew (- 15deg) rotate (- 6deg);-moz-transform: skew (- 15deg) rotate (- 6deg) -ms-transform: skew (- 15deg) rotate (- 6deg);-o-transform: skew (- 15deg) rotate (- 6deg); transform: skew (- 15deg) rotate (- 6deg);} ul.box li:after {left: auto; right: 10px;-webkit-transform: skew (15deg) rotate (6deg);-moz-transform: skew (15deg) rotate (6deg);-ms-transform: skew (15deg) rotate (6deg);-o-transform: skew (15deg) 15deg (15deg) Transform: skew (15deg) rotate (6deg);}

3. CSS font attribute abbreviation

P {font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;}

4. CSS3 dot pattern

Body {background: radial-gradient (circle, white 10%, transparent 10%), radial-gradient (circle, white 10%, black 10%) 50px 50px; background-size: 100px 100px;}

5. Disable the selection highlight of mobile Webkit

Body {- webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}

6. Display URLs in a printable web page

@ media print {a:after {content: "[" attr (href) "];}}

7. Dark gray round button

.graybtn {- moz-box-shadow:inset 0px 1px 0px 0px # ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px # ffffff; box-shadow:inset 0px 1px 0px 0px # ffffff; background:-webkit-gradient (linear, left top, left bottom, color-stop (0.05,# ffffff), color-stop (1, # d1d1d1); background:-moz-linear-gradient (center top, # ffffff 5%, # d1d1d1 100%) Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff', endColorstr='#d1d1d1'); background-color:#ffffff;-moz-border-radius:6px;-webkit-border-radius:6px; border-radius:6px; border:1px solid # dcdcdc; display:inline-block; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px # ffffff }. Graybtn:hover {background:-webkit-gradient (linear, left top, left bottom, color-stop (0.05,# d1d1d1), color-stop (1,# ffffff)); background:-moz-linear-gradient (center top, # d1d1d1 5%, # ffffff 100%); filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#d1d1d1', endColorstr='#ffffff'); background-color:#d1d1d1;}. Graybtn:active {position:relative; top:1px;}

8. CSS hovering prompt text

A {border-bottom:1px solid # bbb; color:#666; display:inline-block; position:relative; text-decoration:none;} an a:active focus {color:#36c;} a:active {top:1px;} / * Tooltip styling * / a [data-tooltip]: after {border-top: 8px solid # 222; border-top: 8px solid hsla (0mai 0% 8px solid transparent; content: "; display: none; height: 0 Width: 0; left: 25%; position: absolute;} a [data-tooltip]: before {background: # 222; background: hsla (0pc0% meme 0% ma.85); color: # f6f6f6; content: attr (data-tooltip); display: none; font-family: sans-serif; font-size: 14px; height: 32px; left: 0; line-height: 32px; padding: 015px; position: 0 1px 1px hsla (0meme 0% meme 0%); white-space: nowrap -webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px; border-radius: 5px;} a [data-tooltip]: hover:after {display: block; top:-9px;} a [data-tooltip]: hover:before {display: block; top:-41px;} a [data-tooltip]: active:after {top:-10px;} a [data-tooltip]: active:before {top:-42px } after reading this, the article "how to achieve the curling effect of the paper page by css" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.