CSS Awesome
核心规范
Awesome
- Framework
- picocss/pico
- MIT, CSS
- lowlighter/matcha
- MIT, CSS
- Drop-in semantic styling library in pure CSS.
- picocss/pico
- Toolchain
- esbuild
- cssnano
- parcel-bundler/lightningcss
- MPLv2, Rust
- CSS parser, transformer, bundler, and minifier
- https://lea.verou.me/2012/04/background-attachment-local/
- Overflow 显示阴影
- https://noti.st/rachelandrew/IQsXZC/css-layout-workshop
- https://web.dev/patterns/layout/
- ethantw/Han
- 汉子注音排版
- Things I Wish I’d Known About CSS
- Reset/remove CSS styles for element only
- Library
- voxel.css
- peterramsing/lost
- LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.
- mojotech/jeet
- The most advanced, yet intuitive, grid system available for Sass or Stylus
- kumailht/gridforms
- Data entry can be beautiful
- dogfalo/materialize
- Materialize
- Materialize, a CSS Framework based on Material Design
- google/material-design-lite
- Get MDL
- Material Design Components in HTML/CSS/JS
- PostCSS.parts
- A searchable catalog of PostCSS plugins
- https://css-tricks.com/snippets/
- Loaders Loading!
- CSS Portal Ring ✨
- Animation
- Color
-
CSS 参考手册
- https://tympanus.net/codrops/css_reference/
- https://css-tricks.com/almanac/
- cssreference
- HN
- 可视化的方式解释 CSS 属性
- (htmlreference.io)[http://htmlreference.io/]
-
scss
- long shadow http://codepen.io/danieltott/pen/AjKay
System Look
- codedgar/Puppertino
- based on Human Guidelines from apple
- sakofchit/system.css
- retro Apple
- jdan/98.css
- Windows 98
- https://contra.io/windows_98.css/
- botoxparty/XP.css
- Windows XP
- khang-nd/7.css
- Windows 7
- Demo
- nostalgic-css/NES.css
- micah5/PSone.css
- PS1
- RoelN/c64css3
- vinibiavatti1/TuiCss
- Text-based UI
- npjg/classic.css
- Classic Mac interface
- bryanbraun/after-dark-css
- After Dark screensavers
- divshot/geo-bootstrap
- renkman/Renkbench
- Amiga Workbench
- ritenv/retro-desktop
- Retro Desktop UI
- andersevenrud/retro-css-shell-demo
- AnderShell 3000
- https://crt.no/
- kristopolous/BOOTSTRA.386
- https://demo.themesberg.com/windows-95-ui-kit/
- Windows 95 UI Kit
- arturbien/React95
- Windows 95
- https://react95.io/
- https://storybook.react95.io/
- lolstring/window98-html-css-js
- jianzhongli/csswin10
- magiblot/tvision
- Turbo Vision 2.0
- https://temoji.me/
- vincentdoerig/latex-css
- look like a LaTeX document
- Demo
Defaults
HTML 默认样式
- andybrewer/mvp
- kognise/water.css
- tbolt/boltcss
- xz/new.css
- vladocar/Basic.css
- oxalorg/sakura
- igoradamenko/awsm.css
- hawkz/gdcss
- emareg/classlesscss
- kevquirk/simple.css
- https://picocss.com/examples/preview/
Tricks
学习
- CSS Diner
- CSS Selector 游戏
- Selectors Explained
- Guide to Advanced CSS Selectors - Part One
- https://every-layout.dev/
- https://inclusive-components.design/
- https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/
Loader
Codepen
- Grid Rotation Concept https://codesandbox.io/s/grid-rotation-concept-lnuld6?file=/src/index.tsx
.input {
background:
linear-gradient(canvas, canvas) padding-box,
linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%)) border-box;
}