cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

Just a fun, pure CSS exploration of some newer or less common CSS features, including CSS Grid, Flexbox, position: sticky, and Sass (for the random colors and a couple other niceties).


  1. I believe in the power of CSS 😍

  2. Awesome!

    I think, with time, CSS will become so powerful, we won't need pre-procesors anymore, and most of the javascript presentation trickery will be gone too

    I kind of stole your random color generator for my little CSS grid experiment / flexbox rant https://codepen.io/facundocorradini/pen/XVMLEq hope you don't mind :) thanks!

  3. Josh this pen rocks!! Very cool man, thanks for sharing.

  4. Ok, unbreak my brain please. :not(:empty), if the div has content, then it will follow the following rules. But the position: sticky/top:0, does the position sticky not come into effect UNTIL the element is AT top: 0 ? That's the bit that has me scratching my head...

  5. @woodybepierced Sorry, I'm awful at checking comments! Hopefully you've long-since gotten an answer to your question by now, but just in case: an element with position: sticky basically just is positioned normally until it hits the given offset (in this case, top: 0, at which point the element switches to position: fixed and stays there.

    So if you had an element set to position: sticky and top: 20px, it would be normally positioned until it was 20 pixels from the top of the viewport, at which point it would stay 20 pixels from the top. Hope that helps!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.