Permalink
Browse files

transitions

  • Loading branch information...
1 parent c9b761d commit f294cc4f5322cd88b55e4f802207e1d81c56bb14 @PeterHimschoot committed Oct 3, 2011
View
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Specifying CSS colors</title>
+ <!-- inline style for better readability -->
+ <style type="text/css">
+ body
+ {
+ padding: 20px;
+ background: #C0C0C0;
+ }
+ div
+ {
+ margin: 20px;
+ padding: 10px;
+ }
+ #hex
+ {
+ background: #0000FF;
+ color: #FFFF00;
+ }
+ #rgb
+ {
+ background: rgb(0,0,255);
+ color: rgb(100%,100%,0%);
+ }
+ #named
+ {
+ background: Blue;
+ color: Yellow;
+ }
+ #rgba
+ {
+ background: rgba(0,0,255,0.4);
+ color: Yellow;
+ }
+ #hsl
+ {
+ background: hsl(240, 100%, 50%);
+ color: hsl(60, 100%, 50%);
+ }
+ #opacity
+ {
+ background: rgb(0,0,255);
+ color: rgb(100%,100%,0%);
+ opacity: 0.5;
+ }
+ </style>
+</head>
+<body>
+ <div id="hex">
+ #hex { background: #0000FF; color: #FFFF00; }
+ </div>
+ <div id="rgb">
+ #rgb { background: rgb(0,0,255); color: rgb(100%,100%,0%); }
+ </div>
+ <div id="named">
+ #named { background: Blue; color: Yellow; }
+ </div>
+ <div id="rgba">
+ #rgba { background: rgba(0,0,255,0.4); color: Yellow; }
+ </div>
+ <div id="hsl">
+ #hsl { background: hsl(240, 100%, 50%); color: hsl(60, 100%, 50%); }
+ </div>
+ <div id="opacity">
+ #rgb { background: rgb(0,0,255); color: rgb(100%,100%,0%); opacity: 0.5; }
+ </div>
+</body>
+</html>
@@ -0,0 +1,15 @@
+<!DOCTYPE html >
+<html>
+<head>
+ <title>Using Google Web Fonts</title>
+ <link href='http://fonts.googleapis.com/css?family=Fanwood+Text' rel='stylesheet' type='text/css'>
+ <style>
+ h1 {
+ font-family: 'Fanwood Text', serif;
+ }
+ </style>
+</head>
+<body>
+<h1>Fanwood font downloaded from <a href="http://www.google.com/webfonts">Google Web Fonts</a></h1>
+</body>
+</html>
@@ -0,0 +1,70 @@
+<!DOCTYPE html >
+<html>
+<head>
+ <title>Using multiple columns</title>
+ <style>
+ .wrapper .content {
+ -webkit-column-count: 3;
+ -moz-column-count: 3;
+ column-count: 3;
+ -webkit-column-gap: 10px;
+ -moz-column-gap: 10px;
+ column-gap: 10px;
+ -webkit-column-width: 10em;
+ -moz-column-width: 10em;
+ column-width: 10em;
+ -webkit-column-rule: 1px solid #CCCCCC;
+ -moz-column-rule: 1px solid #CCCCCC;
+ column-rule: 1px solid #CCCCCC;
+ }
+
+ /*
+ .wrapper .content h2
+ {
+ -webkit-column-break-before: always;
+ -webkit-column-break-after: avoid;
+ }
+ */
+
+ /*
+ .first.column {
+ background: Yellow;
+ }
+ */
+ </style>
+ <script src="/js/jquery-1.4.1.min.js"></script>
+ <script src="/js/autocolumn.js"></script>
+ <script src="/js/modernizr-2.0.6-development-only.js"></script>
+ <script>
+ $(function ()
+ {
+ if (!Modernizr.csscolumns)
+ {
+ $('.content').columnize({ columns: 3 });
+ }
+ }
+ );
+ </script>
+</head>
+<body>
+ <div class="wrapper">
+ <div class="content">
+ <h2>Singleton pattern</h2>
+ <p>
+ Singleton is a pattern that controls the context in which an object gets created,
+ in such a way that there can be at most one single instance of the class.
+ </p>
+ <h2>How to implement</h2>
+ <p>
+ For some objects you want to make sure there is only one instance, for example a
+ class that decides on primary keys used for inserting new rows into a database.
+ One way to ensure that no two objects can be created, is to simply not allow creation
+ of objects, i.e. to use a static class (module in VB), with static (shared in VB)
+ fields and methods only. However, static classes cannot implement interfaces or
+ inherit from base classes. As a result, you don’t have polymorphism with static
+ classes. Also, you cannot use data binding against static properties, and many other
+ restrictions apply.</p>
+ </div>
+ </div>
+</body>
+</html>
@@ -0,0 +1,62 @@
+body {
+ background-color: rgba(0,0,0,0.2);
+ background-position: 50% 100%;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-clip: border-box;
+ background-origin: padding-box;
+ background-attachment: scroll;
+ background-image: url(form.png);
+}
+
+img#translated:hover {
+ -webkit-transform: translate(45px,-45px);
+ -moz-transform: translate(45px,-45px);
+ -ms-transform: translate(45px,-45px);
+ -o-transform: translate(45px,-45px);
+ transform: translate(45px,-45px);
+}
+
+img#scaled:hover {
+ -webkit-transform: scale(1.5,0.5);
+ -moz-transform: scale(1.5,0.5);
+ -ms-transform: scale(1.5,0.5);
+ -o-transform: scale(1.5,0.5);
+ transform: scale(1.5,0.5);
+}
+
+img#rotated:hover {
+ -webkit-transform: rotate(10deg) translateX(40px) scale(1.5);
+ -moz-transform: rotate(10deg) translateX(40px) scale(1.5);
+ -ms-transform: rotate(10deg) translateX(40px) scale(1.5);
+ -o-transform: rotate(10deg) translateX(40px) scale(1.5);
+ transform: rotate(10deg) translateX(40px) scale(1.5);
+}
+
+img#skewed:hover {
+ -webkit-transform: skew(15deg, 4deg);
+ -moz-transform: skew(15deg, 4deg);
+ -ms-transform: skew(15deg, 4deg);
+ -o-transform: skew(15deg, 4deg);
+ transform: skew(15deg, 4deg);
+}
+
+img#origin1 {
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+img#origin2 {
+ -webkit-transform-origin: right top;
+ -moz-transform-origin: right top;
+ -o-transform-origin: right top;
+ transform-origin: right top;
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+ -o-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+}
@@ -0,0 +1,38 @@
+<!DOCTYPE html >
+<html>
+<head>
+ <title>CSS3 Transformations</title>
+ <link href="transformations.css" rel="stylesheet" />
+</head>
+<body>
+ <section>
+ <h1>
+ Original</h1>
+ <div>
+ <img id="original" src="http://u2upeter.blob.core.windows.net/$root/u2u.jpg" alt="u2u" />
+ </div>
+ <h1>Translated</h1>
+ <div>
+ <img id="translated" src="http://u2upeter.blob.core.windows.net/$root/u2u.jpg" alt="u2u" />
+ </div>
+ <h1>Scaled</h1>
+ <div>
+ <img id="scaled" src="http://u2upeter.blob.core.windows.net/$root/u2u.jpg" alt="u2u" />
+ </div>
+ <h1>Rotated</h1>
+ <div>
+ <img id="rotated" src="http://u2upeter.blob.core.windows.net/$root/u2u.jpg" alt="u2u" />
+ </div>
+ <h1>Skewed</h1>
+ <div>
+ <img id="skewed" src="http://u2upeter.blob.core.windows.net/$root/u2u.jpg" alt="u2u" />
+ </div>
+ <h1>Transformation origin</h1>
+ <div>
+ <img id="origin1" src="http://u2upeter.blob.core.windows.net/$root/u2u.jpg" alt="u2u" />
+ <img id="origin2" src="http://u2upeter.blob.core.windows.net/$root/u2u.jpg" alt="u2u" />
+ </div>
+
+ </section>
+</body>
+</html>
@@ -0,0 +1,45 @@
+body {
+}
+
+section > h1 {
+ color: #0000FF;
+ font-size: xx-large;
+ -webkit-transition-property: color;
+ -moz-transition-property: color;
+ -o-transition-property: color;
+ transition-property: color;
+ -webkit-transition-duration: 2s;
+ -moz-transition-duration: 2s;
+ -o-transition-duration: 2s;
+ transition-duration: 2s;
+}
+
+/*section > h1:hover {
+ color: #FF00FF;
+ font-size: xx-large;
+ -webkit-transition-property: color;
+ -moz-transition-property: color;
+ -o-transition-property: color;
+ transition-property: color;
+ -webkit-transition-duration: 2s;
+ -moz-transition-duration: 2s;
+ -o-transition-duration: 2s;
+ transition-duration: 2s;
+ -webkit-transition-timing-function: ease;
+ -moz-transition-timing-function: ease;
+ -o-transition-timing-function: ease;
+ transition-timing-function: ease;
+ -webkit-transition-delay: 2s;
+ -moz-transition-delay: 2s;
+ -o-transition-delay: 2s;
+ transition-delay: 2s;
+}*/
+
+section > h1:hover {
+ color: #FF00FF;
+ font-size: xx-large;
+ -webkit-transition: color 2s ease-out;
+ -moz-transition: color 2s ease-out;
+ -o-transition: color 2s ease-out;
+ transition: color 2s ease-out;
+}
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Transitions</title>
+ <link href="transitions.css" rel="stylesheet" />
+</head>
+<body>
+ <section>
+ <h1>
+ Please hover above me with the mouse</h1>
+ </section>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit f294cc4

Please sign in to comment.