Category: Сайтостроение

CSS Particles

See the Code – See it Full Page – See Details Simple particle effect with CSS transformations and animations and no JavaScript This Pen uses: Pug, SCSS, JavaScript, and Source: codepen

Dance of the Houdini Hexagons

See the Code – See it Full Page – See Details This is not my first time making [dancing hexagons](https://codepen.io/danwilson/pen/LWPavK)… but the tiling is so much simpler and more consistent now with CSS grid. I made the original dancing hexagons to show off individual transform functions (via `transform` + CSS variables). This pen is a chance to use Houdini and CSS keyframe animations instead of a bunch of setTimeouts +

Gradient infinity logo (1 element, no SVG, no JS save for ensuring fallbacks)

See the Code – See it Full Page – See Details [Watch me code this in 15 minutes](https://www.youtube.com/watch?v=pHMNhuPkfFU) . Tested and works fully only in WebKit browsers. Firefox messes up 3D order with the `drop-shadow()` filter, so removed that for it, Edge doesn’t support masking. If you like this demo in particular and my work in general and you want me to be able to continue putting stuff out, please

Baby Name Maker

See the Code – See it Full Page – See Details Mari and I are having a baby! Our little girl arrives in July, and as we’re both Developers, we had to make a baby name generator to help visualize some possible names 🤓 🤓 🤓 This Pen uses: HTML, SCSS, Babel, and Babel Source: codepen