Demonstrations from Post-Modern CSS

Code Examples from my talk Post-Modern CSS

Enjoy a collection of CodePens related to my Post-Modern CSS talk. You can download the slides here or view the slides on slideshare.

Feel free to ask me a question in the comments below or tweet at me

CSS Gradients

Uncomment out the various background-image properties on the body of this pen to see a variety of ways to use CSS gradients.

CSS Shapes Module Level 1

Make sure you're in a browser that supports the CSS Shapes specification. Then, play with the various shapes in the codepen and admire the text that wraps around my supremely awkward headshot.

See the Pen CSS Shapes Module by Bryan Robinson (@brob) on CodePen.

Flexbox

There are three simple examples in a collection on CodePen. I'd recommend viewing over there.

Viewport Units and calc()

With a focus on Viewport units USING calc, here's responsive squares and typography and my most popular Pen, The Cover Page. As a note, because of the iFrame, the viewport's size is the size of the white area in the Pen.

See the Pen Viewport Units by Bryan Robinson (@brob) on CodePen.


See the Pen Cover Page by Bryan Robinson (@brob) on CodePen.

Initial Letter

Only supported in Safari currently.

See the Pen Initial Letter by Bryan Robinson (@brob) on CodePen.

Transforms

Transforms aren't just for animations. Here are a few fun static uses.

See the Pen Simple Transforms by Bryan Robinson (@brob) on CodePen.

Grid Layout

Grid is a big topic. I have blog posts here. I have two collections just for grid on Codepen. Here are the examples from Post-Modern CSS.

See the Pen Simple Grid example by Bryan Robinson (@brob) on CodePen.

See the Pen Simple Grid example Extended by Bryan Robinson (@brob) on CodePen.

Background Blend Mode

Just for fun, really. See what various colors look like with my favorite blend modes.

See the Pen Background Blend Modes by Bryan Robinson (@brob) on CodePen.