QiShaoXuan/css_tricks

中文

About

• Summarize some common CSS styles.
• Record some new CSS properties and a some tricks.
• Some animations under the "Animate" section are not CSS effects, because there is no place to put them, so they are temporarily stored here.

As little nonsense as possible, the code is simple to use, easy to copy.

talk is cheap show me the code

Quick start

• Clone the https://github.com/QiShaoXuan/css_tricks.git
• Install package npm install
• Development run npm run docs:dev
• Open http://localhost:8080 in your browser.

Inclued

Tool

• Triangle generator
• Fan generator
• Less than 12px text generator

Attribute

• Filter
• Flexbox
• Grid
• object-fit, object-position
• mix-blend-mode
• list-style

Animate

• Poptip
• Accordion
• Hover
• Picture flash
• Loading
• Spring
• Sticky ball
• Parabola
• Ripple
• Wave

Static

• Reset style
• Scroll bar style
• Media
• Focus landscape screen
• Cursor
• Shadow
• Setting of rem & dpi
• Paper style
• Color shadow

Tricks

• Vertical middle
• Auto height
• Clear image empty & Image vertical
• Sticky footer
• Triangle border
• Text ellipsis
• insert line break
• Ground glass
• Params layout
• Auto width in absoulte position
• Berak line in long text
• Text shadow
• Tab animate
• Tab bottom circle convergence
• Circle hollowout
• Trangle hollowout
• Polygon layout

Contributing

• Fork this repository
• Create your branch: git checkout -b new-branch
• Make your changes
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin new-branch
• Submit a pull request

or submit an issue, any helpful suggestions are welcomed.

JS Tricks

view online

About cat

• vuepress-plugin-cat
• live2d model