From 38be0d13830efd2d98281c645c3a60afe05ffece Mon Sep 17 00:00:00 2001 From: Qt by Nokia Date: Wed, 27 Apr 2011 12:05:43 +0200 Subject: Initial import from the monolithic Qt. This is the beginning of revision history for this module. If you want to look at revision history older than this, please refer to the Qt Git wiki for how to use Git history grafting. At the time of writing, this wiki is located here: http://qt.gitorious.org/qt/pages/GitIntroductionWithQt If you have already performed the grafting and you don't see any history beyond this commit, try running "git log" with the "--follow" argument. Branched from the monolithic repo, Qt master branch, at commit 896db169ea224deb96c59ce8af800d019de63f12 --- examples/webkit/webkit-guide/_index.html | 322 +++++++++++++++++++++++++++++++ 1 file changed, 322 insertions(+) create mode 100644 examples/webkit/webkit-guide/_index.html (limited to 'examples/webkit/webkit-guide/_index.html') diff --git a/examples/webkit/webkit-guide/_index.html b/examples/webkit/webkit-guide/_index.html new file mode 100644 index 0000000000..709f951c8f --- /dev/null +++ b/examples/webkit/webkit-guide/_index.html @@ -0,0 +1,322 @@ + + + + + + + CSS: SAMPLE PAGES + + + + + + + + + + +
+
+ + Qt Reference Documentation +
+ + + +
+
+
+
+ +
+
+
+
+ Search index:
+ + + +
+

+ Examples

+ +
+
+
+
+
+
    +
  • Home
    • + +
  • CSS: SAMPLE PAGES
+
+
+ +
+
+
+
+

Contents

+ +
+

CSS: SAMPLE PAGES

+ + +
+ +

CSS: SAMPLE PAGES

+ +

1. Media Queries

+
    +
  1. MEDIA-QUERY, BASIC: produces message indicating browser class (desktop/touch/low-end mobile)
    2. +
  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. +
  3. MEDIA-QUERY, STYLEMEDIA: Same as #1, but JS produces corresponding message via StyleMedia API
    4. +
+ +

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. +
  2. SELECTOR, FORMS, TAP: radio/checkbox inputs can be tapped (only 1 at a time within 'radio' set; any number within 'checkbox' set)
    3. +
  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. +
  4. SELECTOR, NAVIGATIONAL, TABLE: pressing "view listings" displays stacked table rows, one at a time
    5. +
  5. SELECTOR, POSITIONAL: displays 4x6 icon grid, implemted via nth-of-type()
    6. +
+ +

3. Visual Effects

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

4. Dynamic CSS

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

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). + +
    2. +
+ +
+ + +
+
+
+
+ +
+
+
+

+ © 2008-2010 Nokia Corporation and/or its + subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation + in Finland and/or other countries worldwide.

+

+ All other trademarks are property of their respective owners. Privacy Policy

+
+

+ 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 Nokia.

+

+ Alternatively, this document may be used under the terms of the GNU + Free Documentation License version 1.3 + as published by the Free Software Foundation.

+
+
+
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.

+

+

+
+
+
+
+ + + + -- cgit v1.2.3