A massive list of very helpful CSS tools that I constantly forget to save.
Copy/pasting because dev.to
A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.Full credit goes to the authors behind each of these apps (where possible I've linked to their GH/ socials)
Generate Soft-UI CSS styles using inset shadows, by @adamgiebl
Make and preview beautifully smooth shadows, by @brumm
Generate cool shaped objects with border-radius, by @9Elements. Similar to BlobMaker
Generate pure CSS, cross-browser glow effects
Generates clothoid rounded corners by CSS clip-path, by Takehiko Ono
Build semi-transparent, blurred glass-like backgrounds. Similar to ui.glass/generator
Generate complex shaped objects using clip-path, by @bennettfeely
Generate and preview pure CSS Instagram-style photo filters, by @ghosh
Encode an image directly in your CSS in Base64
Generate quantity-based CSS queries, by @drewminns
CSS animation playground and generator, by Ana T
Preview and generate advanced cubic bezier animations, by @LeaVerou
Advanced keyframe animation maker, by @mitchas
Use animation-delay to simulate delays, by @will-stone
Copy-paste transition animations, by @argyleink
Find and customize simple pure-CSS patterned backgrounds, by @steveschoger
Generate unique organic SVG banners and backgrounds (similar to Shape Divider)
Advanced pattern generator
Collection of pre-made pure CSS patterned backgrounds, by @Afif13
Build striped backgrounds, by @matthewlein
Build your own old-school pattern, by @SachaGreif
Generate blurred animated pure CSS backgrounds, by @Vincenius
Geometric background designer (note: only semmi-free), by @qrohlf
Collection of pure CSS background animations
Collection of reusable SVG-based / pure CSS background patterns, with a visual explorer
Advanced CSS gradient builder
Equaliser-based CSS color composer. by @dawidwoldu
Develop and tweak color schemes
Palette builder using opposing or attracting colors
Sample gradients.
Similar to CoolHue, WebGradients.com, GradientHunt, GradientButtons and UI gradients
Yet another color palette designer
Cubic-bezier style pure CSS gradients, by @larsenwork
Flat-style handpicked color palettes, by @ahmetsulek
Mix, extract, convert and generate colors
Natural color pallets from nature
Discover and preview various font pairings, by @Jack000
Typography & legibility sandbox, by @tsmith512
Generate heading/ body font sizes, by @jeremychurch
Create icon fonts from SVG graphics
Tagged library of Google Fonts, by @katydecorah
Export 90s-style Glitter text
Selection of clean CSS loading animations
100+ CSS loading animations, for copy-paste
Pre-built and custom pure CSS loaders
Simple pure CSS loading animations
Complex pure CSS loaders
CSS implementations of common loaders
Interactive game for learning CSS grid, by @thomaspark
Interactive game for learning flexbox, by @thomaspark
Visual flexbox demo, by @bennettfeely
An interactive CSS Flexbox space distribution calculator, by @telagraphic
Make grids using the CSS grid-template properties, by @sdras (similar to grid.layoutit.com)
A modern CSS layout maker
Just a visual box model demo
A history of CSS
View popular screen sizes for responsive design
Preview various CSS units relative to each other
List of very funny CSS hex color codes
See also, colors.lol for some overly-descriptive color pallets
Checks accessibility grade of a given color combinations, similar to Colorable
Browser compatibility check of various, CSS, JS, HTML and web features
Similar to Can I use?, but checks if a given CSS property (or HTML elem) is compatible with email clients
Convert to and from any other CSS language
Searches your site for unused CSS, and displays stats
Global component search
A collection of open design systems, for inspiration
A collection of design best practices organised as checklists
A list of CSS glyph character codes (see also GlyphSearch for library icons)
The best CSS blog out there
A curated list of awesome design tools
A list of open source CSS frameworks
A visual guide to CSS properties (similar to htmlreference.io)
Excellent documentation of all available CSS properties
C'est pour un écran QHD, si vous êtes en FullHD remplacez 50em
par 35em
.
File
> Custom CSS...
:
#editor {
--side-margin: calc( 50vw - 50em );
}
#editor .CodeMirror {
margin-left: var(--side-margin);
}
#editor .CodeMirror-scroll {
padding-right: var(--side-margin);
}
Une configuration toute faite pour vim.
Je suis un noob de vim donc je sais pas exactement tout ce que ça permet de faire, mais au moins ça rend l'éditeur un peu plus agréable.