CSS: SAMPLE PAGES

MEDIA-QUERY, BASIC: produces message indicating browser class (desktop/touch/low-end mobile)
MEDIA-QUERY, LAYOUT: same, but produces various skeletal layouts using media query criteria; large 3-column layout must appear only on desktop browser
MEDIA-QUERY, STYLEMEDIA: Same as #1, but JS produces corresponding message via StyleMedia API

SELECTOR, ATTRIBUTE PREFIX/SUFFIX: links appear w/different icons based on URL prefix/suffix; linebreaks should not appear within inline links
SELECTOR, FORMS, TAP: radio/checkbox inputs can be tapped (only 1 at a time within 'radio' set; any number within 'checkbox' set)
SELECTOR, FORMS, TOGGLE: radio/checkbox inputs can be toggled (only 1 at a time within 'radio' inputs; any number within 'checkbox' inputs); 2 "binary" examples at bottom use custom text
SELECTOR, NAVIGATIONAL, TABLE: pressing "view listings" displays stacked table rows, one at a time
SELECTOR, POSITIONAL: displays 4x6 icon grid, implemted via nth-of-type()

CSS, BACKGROUNDS: selected accordion tabs display both gradient background and icon; unselected only displays icon; uses scaleY transition
CSS, BORDER IMAGE: border image surrounds box
CSS, BOX-SHADOW, PLAIN: nav element has shadow; icons appear smaller while pressed
CSS, GRADIENT, BACKGROUND: background fades vertically from light to dark
CSS, GRADIENT, BACKGROUND, COLOR-STOP: as you scroll down page, background fades vertically from dark to light and back to dark again
CSS, GRADIENT, BUTTON: buttons appear with vertical shading, appearing w/inverted gradient when pressed
CSS, GRADIENT, RADIAL: touching within box produces colorful *splat* effect for duration of touch
CSS, MASK, GRADIENT: images appear w/gradient; touching them removes gradient
CSS, MASK, IMAGE: image fills screen but fades to black around the edges
CSS, REFLECTION: heading and image both appear w/mirror reflections along bottom
CSS, SCROLLBARS: code block scrollable via big buttons
CSS, TEXT-OVERFLOW: items appear w/ellipses; touching them expands them; pressing (X) collapses them
CSS, TEXT-SHADOW: heading text appears with shadow
CSS, TEXT-STROKE: first heading appears w/black outline

ANIMATION, DEMO, ROTATE: animated demo of rotating boxes
ANIMATION, DEMO, SCALE: animated demo of shrinking/expanding box
ANIMATION, DEMO, SKEW: animated demo of box being pushed and piulled around
ANIMATION, KEYFRAME, PULSE: pressing icons causes them to pulse indefinitely
ANIMATION, KEYFRAME, SLIDING: drill-down menus
ANIMATION, KEYFRAME, BANNER: banner scrolls through 5 colorful items
ANIMATION, TRANSFORM, SKEWED TABS: touching parts of cube displays different tabbed text
ANIMATION, TRANSITION, CHAINED, ACCORDION: tapping icon animates in collapsed accordions; tapping them animates in display of subheads; tapping anywhere else reverses animation sequence, collapsing back to initial icon
ANIMATION, TRANSITION, MAX-WIDTH, PANEL: pressing icon animates to expand panel of choices; pressing anywhere collapses panel back down to initial icon
ANIMATION, TRANSITION, SKEW: tapping items causes them to wipe off right edge w/skew effect; remainder re-pack vertically; touching each category icon removes non-matching items and drops down matching ones
ANIMATION, TRANSITION, TRANSLATE, GALLERY: tapping images adjacent to main image animates them in; tapping current image flips to display text; w/text displaying, tapping adjacent image animates both effects @ same time

5. Storage

LOCAL/SESSION STORAGE: When opened for first time, form opens featuring login/password/credit-card fields. Fill them out. Each input's background will go pink if input is invalid. Login & password validate simply as "required" so any string will do. Credit card validates as 16-digit numeral. After filling out, press dismiss box. Then quit & reopen browser, go back to page, and press (i) info icon to get back into form. login/password should be same as initially entered (localStorage), but credit-card data s/b absent (sessionStorage).

[+] Documentation Feedback