🚨Web developers need to know CSS Tricks

As a Web developer, CSS is one of the necessary skills, I always thought I grasp of the CSS has had enough schooling, until read Lea Verou the CSS revelation, I found myself at best, even if a play CS players, in the book for our common Web design problem from different angles puts forward many practical and elegant solution, Here strongly recommended to every developer engaged in front-end related, I believe you will have a harvest. In order to copy and paste in the future can be more cool, the author of their own harvest and work in the common use of some CSS style summed up into this document, a total of 43 CSS style (continuous update…) . The document still has a lot of inadequacies, but also please give advice, if you feel a little help, welcome to improve 📝~

What’s included

Border and Background

• Translucent border
• Multiple frames
• Rounded inside the border
• Background positioning
• Striped background
• 1 px line/edge

Common shape

• Circular and elliptical
• The parallel quadrilateral
• Effect of cutting Angle
• Simple pie
• balloons
• Other polygons

Visual effect

• Common projection
• Irregular projection
• Ground glass effect
• The zebra stripes
• Text effects
• Ring words
• Insert a line break
• Picture contrast control

The user experience

• Select the appropriate mouse cursor
• Expand the clickable area
• Customize the check box
• Custom buttons
• The input box is perfectly centered
• Weaken the background with shadows
• Weaken the background by blurring
• Custom text underscores
• Customize the Scroll bar

Structure layout

• Full background equal width content centered
• At the bottom of the absolute
• Horizontal and vertical center
• The holy grail layout
• Double wing layout
• Class order layout
• Flex layout

The animation transition

• Bounce effect
• Excessive elastic
• Scintillation effect
• Effect of typing
• Jitter effect
• Seamless smoothness
• Trajectory smoothing effect

The code in the document supports real-time debugging preview, if you have questions or suggestions, please leave a comment at the bottom of the document, if you have more interesting and practical tips, welcome to add ~

Document: You need – to – know – CSS