Qt Reference Documentation



1. Media Queries

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

2. Selectors

  1. SELECTOR, ATTRIBUTE PREFIX/SUFFIX: links appear w/different icons based on URL prefix/suffix; linebreaks should not appear within inline links
  2. SELECTOR, FORMS, TAP: radio/checkbox inputs can be tapped (only 1 at a time within 'radio' set; any number within 'checkbox' set)
  3. 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
  4. SELECTOR, NAVIGATIONAL, TABLE: pressing "view listings" displays stacked table rows, one at a time
  5. SELECTOR, POSITIONAL: displays 4x6 icon grid, implemted via nth-of-type()

3. Visual Effects

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

4. Dynamic CSS

  1. ANIMATION, DEMO, ROTATE: animated demo of rotating boxes
  2. ANIMATION, DEMO, SCALE: animated demo of shrinking/expanding box
  3. ANIMATION, DEMO, SKEW: animated demo of box being pushed and piulled around
  4. ANIMATION, KEYFRAME, PULSE: pressing icons causes them to pulse indefinitely
  5. ANIMATION, KEYFRAME, SLIDING: drill-down menus
  6. ANIMATION, KEYFRAME, BANNER: banner scrolls through 5 colorful items
  7. ANIMATION, TRANSFORM, SKEWED TABS: touching parts of cube displays different tabbed text
  8. 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
  9. ANIMATION, TRANSITION, MAX-WIDTH, PANEL: pressing icon animates to expand panel of choices; pressing anywhere collapses panel back down to initial icon
  10. 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
  11. 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

  1. 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).

Thank you for giving your feedback.

Make sure it is related to this specific page. For more general bugs and requests, please use the Qt Bug Tracker.