Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

pushing files to public website

  • Loading branch information...
commit abdb0cc29b0855c9a1c3af99da5d67275731ffbb 1 parent 46f9204
Scott Davis authored
1  .gitignore
... ... @@ -0,0 +1 @@
  1 +.DS_Store
1  README
... ... @@ -0,0 +1 @@
  1 +Source code and slides for my "CSS3 for Programmers" presentation.
121 _styles.css
... ... @@ -0,0 +1,121 @@
  1 +/******************
  2 + Source: http://www.alistapart.com/articles/forward-thinking-form-validation/
  3 +*******************/
  4 +
  5 +/* Just some base styles not needed for example to function */
  6 +*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
  7 +
  8 +body, form, ul, li, p, h2, h3, h4, h5
  9 +{
  10 + margin: 0;
  11 + padding: 0;
  12 +}
  13 +body { background-color: #606061; color: #ffffff; }
  14 +img { border: none; }
  15 +p
  16 +{
  17 + font-size: 1em;
  18 + margin: 0 0 1em 0;
  19 +}
  20 +h2 { font-size: 14px; margin: 0 0 12px; }
  21 +
  22 +/* Form styles */
  23 +#signup
  24 +{
  25 + margin: 20px auto;
  26 + width: 610px;
  27 +}
  28 +#signup fieldset
  29 +{
  30 + margin: 0 0 20px;
  31 + padding: 20px;
  32 + -webkit-border-radius: 5px;
  33 + -moz-border-radius: 5px;
  34 + border-radius: 5px;
  35 +}
  36 + #signup ol
  37 + {
  38 + list-style-type: none;
  39 + padding: 0;
  40 + margin: 0;
  41 + }
  42 + #signup li
  43 + {
  44 + margin: 0 0 12px;
  45 + position: relative;
  46 + }
  47 + #signup label
  48 + {
  49 + width: 150px;
  50 + display: inline-block;
  51 + vertical-align: top;
  52 + }
  53 + #signup fieldset input,
  54 + #signup fieldset textarea,
  55 + #signup fieldset select
  56 + {
  57 + background: #fff url(ico_validation.png) 379px 24px no-repeat;
  58 + display: inline-block;
  59 + width: 371px;
  60 + border: 1px solid #fff;
  61 + padding: 3px 26px 3px 3px;
  62 +
  63 + -moz-transition: background-color 1s ease;
  64 + -webkit-transition: background-color 1s ease;
  65 + -o-transition: background-color 1s ease;
  66 + transition: background-color 1s ease;
  67 + -webkit-border-radius: 5px;
  68 + -moz-border-radius: 5px;
  69 + border-radius: 5px;
  70 + }
  71 + #signup fieldset select { width: 401px; padding: 3px; }
  72 + #signup fieldset #postcode { padding: 3px; width: 400px; }
  73 +
  74 +
  75 +#signup input::-webkit-input-placeholder,
  76 +#signup input:-moz-placeholder {
  77 + color: #A6A6A6;
  78 +}
  79 +
  80 +#signup input:focus:required:invalid
  81 +{
  82 + background-color: pink;
  83 + background-position: 379px 3px;
  84 + outline: none;
  85 +}
  86 +#signup input[type=text]:focus:not([pattern]):required:invalid
  87 +{
  88 + background-color: #fff;
  89 + background-position: 379px -29px;
  90 +}
  91 +
  92 +#signup .validation01
  93 +{
  94 + background: red;
  95 + color: #fff;
  96 + display: none;
  97 + font-size: 12px;
  98 + padding: 3px;
  99 + position: absolute;
  100 + right: -160px;
  101 + text-align: center;
  102 + top: 0;
  103 + width: 150px;
  104 +
  105 + -moz-box-shadow: 0px 0px 4px #ffffff;
  106 + -webkit-box-shadow: 0px 0px 4px #ffffff;
  107 + box-shadow: 0px 0px 4px #ffffff;
  108 + -webkit-border-radius: 5px;
  109 + -moz-border-radius: 5px;
  110 + border-radius: 5px;
  111 +}
  112 +#signup input:focus + .validation01 { display: block; }
  113 +#signup input:focus:required:valid + .validation01 { background: green; }
  114 +#signup input:focus:required:valid + .validation01 .invalid { display: none; }
  115 +#signup input:focus:required:invalid + .validation01 .valid { display: none; }
  116 +
  117 +#signup input:required:valid
  118 +{
  119 + background-color: #fff;
  120 + background-position: 379px -61px;
  121 +}
BIN  css3.pdf
Binary file not shown
114 form.html
... ... @@ -0,0 +1,114 @@
  1 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 +
  3 +<!--
  4 + Source: http://www.alistapart.com/articles/forward-thinking-form-validation/
  5 +-->
  6 +
  7 +<html xmlns="http://www.w3.org/1999/xhtml">
  8 +
  9 +<head>
  10 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  11 + <meta name="viewport" content="width=device-width">
  12 +
  13 + <link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />
  14 +
  15 + <title>Validate those forms with CSS3 Basic UI module pseudo-classes and HTML5 Form attributes</title>
  16 +
  17 +</head>
  18 +<body>
  19 +
  20 + <form id="signup">
  21 + <h1>Sign up now!</h1>
  22 +
  23 + <h2>Fields marked (*) are required</h2>
  24 +
  25 + <fieldset>
  26 + <legend>Your details</legend>
  27 +
  28 + <ol>
  29 + <li>
  30 + <label for="msg">Name *</label>
  31 + <input type="text" id="msg" name="msg" placeholder="Full name" required />
  32 + </li>
  33 + <li>
  34 + <label for="email">Email *</label>
  35 + <input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" title="Please enter a valid email" required />
  36 + <p class="validation01">
  37 + <span class="invalid">Please enter a valid email address e.g. ryan@example.com</span>
  38 + <span class="valid">Thank you for entering a valid email</span>
  39 + </p>
  40 + </li>
  41 + <li>
  42 + <label for="tel">Phone *</label>
  43 + <input type="tel" id="tel" name="tel" pattern="\d{10}" placeholder="Please enter a ten digit phone number" required />
  44 + <p class="validation01">
  45 + <span class="invalid">No spaces or brackets e.g. 0390001234</span>
  46 + <span class="valid">That's what we wanted!</span>
  47 + </p>
  48 + </li>
  49 + </ol>
  50 + </fieldset>
  51 +
  52 + <fieldset>
  53 + <legend>Delivery address</legend>
  54 + <ol>
  55 + <li>
  56 + <label for="address">Address *</label>
  57 + <input id="address" name="address" type="text" required />
  58 + </li>
  59 + <li>
  60 + <label for="suburb">Suburb *</label>
  61 + <input id="suburb" name="suburb" type="text" required />
  62 + </li>
  63 + <li>
  64 + <label for="postcode">Post code *</label>
  65 + <input id="postcode" name="postcode" type="number" min="1001" max="8000" maxlength="4" required />
  66 + <p class="validation01">
  67 + <span class="invalid">Your postcode is out of range between 1001 - 8000</span>
  68 + <span class="valid">Thank you your postcode is in the correct range</span>
  69 + </p>
  70 + </li>
  71 + <li>
  72 + <label for="state">State</label>
  73 + <select name="state" id="state">
  74 + <option>ACT</option>
  75 + <option>NSW</option>
  76 + <option>NT</option>
  77 + <option>QLD</option>
  78 + <option>SA</option>
  79 + <option>TAS</option>
  80 + <option selected>VIC</option>
  81 + <option>WA</option>
  82 + </select>
  83 + </li>
  84 + </ol>
  85 + </fieldset>
  86 +
  87 + <fieldset>
  88 + <legend>Membership information</legend>
  89 + <ol>
  90 + <li>
  91 + <label for="username">Username *</label>
  92 + <input id="username" name="username" type="text" pattern="\w{4,}" placeholder="Atleast 4 alphanumeric characters" required />
  93 + </li>
  94 + <li>
  95 + <label for="password">Password *</label>
  96 + <input id="password" name="password" type="password" title="Minimum 8 characters, one number, one uppercase and one lowercase letter" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*" required />
  97 + <p class="validation01">
  98 + <span class="invalid">Minimum 8 characters, one number, one uppercase letter and one lowercase letter</span>
  99 + <span class="valid">Your password meets our requirements, thank you.</span>
  100 + </p>
  101 + </li>
  102 + <li>
  103 + <label for="url">Website *</label>
  104 + <input type="url" name="url" id="url" required />
  105 + </li>
  106 + </ol>
  107 + </fieldset>
  108 +
  109 + <input type="submit" value="Sign up" />
  110 +
  111 + </form>
  112 +
  113 +</body>
  114 +</html>
54 hover.html
... ... @@ -0,0 +1,54 @@
  1 +<!doctype html>
  2 +<html>
  3 + <head>
  4 + <title>Hover</title>
  5 + <meta name="viewport" content="width=device-width">
  6 +
  7 + <style type="text/css" media="screen">
  8 +
  9 + ul{
  10 + list-style-type: none;
  11 + }
  12 +
  13 + li{
  14 + float: left;
  15 + padding: 1em;
  16 + }
  17 +
  18 + .box{
  19 + background-color: green;
  20 + width: 100px;
  21 + height: 150px;
  22 + }
  23 +
  24 + .box:hover{
  25 + background-color: blue;
  26 + width: 150px;
  27 + height: 200px;
  28 + }
  29 +
  30 + /* NOTE: used for screen capture in the presentation */
  31 + .fakeHover{
  32 + background-color: blue;
  33 + width: 150px;
  34 + height: 200px;
  35 + }
  36 +
  37 + </style>
  38 + </head>
  39 +
  40 + <body>
  41 + <h1>Hover</h1>
  42 +
  43 + <div id="covers">
  44 + <ul>
  45 + <li><div class="box"></div></li>
  46 + <li><div class="box"></div></li>
  47 + <li><div class="box"></div></li>
  48 + <li><div class="box"></div></li>
  49 + </ul>
  50 + </div>
  51 +
  52 + </body>
  53 +
  54 +</html>
BIN  ico_validation.png
119 index.html
... ... @@ -1,88 +1,33 @@
1   -<!DOCTYPE html>
  1 +<!doctype html>
2 2 <html>
3   -<head>
4   - <meta charset='utf-8'>
5   -
6   - <title>scottdavis99/css3ForProgrammers @ GitHub</title>
7   -
8   - <style type="text/css">
9   - body {
10   - margin-top: 1.0em;
11   - background-color: #ccc;
12   - font-family: Helvetica, Arial, FreeSans, san-serif;
13   - color: #000000;
14   - }
15   - #container {
16   - margin: 0 auto;
17   - width: 700px;
18   - }
19   - h1 { font-size: 3.8em; color: #333333; margin-bottom: 3px; }
20   - h1 .small { font-size: 0.4em; }
21   - h1 a { text-decoration: none }
22   - h2 { font-size: 1.5em; color: #333333; }
23   - h3 { text-align: center; color: #333333; }
24   - a { color: #333333; }
25   - .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
26   - .download { float: right; }
27   - pre { background: #000; color: #fff; padding: 15px;}
28   - hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
29   - .footer { text-align:center; padding-top:30px; font-style: italic; }
30   - </style>
31   -</head>
32   -
33   -<body>
34   - <a href="https://github.com/scottdavis99/css3ForProgrammers"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
35   -
36   - <div id="container">
37   -
38   - <div class="download">
39   - <a href="https://github.com/scottdavis99/css3ForProgrammers/zipball/master">
40   - <img border="0" width="90" src="https://github.com/images/modules/download/zip.png"></a>
41   - <a href="https://github.com/scottdavis99/css3ForProgrammers/tarball/master">
42   - <img border="0" width="90" src="https://github.com/images/modules/download/tar.png"></a>
43   - </div>
44   -
45   - <h1><a href="https://github.com/scottdavis99/css3ForProgrammers">css3ForProgrammers</a>
46   - <span class="small">by <a href="https://github.com/scottdavis99">scottdavis99</a></span></h1>
47   -
48   - <div class="description">
49   - Source code and slides for my "CSS3 for Programmers" presentation
50   - </div>
51   -
52   -
53   -
54   -
55   -
56   -
57   -
58   -
59   -
60   -
61   - <h2>Authors</h2>
62   - <p>Scott Davis (scott@thirstyhead.com) <br/> </p>
63   -
64   -
65   -
66   - <h2>Contact</h2>
67   - <p>Scott Davis (scott@thirstyhead.com) <br/> </p>
68   -
69   -
70   - <h2>Download</h2>
71   - <p>
72   - You can download this project in either
73   - <a href="https://github.com/scottdavis99/css3ForProgrammers/zipball/master">zip</a> or
74   - <a href="https://github.com/scottdavis99/css3ForProgrammers/tarball/master">tar formats.
75   - </p>
76   - <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
77   - by running:
78   - <pre>$ git clone git://github.com/scottdavis99/css3ForProgrammers</pre>
79   - </p>
80   -
81   - <div class="footer">
82   - get the source code on GitHub : <a href="https://github.com/scottdavis99/css3ForProgrammers">scottdavis99/css3ForProgrammers</a>
83   - </div>
84   -
85   - </div>
86   -
87   -</body>
88   -</html>
  3 + <head>
  4 + <title>CSS3</title>
  5 + <meta name="viewport" content="width=device-width">
  6 + </head>
  7 +
  8 +
  9 + <body>
  10 + <h1>CSS3 for Programmers</h1>
  11 + <h2>Look and Feel</h2>
  12 + <ul>
  13 + <li><a href="selectors.html">Selectors</a></li>
  14 + <li><a href="selectors2.html">More Selectors</a></li>
  15 + <li><a href="form.html">Form Validation</a></li>
  16 + <li><a href="round.html">Rounded Corners</a></li>
  17 + </ul>
  18 +
  19 + <h2>Layout</h2>
  20 + <ul>
  21 + <li><a href="layout.html">Floating DIVs</a></li>
  22 + </ul>
  23 +
  24 + <h2>Behavior</h2>
  25 + <ul>
  26 + <li><a href="hover.html">Hover</a></li>
  27 + <li><a href="transition.html">Transition</a></li>
  28 + <li><a href="transitionWithImages.html">Transition with Images</a></li>
  29 + <li><a href="orientation.html">Orientation</a></li>
  30 + </ul>
  31 +
  32 + </body>
  33 +</html>
80 layout.html
... ... @@ -0,0 +1,80 @@
  1 +<!doctype html>
  2 +<html>
  3 + <head>
  4 + <title>Layout</title>
  5 + <meta name="viewport" content="width=device-width">
  6 +
  7 + <style type="text/css" media="screen">
  8 + .header{
  9 + background-color: yellow;
  10 + width: 100%;
  11 + clear: both;
  12 + }
  13 +
  14 + .wrapper{
  15 + width: 100%;
  16 + overflow: auto;
  17 + background-color: orange;
  18 + }
  19 +
  20 + .sidebar{
  21 + background-color: orange;
  22 + width: 25%;
  23 + float: left;
  24 + }
  25 +
  26 + .main{
  27 + background-color: blue;
  28 + width: 75%;
  29 + float: left;
  30 + }
  31 +
  32 + .footer{
  33 + background-color: green;
  34 + width: 100%;
  35 + clear: both;
  36 + }
  37 +
  38 + @media screen and (max-width:320px){
  39 + .sidebar{
  40 + width: 40%;
  41 + }
  42 +
  43 + .main{
  44 + width: 60%;
  45 + }
  46 + }
  47 + </style>
  48 + </head>
  49 +
  50 + <body>
  51 + <div class="header">
  52 + ACME Web Design
  53 + </div>
  54 +
  55 + <div class="wrapper">
  56 + <div class="sidebar">
  57 + <ul>
  58 + <li>Home</li>
  59 + <li>Services</li>
  60 + <li>Customers</li>
  61 + <li>About Us</li>
  62 + </ul>
  63 + </div>
  64 +
  65 + <div class="main">
  66 + <p>Bacon ipsum dolor sit amet fatback shoulder bresaola rump tri-tip biltong sirloin, ham hock bacon strip steak andouille filet mignon ribeye ground round. Pastrami salami tongue venison t-bone sirloin short ribs, ham swine. Bacon jowl tongue leberkas shankle. Short loin sirloin tongue frankfurter, turkey flank pancetta ground round prosciutto kielbasa.</p>
  67 +
  68 + <p>Ham tenderloin flank ribeye turducken hamburger. Bresaola meatloaf ham, sirloin flank swine shankle sausage capicola short loin boudin kielbasa. Tongue beef fatback biltong hamburger kielbasa. Jowl spare ribs turkey biltong, meatball venison prosciutto ground round frankfurter pork loin fatback pancetta swine.</p>
  69 +
  70 + <p>Venison pork loin ribeye, prosciutto corned beef salami hamburger swine kielbasa ham pork belly. Beef ribs frankfurter ham, meatball boudin bacon ham hock swine venison fatback biltong pork belly. Filet mignon ham hock andouille cow bresaola. Bacon drumstick ball tip kielbasa jowl shank, pork chop spare ribs meatloaf shoulder andouille short ribs beef ribs.</p>
  71 +
  72 + </div> <!-- end .body -->
  73 + </div> <!-- end .wrapper -->
  74 +
  75 + <div class="footer">
  76 + &copy; 2012, ACME Web Design, Inc.
  77 + </div>
  78 + </body>
  79 +
  80 +</html>
56 orientation.html
... ... @@ -0,0 +1,56 @@
  1 +<!doctype html>
  2 +<html>
  3 + <head>
  4 + <title>Transition</title>
  5 + <meta name="viewport" content="width=device-width">
  6 +
  7 + <style type="text/css" media="screen">
  8 +
  9 + ul{
  10 + list-style-type: none;
  11 + }
  12 +
  13 + li{
  14 + padding: 1em;
  15 + }
  16 +
  17 + @media screen and (orientation:landscape){
  18 + li{
  19 + float: left;
  20 + }
  21 + }
  22 +
  23 + .box{
  24 + background-color: green;
  25 + width: 100px;
  26 + height: 150px;
  27 + -webkit-transition: all 1s ease;
  28 + -moz-transition: all 1s ease;
  29 + -o-transition: all 1s ease;
  30 + -ms-transition: all 1s ease;
  31 + transition: all 1s ease;
  32 + }
  33 +
  34 + .box:hover{
  35 + background-color: blue;
  36 + width: 150px;
  37 + height: 200px;
  38 + }
  39 +
  40 + </style>
  41 + </head>
  42 +
  43 + <body>
  44 + <h1>Transition</h1>
  45 +
  46 + <div id="covers">
  47 + <ul>
  48 + <li><div class="box"></div></li>
  49 + <li><div class="box"></div></li>
  50 + <li><div class="box"></div></li>
  51 + <li><div class="box"></div></li>
  52 + </ul>
  53 + </div>
  54 + </body>
  55 +
  56 +</html>
24 round.html
... ... @@ -0,0 +1,24 @@
  1 +<!doctype html>
  2 +<html>
  3 + <head>
  4 + <title>Rounded Corners</title>
  5 + <meta name="viewport" content="width=device-width">
  6 +
  7 + <style type="text/css" media="screen">
  8 + .rounded {
  9 + border: 2px solid black;
  10 + border-radius: 15px;
  11 + padding: 1em;
  12 + width: 50%;
  13 + background-color: #ccc;
  14 + }
  15 + </style>
  16 + </head>
  17 +
  18 + <body>
  19 + <h1>Rounded Corners</h1>
  20 + <div class="rounded">
  21 + Look, Ma -- no sharp corners!
  22 + </div>
  23 + </body>
  24 +</html>
30 selectors.html
... ... @@ -0,0 +1,30 @@
  1 +<!doctype html>
  2 +<html>
  3 + <head>
  4 + <title>selectors</title>
  5 + <meta name="viewport" content="width=device-width">
  6 +
  7 + <style type="text/css" media="screen">
  8 + p{
  9 + background-color: red;
  10 + color: blue;
  11 + }
  12 + .tasty{
  13 + background-color: yellow;
  14 + }
  15 + #dinner{
  16 + background-color: green;
  17 + }
  18 + </style>
  19 + </head>
  20 +
  21 + <body>
  22 + <h1>Selectors</h1>
  23 + <p>Bacon ipsum dolor sit amet fatback shoulder bresaola rump tri-tip biltong sirloin, ham hock bacon strip steak andouille filet mignon ribeye ground round. Pastrami salami tongue venison t-bone sirloin short ribs, ham swine. Bacon jowl tongue leberkas shankle. Short loin sirloin tongue frankfurter, turkey flank pancetta ground round prosciutto kielbasa.</p>
  24 +
  25 + <p class="tasty">Ham tenderloin flank ribeye turducken hamburger. Bresaola meatloaf ham, sirloin flank swine shankle sausage capicola short loin boudin kielbasa. Tongue beef fatback biltong hamburger kielbasa. Jowl spare ribs turkey biltong, meatball venison prosciutto ground round frankfurter pork loin fatback pancetta swine.</p>
  26 +
  27 + <p id="dinner">Venison pork loin ribeye, prosciutto corned beef salami hamburger swine kielbasa ham pork belly. Beef ribs frankfurter ham, meatball boudin bacon ham hock swine venison fatback biltong pork belly. Filet mignon ham hock andouille cow bresaola. Bacon drumstick ball tip kielbasa jowl shank, pork chop spare ribs meatloaf shoulder andouille short ribs beef ribs.</p>
  28 +
  29 + </body>
  30 +</html>
48 selectors2.html
... ... @@ -0,0 +1,48 @@
  1 +<!doctype html>
  2 +<html>
  3 + <head>
  4 + <title>More Selectors</title>
  5 + <meta name="viewport" content="width=device-width">
  6 +
  7 + <style type="text/css" media="screen">
  8 + input{
  9 + width: 15em;
  10 + }
  11 +
  12 + input[type='submit']{
  13 + width: 7em;
  14 + color: red;
  15 + }
  16 +
  17 + label{
  18 + display:block;
  19 + font-style: italic;
  20 + font-weight: bold;
  21 + }
  22 +
  23 + label:after{
  24 + content: ":";
  25 + }
  26 +
  27 + </style>
  28 + </head>
  29 + <body>
  30 + <h1>More Selectors</h1>
  31 + <form action="#">
  32 + <label for="name">Name</label>
  33 + <input type="text" name="name" value="" id="name"/>
  34 + <br/>
  35 +
  36 + <label for="email">Email</label>
  37 + <input type="email" name="email" value="" id="email"/>
  38 + <br/>
  39 +
  40 + <label for="web">Web</label>
  41 + <input type="url" name="web" value="" id="web"/>
  42 + <br/>
  43 +
  44 + <input type="submit" value="Continue &rarr;">
  45 + </form>
  46 +
  47 + </body>
  48 +</html>
64 transition.html
... ... @@ -0,0 +1,64 @@
  1 +<!doctype html>
  2 +<html>
  3 + <head>
  4 + <title>Transition</title>
  5 + <meta name="viewport" content="width=device-width">
  6 +
  7 + <style type="text/css" media="screen">
  8 +
  9 + ul{
  10 + list-style-type: none;
  11 + }
  12 +
  13 + li{
  14 + float: left;
  15 + padding: 1em;
  16 + }
  17 +
  18 + .box{
  19 + background-color: green;
  20 + width: 100px;
  21 + height: 150px;
  22 + -webkit-transition: all 1s ease;
  23 + -moz-transition: all 1s ease;
  24 + -o-transition: all 1s ease;
  25 + -ms-transition: all 1s ease;
  26 + transition: all 1s ease;
  27 + }
  28 +
  29 + .box:hover{
  30 + background-color: blue;
  31 + width: 150px;
  32 + height: 200px;
  33 + }
  34 +
  35 + /* NOTE: used for screen capture in the presentation */
  36 + .fakeHover{
  37 + background-color: blue;
  38 + width: 150px;
  39 + height: 200px;
  40 + }
  41 +
  42 + .fakeTransition{
  43 + background-color: blue;
  44 + width: 125px;
  45 + height: 175px;
  46 + }
  47 +
  48 + </style>
  49 + </head>
  50 +
  51 + <body>
  52 + <h1>Transition</h1>
  53 +
  54 + <div id="covers">
  55 + <ul>
  56 + <li><div class="box"></div></li>
  57 + <li><div class="box"></div></li>
  58 + <li><div class="box"></div></li>
  59 + <li><div class="box"></div></li>
  60 + </ul>
  61 + </div>
  62 + </body>
  63 +
  64 +</html>
60 transitionWithImages.html
... ... @@ -0,0 +1,60 @@
  1 +<!doctype html>
  2 +<html>
  3 + <head>
  4 + <title>Transition with Images</title>
  5 + <meta name="viewport" content="width=device-width">
  6 +
  7 + <style type="text/css" media="screen">
  8 +
  9 + ul{
  10 + list-style-type: none;
  11 + }
  12 +
  13 + li{
  14 + float: left;
  15 + padding: 1em;
  16 + }
  17 +
  18 + .box img{
  19 + width: 100px;
  20 + height: 150px;
  21 + -webkit-transition: all 1s ease;
  22 + -moz-transition: all 1s ease;
  23 + -o-transition: all 1s ease;
  24 + -ms-transition: all 1s ease;
  25 + transition: all 1s ease;
  26 + }
  27 +
  28 + .box img:hover{
  29 + width: 150px;
  30 + height: 200px;
  31 + }
  32 +
  33 + /* NOTE: used for screen capture in the presentation */
  34 + .fakeHover{
  35 + width: 150px;
  36 + height: 200px;
  37 + }
  38 +
  39 + </style>
  40 + </head>
  41 +
  42 + <body>
  43 + <h1>Transition with Images</h1>
  44 +
  45 + <!--
  46 + NOTE: Be sure to request the bigger ":hover"-sized images
  47 + Downsampling images is essentially free (bandwidth concerns notwithstanding).
  48 + Upsampling images causes the dreaded "jaggies"...
  49 + -->
  50 + <div id="covers">
  51 + <ul>
  52 + <li><div class="box"><img src="http://lorempixel.com/150/200/food/1" /></div></li>
  53 + <li><div class="box"><img src="http://lorempixel.com/150/200/food/2" /></div></li>
  54 + <li><div class="box"><img src="http://lorempixel.com/150/200/food/3" /></div></li>
  55 + <li><div class="box"><img src="http://lorempixel.com/150/200/food/4" /></div></li>
  56 + </ul>
  57 + </div>
  58 + </body>
  59 +
  60 +</html>

0 comments on commit abdb0cc

Please sign in to comment.
Something went wrong with that request. Please try again.