CSS: SAMPLE PAGES

Qt Reference Documentation

- Qt 4.7
- ALL VERSIONS

- A
- A
- A
- Print

# CSS: SAMPLE PAGES

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

[+] Documentation Feedback
X

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.