doc22940

Flexbox Responsive Grid Playground

I'm playing with flexbox to build a future proof fluid and responsive grid system.

Flexbox is AWESOME on this task because it do every single thing a grid user need:

• fluid columns with fluid gutters;
• fluid columns with fixed gutters;
• fixed columns with fluid gutters;
• fixed columns and fluid columns on the same row;
• nested grids with or without side gutters;

doc22940

canvas#webgl

doc22940

All the border-radius'

A Pen by Acampbell on CodePen.

License.

doc22940

CSS leaning card effect

A couple of containing divs style a row of images as leaning cards.

A Pen by Acampbell on CodePen.

License.

doc22940

<div id="cybertruck"></div>

doc22940

CSS gradient-art decortions

A Pen by Acampbell on CodePen.

License.

doc22940

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 600 600" >
<defs>
  <filter id="goo" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9" result="cm" />
      <feBlend/>

  	</filter>

doc22940

<div class="container">
  <nav>
    <p>
      <input type="checkbox" name="motiona11y" id="motiona11y" />
      <label for="motiona11y">If you have a vestibular disorder, check this to turn off some effects</label>
    </p>
  </nav>

<div class="initial">
<div id="zebra-ill" role="presentation">

doc22940

Holidays Are Coming! 3D CSS Truck 🎅🎄

A Pen by Acampbell on CodePen.

License.

doc22940

3D CSS Letter Transition

A Pen by Acampbell on CodePen.

License.