cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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).

Comments

  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.
Loading...
Loading...