cutme

Interactive Form

Interactive input form built with just CSS. Abusing focus state & labels to handle transitions & navigation.

Navigate between inputs using Tab (Next) & Shift + Tab (Prev).

Pure CSS. No JS included.

A Pen by Emmanuel Pilande on CodePen.

cutme

Flappy Dialog

Based on this dribbble shot: http://drbl.in/nRRK by Peter Main https://dribbble.com/PeterMain

A Pen by Alex on CodePen.

License.

cutme

CSS Gooey Menu (Version 2)

Gooey menu with CSS and SVG filters. Version 2

A Pen by Lucas Bebber on CodePen.

License.

cutme

CSS Calc - boxes always a %age of their container

A simple demo to demonstrate a responsive container containing boxes of equal widths within.

A Pen by Vincent Pickering on CodePen.

License.

cutme

/*Setup Environment */
html                 { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body                 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:16px; margin:0; padding:0; }
.block               { float:left; display:inline-block; background-color:#999999; color:#000000; font-size:0.8em; text-align:center; line-height:4em; border:1px solid white;  }

/*
Calc Demo Quick and Dirty Fluid Grid system
--
If we need a quick grid system to test, apply to a legacy or internal system in a hurry, calc makes it so simple.

cutme

/*
 * Open image in gLightbox (https://github.com/mcstudios/glightbox)
 *
 * Usage:
 * <a hre="picture.jpg" class="js-image">Open picture</a>
 */

import GLightbox from 'glightbox';
require('../../node_modules/glightbox/dist/css/glightbox.css');