| Trick Snippets |
|
center |
modern center vertical/horizontal |
sticky |
sticky object |
| Color Snippets |
|
analogous |
gets color analogous to variable |
complementary |
gets color complementary to variable |
split |
gets color split to variable |
triad |
gets color triad to variable |
darken |
darken color (by percent) |
lighten |
lighten color (by percent) |
| Filter Snippets |
|
filter |
covers blur, brightness, contrast, drop-shadow, hue-rotate, invert, opacity, sepia, url, background (a way to add filters to background image only) |
Use it either with filter: or backdrop-filter: (it filters the element below, see here)
| Font Snippets |
|
monospace |
default monospace fonts |
sans |
default sans-serif fonts |
serif |
default serif fonts |
slab |
default slab fonts |
system (new) |
default system fonts |
| Responsive Snippets |
|
responsive |
regular and range media queries |
| Pseudo-Classes Snippets |
|
after |
|
before |
|
empty |
|
not |
:not, describe exception inside parenthesis |
root |
|
form |
covers :checked, :disabled, :enabled, :focus, :in-range, :invalid, :optional, :out-of-range, :read-only, :read-write, :required, :valid |
link |
covers :active, :hover, :link, :target, :visited |
order |
covers :first-child, :first-of-type, :last-child, :last-of-type, :nth-child, :nth-last-child, :nth-last-of-type, :nth-of-type, :only-child, :only-of-type |
text |
covers :first-letter, :first-line, :lang, :selection |
| Blend Snippets |
|
blend |
covers color-burn, color-dodge, color, darken, difference, exclusion, hard-light, hue, lighten, luminosity, multiply, overlay, saturation, screen, soft-light |
Variations are mix (default) or background (affects only background images).
For a complete list of blends and what they can do, I suggest reading
mix-blend-mode,
background-blend-mode and css techniques and effects for knockout text.