+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.
--- /dev/null
+<!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>
--- /dev/null
+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;
+}
--- /dev/null
+<!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>
git://git.webkit.org / WebKit.git / commitdiff
