307 private links
Better than writing you own utility classes because this tool will generate only the one needed :)
Another great tools initiated by Antfu
UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. There are no core utilities in UnoCSS, all functionalities are provided via presets.
@media (prefers-color-scheme: dark) {
html body {filter: invert(1);}
/* the following really should be managed by a cascade layer */
.some-container-items-or-images {
box-shadow: 0.25em 0.25em 0.67em #FFF8;
}
}From Lary Hudson
you should also set “color-scheme: dark” so that scrollbars change to a dark tint as well.
- Confetti canon
- Bookmark Button: transitions between SVGs. The MorphSVG plugin comes in to allow different amount of points. It does the heavy lifting so you can smoothly transition between any SVG Shapes.
3 examples to build CSS Grid patterns
An HTML and CSS only tree.
The final CSS-snippet is also available at the end.
It uses only <ul>, <li>, and` tags in the markup, which makes it very easy and simple.
Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.
It provides examples: https://siimple.xyz/examples
Also available on NPM for a 7.8kB minified and gzipped package.
Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.
Build HTML elements visually
Source code: https://github.com/components-ai/css.gui
Paper Prototype CSS is CSS framework that mimics paper prototyping, sort of like a handdrawn look but a little more ransom-note-ish, with the help of two informal-looking free fonts.
And the blog post related: https://shkspr.mobi/blog/2022/06/paper-prototype-css/
Metallic look to HML elements.
Source code: https://github.com/MikaeI/metallicss (available as npm package)
Generate animations with the mouse :D
A bootstrap similar library
Copy/Paste the most used media query
Manual-writing styled forms with a CSS only file.
The font Short Stack should also be used. It is available as NPM package.
Another drop-in css stylesheet which make a website beautiful :)
Using CSS to get a fingerprint of the browser. Here is a all-in-one resource.
It generates different layouts