πŸ”– 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