π Fun CSS – 40 interesting CSS sites
π Basic Learning
IO/CSS reference book
Chokcoco. Making. IO/CSS – Inspira… CSS inspiration
www.awwwards.com/sites/zero-… A source of inspiration for UI designers
htmlcheatsheet.com/css/ interactive online CSS shorthand sheet
Learn CSS layouts
Css-tricks.com/ CSS tricktrick
CSS Teaching column on web.dev/learn/ CSS/web.dev
www.w3schools.com/howto/ W3 How To learn How To implement common page components
Codemyui.com/tag/pure-cs… More than 450 PURE CSS implementations of UI design by ΞΎ βπ ππππͺππ
π§ CSS animations
Pure CSS animation, there is no JS animation library
Animate. Style/CSS animation set
tholman.com/obnoxious/ but the brain action effect, but it looks very “fierce”
Elrumordelaluz. Making. IO/csshake/CSS jitter effects
Animxyz.com/ CSS 3D transform animation
animista.net/play/ CSS animation set, free to adjust animation parameters, generate code snippets
Ianlunn.github. IO /Hover/ CSS mouse Hover animation
www.minimamente.com/project/mag… Suitable for special CSS animation effects
πΉοΈ Teaching games
Learn CSS grid layouts by watering radishes
www.flexboxdefense.com/ CSS tower defense game, learn flex layout
Flukeout.github. IO/Practice CSS selectors by cooking
Flexboxfroggy.com/ send baby frog home and learn flex layout
π° Code generation
Cssboxshadow.com/ box- Shadow generator
Glassgenerator.net lify. App/grind arenaceous transparent effect
Cool background image of CoolChaladad. IO
www.pixelartcss.com/ Custom pixel footage
Stripesgenerator.com/ strip background generator
Svgwave.in/Ripple generator
Numl. Design/theme – gener… Theme generator for NUML Design
Color.adobe.com/zh/create/c… A color picker tool provided by Adobe for color blind users
9 elements. Making. IO/fancy – borde… A new approach to rounded border-RADIUS
- From the rounded corners above, we can draw a drop of water π¦ codepen. IO /prathkum/ PE…
Accordionslider.com/ pure CSS for louvers
Grid.layoutit.com/ grid layout generator
Csslayout. IO/a set of page elements and components implemented purely in CSS
Keyframes. App /animate/ CSS animation generator
Cssanimate.com/ is another CSS animation generator
www.cssfiltergenerator.com/ CSS filter
Imageslidermaker.com/ CSS round cast generator, dependent on jQuery π
www.30secondsofcode.org/css/p/1 code snippet – CSS article 30 seconds
π¨ Color matching
colorhunt.co/ Color Hunt
Mycolor.space/Again matching colors
Clrs.cc/again color matching
Cssgradient. IO/CSS gradient
Reference:
- Github.com/jobbole/awe… Chinese version of the CSS Resource Encyclopedia
- Github.com/awesome-css… Awesome CSS
- Juejin. Cn/post / 690371… Some CSS effects website collation