2008-05-12 Maciej Stachowiak <mjs@apple.com>
authormjs@apple.com <mjs@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 May 2008 07:39:20 +0000 (07:39 +0000)
committermjs@apple.com <mjs@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 May 2008 07:39:20 +0000 (07:39 +0000)
        Not reviewed - new demo.

        Added a demo of CSS Transforms and Transitions.

        * demos/transitions-and-transforms: Added.
        * demos/transitions-and-transforms/Finder Coverflow.png: Added.
        * demos/transitions-and-transforms/Horsehead.png: Added.
        * demos/transitions-and-transforms/Mail Stationery.png: Added.
        * demos/transitions-and-transforms/Quick Look.png: Added.
        * demos/transitions-and-transforms/Spaces.png: Added.
        * demos/transitions-and-transforms/Stacks.png: Added.
        * demos/transitions-and-transforms/Time Machine.png: Added.
        * demos/transitions-and-transforms/index.html: Added.
        * demos/transitions-and-transforms/leopard.css: Added.
        * demos/transitions-and-transforms/no-style.html: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@33040 268f45cc-cd09-0410-ab3c-d52691b4dbfc

WebKitSite/ChangeLog
WebKitSite/demos/transitions-and-transforms/Finder Coverflow.png [new file with mode: 0644]
WebKitSite/demos/transitions-and-transforms/Horsehead.png [new file with mode: 0644]
WebKitSite/demos/transitions-and-transforms/Mail Stationery.png [new file with mode: 0644]
WebKitSite/demos/transitions-and-transforms/Quick Look.png [new file with mode: 0644]
WebKitSite/demos/transitions-and-transforms/Spaces.png [new file with mode: 0644]
WebKitSite/demos/transitions-and-transforms/Stacks.png [new file with mode: 0644]
WebKitSite/demos/transitions-and-transforms/Time Machine.png [new file with mode: 0644]
WebKitSite/demos/transitions-and-transforms/index.html [new file with mode: 0644]
WebKitSite/demos/transitions-and-transforms/leopard.css [new file with mode: 0644]
WebKitSite/demos/transitions-and-transforms/no-style.html [new file with mode: 0644]

index 8f2e885335c975c4ac604f5e036c4da700e3a7d1..f6db3b2a86d05592e24830815b6f630b010a3643 100644 (file)
@@ -1,3 +1,21 @@
+2008-05-12  Maciej Stachowiak  <mjs@apple.com>
+
+        Not reviewed - new demo.
+        
+        Added a demo of CSS Transforms and Transitions.
+
+        * demos/transitions-and-transforms: Added.
+        * demos/transitions-and-transforms/Finder Coverflow.png: Added.
+        * demos/transitions-and-transforms/Horsehead.png: Added.
+        * demos/transitions-and-transforms/Mail Stationery.png: Added.
+        * demos/transitions-and-transforms/Quick Look.png: Added.
+        * demos/transitions-and-transforms/Spaces.png: Added.
+        * demos/transitions-and-transforms/Stacks.png: Added.
+        * demos/transitions-and-transforms/Time Machine.png: Added.
+        * demos/transitions-and-transforms/index.html: Added.
+        * demos/transitions-and-transforms/leopard.css: Added.
+        * demos/transitions-and-transforms/no-style.html: Added.
+
 2008-05-08  Mark Rowe  <mrowe@apple.com>
 
         Reviewed by Sam Weinig.
diff --git a/WebKitSite/demos/transitions-and-transforms/Finder Coverflow.png b/WebKitSite/demos/transitions-and-transforms/Finder Coverflow.png
new file mode 100644 (file)
index 0000000..621dd75
Binary files /dev/null and b/WebKitSite/demos/transitions-and-transforms/Finder Coverflow.png differ
diff --git a/WebKitSite/demos/transitions-and-transforms/Horsehead.png b/WebKitSite/demos/transitions-and-transforms/Horsehead.png
new file mode 100644 (file)
index 0000000..c5af43f
Binary files /dev/null and b/WebKitSite/demos/transitions-and-transforms/Horsehead.png differ
diff --git a/WebKitSite/demos/transitions-and-transforms/Mail Stationery.png b/WebKitSite/demos/transitions-and-transforms/Mail Stationery.png
new file mode 100644 (file)
index 0000000..1869e2e
Binary files /dev/null and b/WebKitSite/demos/transitions-and-transforms/Mail Stationery.png differ
diff --git a/WebKitSite/demos/transitions-and-transforms/Quick Look.png b/WebKitSite/demos/transitions-and-transforms/Quick Look.png
new file mode 100644 (file)
index 0000000..3a6f06e
Binary files /dev/null and b/WebKitSite/demos/transitions-and-transforms/Quick Look.png differ
diff --git a/WebKitSite/demos/transitions-and-transforms/Spaces.png b/WebKitSite/demos/transitions-and-transforms/Spaces.png
new file mode 100644 (file)
index 0000000..6db6456
Binary files /dev/null and b/WebKitSite/demos/transitions-and-transforms/Spaces.png differ
diff --git a/WebKitSite/demos/transitions-and-transforms/Stacks.png b/WebKitSite/demos/transitions-and-transforms/Stacks.png
new file mode 100644 (file)
index 0000000..af9f9cc
Binary files /dev/null and b/WebKitSite/demos/transitions-and-transforms/Stacks.png differ
diff --git a/WebKitSite/demos/transitions-and-transforms/Time Machine.png b/WebKitSite/demos/transitions-and-transforms/Time Machine.png
new file mode 100644 (file)
index 0000000..108aba2
Binary files /dev/null and b/WebKitSite/demos/transitions-and-transforms/Time Machine.png differ
diff --git a/WebKitSite/demos/transitions-and-transforms/index.html b/WebKitSite/demos/transitions-and-transforms/index.html
new file mode 100644 (file)
index 0000000..7637b5a
--- /dev/null
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Leopard Features Demo</title>
+<link rel="stylesheet" href="leopard.css">
+</head>
+<body>
+
+<h1>Leopard Features Demo</h1>
+
+<ul id="features">
+<li>
+  <h2 class="name">Stacks</h2>
+  <div class="picture"><img src="Stacks.png"></div>
+  <div class="description">
+    <b>Stacks</b> are Dock items that gives you fast access to a
+    folder of files. When you click a stack, the files within spring
+    from the Dock in a fan or a grid, depending on the number of items
+    (or the preference you set). Leopard starts you off with two
+    premade stacks: one for downloads and the other for documents.
+  </div>
+</li>
+<li>
+  <h2 class="name">Cover Flow</h2>
+  <div class="picture"><img src="Finder Coverflow.png"></div>
+  <div class="description">
+    <b>Cover Flow</b> lets you flip through your documents as easily
+    as you flip through album art in iTunes. Cover Flow displays each
+    file as a large preview of its first page, and you can click
+    through multipage documents or play movies. Now you can actually
+    see your files in the Finder - not just as icons, but as they
+    really look.
+  </div>
+</li>
+<li>
+  <h2 class="name">Quick Look</h2>
+  <div class="picture"><img src="Quick Look.png"></div>
+  <div class="description">
+    <b>Quick Look</b> works with nearly every file on your system,
+    including images, text files, PDF documents and movies. Just tap
+    the Space bar to see a file in Quick Look, or click the Quick Look
+    icon in the Finder window (if it's not there already, add it by
+    selecting Customize Toolbar from the View menu in the Finder).
+  </div>
+</li>
+<li>
+  <h2 class="name">Time Machine</h2>
+  <div class="picture"><img src="Time Machine.png"></div>
+  <div class="description">
+    <b>Time Machine</b> backs up your system files, applications,
+    accounts, preferences, music, photos, movies, and documents. But
+    what makes Time Machine different from other backup applications
+    is that it not only keeps a spare copy of every file, it remembers
+    how your system looked on a given day.
+  </div>
+</li>
+<li>
+  <h2 class="name">Mail Stationery</h2>
+  <div class="picture"><img src="Mail Stationery.png"></div>
+  <div class="description">
+    <b>Mail Stationery</b> features 30 professionally designed
+    templates that make a virtual keepsake out of every email you
+    send. From invitations to birthday greetings, stationery templates
+    feature coordinated layouts, fonts, colors, and drag-and-drop
+    photo placement from your iPhoto library - everything to help you
+    get your point across.
+  </div>
+</li>
+<li>
+  <h2 class="name">Spaces</h2>
+  <div class="picture"><img src="Spaces.png"></div>
+  <div class="description">
+    <b>Spaces</b> lets you group your application windows and banish
+    clutter completely. Leopard gives you a space for everything and
+    makes it easy to switch between your spaces. Start by simply
+    clicking the Spaces icon in the Dock.
+  </div>
+</li>
+</ul>
+
+<script>
+var selected = null;
+
+for (var n = document.getElementById("features").firstChild; n; n = n.nextSibling) {
+    n.onclick = function() {
+        if (this == selected) {
+            selected.className = "";
+            selected = null;
+        } else if(selected) {
+            selected.className = "";
+            selected = this;
+            selected.className = "enabled";
+        } else {
+            selected = this;
+            selected.className = "enabled";
+        }
+    }
+}
+</script>
+</body>
+</html>
diff --git a/WebKitSite/demos/transitions-and-transforms/leopard.css b/WebKitSite/demos/transitions-and-transforms/leopard.css
new file mode 100644 (file)
index 0000000..8d62b0d
--- /dev/null
@@ -0,0 +1,105 @@
+body {
+    background: url(Horsehead.png);
+    -webkit-background-size: 100% 100%;
+    font-family: "Lucida Grande";
+}
+
+
+h1 {
+    background-color: #400030;
+    color: white;
+    display: block;
+    margin: 10px;
+    padding: 10px;
+    border: 3px solid white;
+    -webkit-border-radius: 9px;
+    -moz-border-radius: 9px;
+    font-size: 40px;
+    font-weight: bold;
+    opacity: 0.9;
+    text-align: center;
+}
+
+#features {
+    position: relative;
+    width: 400px;
+    list-style: none;
+}
+
+#features > li > .name {
+    -webkit-transition-duration: 250ms;
+    -webkit-transition-function: ease-out;
+    background-color: #400030;
+    color: white;
+    display: block;
+    margin: 10px;
+    padding: 10px;
+    border: 3px solid white;
+    -webkit-border-radius: 9px;
+    -moz-border-radius: 9px;
+    font-size: 30px;
+    font-weight: bold;
+    opacity: 0.5;
+    -webkit-user-select: none;
+    cursor: pointer;
+}
+
+#features > li > .name:hover {
+    -webkit-transform: scale(1.2);
+    opacity: 0.9;
+}
+
+#features > li.enabled > .name {
+    background-color: black;
+    opacity: 0.8;
+}
+
+#features > li > .picture {
+    -webkit-transition-duration: 300ms;
+    -webkit-timing-function: ease-in;
+    -webkit-transform: rotate(-5deg);
+    opacity: 0;
+    border: 5px solid white;
+    position: absolute;
+    left: 120%;
+    top: 30px;
+    height: auto;
+}
+
+#features > li > .picture > img {
+    display: block;
+    background-color: black;
+    width: 380px;
+}
+
+#features > li.enabled > .picture {
+    -webkit-timing-function: ease-out;
+    opacity: 1.0;
+}
+
+#features > li > .description {
+    -webkit-transition-duration: 350ms;
+    -webkit-timing-function: ease-in;
+    line-height: 1.4em;
+    position: absolute;
+    background-color: black;
+    color: white;
+    opacity: 0;   
+    margin: 10px;
+    padding: 10px;
+    border: 3px solid white;
+    -webkit-border-radius: 9px;
+    -moz-border-radius: 9px;
+    font-size: 16px;
+    left: 120%;
+    top: 330px;
+    width: 350px;
+}
+
+#features > li > .description > b {
+    font-size: 1.1em;
+}
+
+#features > li.enabled > .description {
+    opacity: 0.8;
+}
diff --git a/WebKitSite/demos/transitions-and-transforms/no-style.html b/WebKitSite/demos/transitions-and-transforms/no-style.html
new file mode 100644 (file)
index 0000000..206c50f
--- /dev/null
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Leopard Features Demo - No Styles</title>
+</head>
+<body>
+
+<h1>Leopard Features Demo</h1>
+
+<ul id="features">
+<li>
+  <h2 class="name">Stacks</h2>
+  <div class="picture"><img src="Stacks.png"></div>
+  <div class="description">
+    <b>Stacks</b> are Dock items that gives you fast access to a
+    folder of files. When you click a stack, the files within spring
+    from the Dock in a fan or a grid, depending on the number of items
+    (or the preference you set). Leopard starts you off with two
+    premade stacks: one for downloads and the other for documents.
+  </div>
+</li>
+<li>
+  <h2 class="name">Cover Flow</h2>
+  <div class="picture"><img src="Finder Coverflow.png"></div>
+  <div class="description">
+    <b>Cover Flow</b> lets you flip through your documents as easily
+    as you flip through album art in iTunes. Cover Flow displays each
+    file as a large preview of its first page, and you can click
+    through multipage documents or play movies. Now you can actually
+    see your files in the Finder - not just as icons, but as they
+    really look.
+  </div>
+</li>
+<li>
+  <h2 class="name">Quick Look</h2>
+  <div class="picture"><img src="Quick Look.png"></div>
+  <div class="description">
+    <b>Quick Look</b> works with nearly every file on your system,
+    including images, text files, PDF documents and movies. Just tap
+    the Space bar to see a file in Quick Look, or click the Quick Look
+    icon in the Finder window (if it's not there already, add it by
+    selecting Customize Toolbar from the View menu in the Finder).
+  </div>
+</li>
+<li>
+  <h2 class="name">Time Machine</h2>
+  <div class="picture"><img src="Time Machine.png"></div>
+  <div class="description">
+    <b>Time Machine</b> backs up your system files, applications,
+    accounts, preferences, music, photos, movies, and documents. But
+    what makes Time Machine different from other backup applications
+    is that it not only keeps a spare copy of every file, it remembers
+    how your system looked on a given day.
+  </div>
+</li>
+<li>
+  <h2 class="name">Mail Stationery</h2>
+  <div class="picture"><img src="Mail Stationery.png"></div>
+  <div class="description">
+    <b>Mail Statienery</b> features 30 professionally designed
+    templates that make a virtual keepsake out of every email you
+    send. From invitations to birthday greetings, stationery templates
+    feature coordinated layouts, fonts, colors, and drag-and-drop
+    photo placement from your iPhoto library - everything to help you
+    get your point across.
+  </div>
+</li>
+<li>
+  <h2 class="name">Spaces</h2>
+  <div class="picture"><img src="Spaces.png"></div>
+  <div class="description">
+    <b>Spaces</b> lets you group your application windows and banish
+    clutter completely. Leopard gives you a space for everything and
+    makes it easy to switch between your spaces. Start by simply
+    clicking the Spaces icon in the Dock.
+  </div>
+</li>
+</ul>
+
+<script>
+var selected = null;
+
+for (var n = document.getElementById("features").firstChild; n; n = n.nextSibling) {
+    n.onclick = function() {
+        if (this == selected) {
+            selected.className = "";
+            selected = null;
+        } else if(selected) {
+            selected.className = "";
+            selected = this;
+            selected.className = "enabled";
+        } else {
+            selected = this;
+            selected.className = "enabled";
+        }
+    }
+}
+</script>
+</body>
+</html>