A sortable list using the browser's own drag and drop. Pick an item up and drop it where you want it.
The placeholder is the dragged element itself with a class on it, so nothing is cloned and nothing gets out of step. ...
Community Feed
Skeleton Shimmer
The loading skeleton every app uses, in about twelve lines of CSS. One gradient, moved across with background-position.
It swaps to real content after two seconds so you can see both states. #css
Tooltip, CSS Only
Tooltips with no JavaScript, positioned with one pseudo element and a transform. They read their text from a data attribute, so adding one is adding an attribute.
Hover any of the four. #css
Star Rating
A star rating that works on hover and on click, drawn with one SVG path reused five times.
The clearing on mouseleave matters: without it the stars stay wherever your cursor last was and nobody trusts the value. #javasc...
Masonry, No JS
A masonry layout in six lines of CSS using columns. Items of different heights pack together with no gaps and no library.
The catch worth knowing: columns read top to bottom, not left to right, so the order is different...
Live Theme Builder
Three sliders writing straight into CSS custom properties, so the whole card restyles as you move them.
Nothing re-renders. The browser recalculates what depends on the variable and nothing else, which is why it stays s...
Loading comments...
Sign in to comment.