<li><atarget="test"href="mob_mediaquery.htm">MEDIA-QUERY, BASIC</a>: produces message indicating browser class (desktop/touch/low-end mobile)</li>
<li><atarget="test"href="mob_layout.htm">MEDIA-QUERY, LAYOUT</a>: same, but produces various skeletal layouts using media query criteria; large 3-column layout must appear only on desktop browser</li>
<li><atarget="test"href="mob_condjs.htm">MEDIA-QUERY, STYLEMEDIA</a>: Same as #1, but JS produces corresponding message via StyleMedia API</li>
</ol>
<aname="selectors"></a>
<h3>2. Selectors</h3>
<oltype="1">
<li><atarget="test"href="layout_link-fmt.htm">SELECTOR, ATTRIBUTE PREFIX/SUFFIX</a>: links appear w/different icons based on URL prefix/suffix; linebreaks should not appear within inline links</li>
<li><atarget="test"href="form_tapper.htm">SELECTOR, FORMS, TAP</a>: radio/checkbox inputs can be tapped (only 1 at a time within 'radio' set; any number within 'checkbox' set)</li>
<li><atarget="test"href="form_toggler.htm">SELECTOR, FORMS, TOGGLE</a>: 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</li>
<li><atarget="test"href="layout_tbl-keyhole.htm">SELECTOR, NAVIGATIONAL, TABLE</a>: pressing "view listings" displays stacked table rows, one at a time</li>
<li><atarget="test"href="css3_sel-nth.htm">SELECTOR, POSITIONAL</a>: displays 4x6 icon grid, implemted via nth-of-type()</li>
</ol>
<aname="visual-effects"></a>
<h3>3. Visual Effects</h3>
<oltype="1">
<li><atarget="test"href="css3_backgrounds.htm">CSS, BACKGROUNDS</a>: selected accordion tabs display both gradient background and icon; unselected only displays icon; uses scaleY transition</li>
<li><atarget="test"href="css3_shadow.htm">CSS, BOX-SHADOW, PLAIN</a>: nav element has shadow; icons appear smaller while pressed</li>
<li><atarget="test"href="css3_gradientBack.htm">CSS, GRADIENT, BACKGROUND</a>: background fades vertically from light to dark</li>
<li><atarget="test"href="css3_gradientBackStop.htm">CSS, GRADIENT, BACKGROUND, COLOR-STOP</a>: as you scroll down page, background fades vertically from dark to light and back to dark again</li>
<li><atarget="test"href="css3_gradientButton.htm">CSS, GRADIENT, BUTTON</a>: buttons appear with vertical shading, appearing w/inverted gradient when pressed</li>
<li><atarget="test"href="css3_grad-radial.htm">CSS, GRADIENT, RADIAL</a>: touching within box produces colorful *splat* effect for duration of touch</li>
<li><atarget="test"href="css3_mask-grad.htm">CSS, MASK, GRADIENT</a>: images appear w/gradient; touching them removes gradient</li>
<li><atarget="test"href="css3_mask-img.htm">CSS, MASK, IMAGE</a>: image fills screen but fades to black around the edges</li>
<li><atarget="test"href="css3_reflect.htm">CSS, REFLECTION</a>: heading and image both appear w/mirror reflections along bottom</li>
<li><atarget="test"href="css3_scroll.htm">CSS, SCROLLBARS</a>: code block scrollable via big buttons</li>
<li><atarget="test"href="css3_multicol.htm">ANIMATION, KEYFRAME, BANNER</a>: banner scrolls through 5 colorful items</li>
<li><atarget="test"href="anim_tabbedSkew.htm">ANIMATION, TRANSFORM, SKEWED TABS</a>: touching parts of cube displays different tabbed text</li>
<li><atarget="test"href="anim_accord.htm">ANIMATION, TRANSITION, CHAINED, ACCORDION</a>: tapping icon animates in collapsed accordions; tapping them animates in display of subheads; tapping anywhere else reverses animation sequence, collapsing back to initial icon</li>
<li><atarget="test"href="anim_panel.htm">ANIMATION, TRANSITION, MAX-WIDTH, PANEL</a>: pressing icon animates to expand panel of choices; pressing anywhere collapses panel back down to initial icon</li>
<li><atarget="test"href="anim_skew.htm">ANIMATION, TRANSITION, SKEW</a>: 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</li>
<li><atarget="test"href="anim_gallery.htm">ANIMATION, TRANSITION, TRANSLATE, GALLERY</a>: 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</li>
Licensees holding valid Qt Commercial licenses may use this document in accordance with the Qt Commercial License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Digia.</p>
