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

In this article, the editor introduces in detail "what are the commonly used front-end effects of CSS", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the common front-end effects of CSS" can help you solve your doubts.

1. Prohibit the selection of text

Body {

-webkit-touch-callout: none

-webkit-user-select: none

-khtml-user-select: none

-moz-user-select: none

-ms-user-select: none

User-select: none

}

2. Display URLs in a printable web page

@ media print {

A:after {

Content: "[" attr (href) "]"

}

}

3. Click the gradient button in dark gray

.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 bottombottom, 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 bottombottom, 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

}

4. Shadow of the box at the top of the web page

Body:before {

Content: ""

Position: fixed

Top:-10px

Left: 0

Width: 100%

Height: 10px

-webkit-box-shadow: 0px 0px 10px rgba (0pc0pl 0pr .8)

-moz-box-shadow: 0px 0px 10px rgba (0pc0pl 0pr .8)

Box-shadow: 0px 0px 10px rgba (0pd0j0j0pl .8)

Z-index: 100

}

A [href], input [type = 'submit'], input [type =' image'], label [for], select, button, .input {

Cursor: pointer

}

6. Bright input of CSS3 (border gradient)

Input [type=text], textarea {

-webkit-transition: all 0.30s ease-in-out

-moz-transition: all 0.30s ease-in-out

-ms-transition: all 0.30s ease-in-out

-o-transition: all 0.30s ease-in-out

Outline: none

Padding: 3px 0px 3px 3px

Margin: 5px 1px 3px 0px

Border: 1px solid # ddd

}

Input [type=text]: focus, textarea:focus {

Box-shadow: 0 5px rgba (81,203,238,1)

Padding: 3px 0px 3px 3px

Margin: 5px 1px 3px 0px

}

7. Triangle list bullets

Ul {

Margin: 0.75em 0

Padding: 0 1em

List-style: none

}

Li:before {

Content: ""

Border-color: transparent # 111

Border-style: solid

Border-width: 0.35em 0 0.35em 0.45em

Display: block

Height: 0

Width: 0

Left:-1em

Top: 0.9em

Position: relative

}

8. Shadow of internal CSS3 box

# mydiv {

-moz-box-shadow: inset 2px 0 4px # 000

-webkit-box-shadow: inset 2px 0 4px # 000

Box-shadow: inset 2px 0 4px # 000

}

9. External CSS3 box shadow

# mydiv {

-webkit-box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52)

-moz-box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52)

Box-shadow: 0 2px 2px-2px rgba (0,0,0,0.52)

}

10. @ font-face template

@ font-face {

Font-family: 'MyWebFont'

Src: url ('webfont.eot'); / * IE9 Compat Modes * /

Src: url ('webfont.eot?#iefix') format (' embedded-opentype'), / * IE6-IE8 * /

Url ('webfont.woff') format (' woff'), / * Modern Browsers * /

Url ('webfont.ttf') format (' truetype'), / * Safari, Android, iOS * /

Url ('webfont.svg#svgFontName') format (' svg'); / * Legacy iOS * /

}

Body {

Font-family: 'MyWebFont', Arial, sans-serif

}

11. CSS3 gradient template

# colorbox {

Background: # 629721

Background-image:-webkit-gradient (linear, left top, left bottombottom, from (# 83b842), to (# 629721))

Background-image:-webkit-linear-gradient (top, # 83b842, # 629721)

Background-image:-moz-linear-gradient (top, # 83b842, # 629721)

Background-image:-o-linear-gradient (top, # 83b842, # 629721)

Background-image: linear-gradient (top, # 83b842, # 629721)

}

12. CSS3: full screen background

Html {

Background: url ('images/bg.jpg') no-repeat center center fixed

-webkit-background-size: cover

-moz-background-size: cover

-o-background-size: cover

Background-size: cover

}

13. Anchor link pseudo-class

A:link {color: blue;}

A:visited {color: purple;}

A:hover {color: red;}

A:active {color: yellow;}

14. Picture frame polarizing

Img.polaroid {

Background:#000; / * Change this to a background image or remove*/

Border:solid # fff

Border-width:6px 6px 20px 6px

Box-shadow:1px 1px 5px # 333; / * Standard blur at 5px. Increase for more depth * /

-webkit-box-shadow:1px 1px 5px # 333

-moz-box-shadow:1px 1px 5px # 333

Height:200px; / * Set to height of your image or desired div*/

Width:200px; / * Set to width of your image or desired div*/

}

15. General media inquiry

/ * Smartphones (portrait and landscape)-* /

@ media only screen

And (min-device-width: 320px) and (max-device-width: 480px) {

/ * Styles * /

}

/ * Smartphones (landscape)-* /

@ media only screen and (min-width: 321px) {

/ * Styles * /

}

/ * Smartphones (portrait)-* /

@ media only screen and (max-width: 320px) {

/ * Styles * /

}

/ * iPads (portrait and landscape)-* /

@ media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

/ * Styles * /

}

/ * iPads (landscape)-* /

@ media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

/ * Styles * /

}

/ * iPads (portrait)-* /

@ media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

/ * Styles * /

}

/ * Desktops and laptops-* /

@ media only screen and (min-width: 1224px) {

/ * Styles * /

}

/ * Large screens-* /

@ media only screen and (min-width: 1824px) {

/ * Styles * /

}

/ * iPhone 4-* /

@ media only screen and (- webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {

/ * Styles * /

}

16. Cross-browser transparency

.transparent {

Filter: alpha (opacity=50); / * internet explorer * /

-khtml-opacity: 0.5; / * khtml, old safari * /

-moz-opacity: 0.5; / * mozilla, netscape * /

Opacity: 0.5; / * fx, safari, opera * /

}

17. Use CSS animation to realize ellipsis animation

.loading: after {

Overflow: hidden

Display: inline-block

Vertical-align: bottombottom

Animation: ellipsis 2s infinite

Content: "room6"; / * ascii code for the ellipsis character * /

}

@ keyframes ellipsis {

From {

Width: 2px

}

To {

Width: 15px

}

}

18. Create ambiguous text

. blurry-text {

Color: transparent

Text-shadow: 0 5px rgba (0penny 0penny 0.5)

}

19. The long text of the package is too long, and the automatic line wrapping will not break the box.

Pre {

Whitewhite-space: pre-line

Word-wrap: break-word

}

20. Gradual discoloration of background

Button {

Background-image: linear-gradient (# 5187c4, # 1c2f45)

Background-size: auto 200%

Background-position: 0 / 100%

Transition: background-position 0.5s

}

Button:hover {

Background-position: 0 0

}

21. Content is editable (contenteditable= "true")

Mourn the bereaved Hong Kong compatriots

30th Anniversary of Shenzhen Special Economic Zone

Yichun air crash

22. Change the placeholder font color in the input box

::-webkit-input-placeholder {

Color: red

}

:-moz-placeholder {

Color: red

}

::-moz-placeholder {

Color: red

}

:-ms-input-placeholder {

Color: red

}

After reading this, the article "what are the common front-end effects of CSS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. 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.