Using labels (with pointer-events: none) to overlay radio inputs. I was inspired to make this after reading "Dropdowns Should be the UI of Last Resort" article here: http://www.lukew.com/ff/entry.asp?1950
A Pen by lukejacksonn on CodePen.
Jackie Wu jackiewu
Want to create your very on Material Playing Card? Follow the guide below!
Material Playing Cards, this is just the backbone for a full on 30s demo that I'm creating within a few days.
Card Design by Austin Condiff http://www.materialup.com/posts/material-design-card-animation http://www.austincondiff.com/
A jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport. Find it here on Github: https://github.com/mike-zarandona/StickyStack.js
A Pen by Mike Zarandona on CodePen.
Sourse of inspiration - http://rdcm.com/en/
Slider not working in IE, because of transform-style: preserve-3d. Handle control is broken in FF during rotation, because FF still have this nasty bug with stacking context and translateZ, and it's simply breaks z-index order for elements.
I tried to create this slider as sort of plugin/component. It's more like a practice, so js architecture is pretty random. But it's working :) And you can use multiple sliders on page with different sizes and different settings (you can find options object in js).
Don't forget to rotate slides with control handle.
jackiewu
/ Multi Page Form (Pure CSS).markdown
Created
August 1, 2015 04:01
Multi Page Form (Pure CSS)
A Pen by ActiveCodex on CodePen.
Why use stupid boxed form elements when we can ask our users to simply complete a sentence in natural language? Inspired by this Medium article: https://medium.com/@saijogeorge/creative-form-input-field-design-examples-bfe5dd50808a
A Pen by Jesse Couch on CodePen.
This demo uses clipping paths to create a diamond grid.
A Pen by Karen Menezes on CodePen.
jackiewu
/ exam_db.skema
Created
May 11, 2015 16:43
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [{"name":"Bears","color":"Blue","position":{"x":177,"y":85},"modelclass":"Bear","increment":false,"timestamp":false,"softdelete":false,"column":[{"colid":"c217","name":"id","type":"increments","length":"0","order":0,"defaultvalue":"","enumvalue":""},{"colid":"c218","name":"name","type":"string","length":"200","order":1,"defaultvalue":"","enumvalue":""},{"colid":"c219","name":"danger_level","type":"string","length":"200","order":2,"defaultvalue":"","enumvalue":""}],"relation":[{"extramethods":"","foreignkeys":"","name":"fish","relatedmodel":"Fish","relationtype":"hasOne","usenamespace":""},{"extramethods":"","foreignkeys":"","name":"trees","relatedmodel":"Trees","relationtype":"hasMany","usenamespace":""},{"extramethods":"","foreignkeys":"bear_id, picnic_id","name":"picnics","relatedmodel":"Picnics","relationtype":"belongsToMany","usenamespace":""}],"seeding":[]},{"name":"Fish","color":"Yellow","position":{"x":1063,"y":14},"modelclass":"Fish","increment":false,"timestamp":false,"softdelete":false,"column":[{"c |