Skip to content
Browse files

pushing files to public website

  • Loading branch information...
1 parent 46f9204 commit abdb0cc29b0855c9a1c3af99da5d67275731ffbb @scottdavis99 committed Feb 21, 2012
Showing with 685 additions and 87 deletions.
  1. +1 −0 .gitignore
  2. +1 −0 README
  3. +121 −0 _styles.css
  4. BIN css3.pdf
  5. +114 −0 form.html
  6. +54 −0 hover.html
  7. BIN ico_validation.png
  8. +32 −87 index.html
  9. +80 −0 layout.html
  10. +56 −0 orientation.html
  11. +24 −0 round.html
  12. +30 −0 selectors.html
  13. +48 −0 selectors2.html
  14. +64 −0 transition.html
  15. +60 −0 transitionWithImages.html
View
1 .gitignore
@@ -0,0 +1 @@
+.DS_Store
View
1 README
@@ -0,0 +1 @@
+Source code and slides for my "CSS3 for Programmers" presentation.
View
121 _styles.css
@@ -0,0 +1,121 @@
+/******************
+ Source: http://www.alistapart.com/articles/forward-thinking-form-validation/
+*******************/
+
+/* Just some base styles not needed for example to function */
+*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
+
+body, form, ul, li, p, h2, h3, h4, h5
+{
+ margin: 0;
+ padding: 0;
+}
+body { background-color: #606061; color: #ffffff; }
+img { border: none; }
+p
+{
+ font-size: 1em;
+ margin: 0 0 1em 0;
+}
+h2 { font-size: 14px; margin: 0 0 12px; }
+
+/* Form styles */
+#signup
+{
+ margin: 20px auto;
+ width: 610px;
+}
+#signup fieldset
+{
+ margin: 0 0 20px;
+ padding: 20px;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}
+ #signup ol
+ {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ }
+ #signup li
+ {
+ margin: 0 0 12px;
+ position: relative;
+ }
+ #signup label
+ {
+ width: 150px;
+ display: inline-block;
+ vertical-align: top;
+ }
+ #signup fieldset input,
+ #signup fieldset textarea,
+ #signup fieldset select
+ {
+ background: #fff url(ico_validation.png) 379px 24px no-repeat;
+ display: inline-block;
+ width: 371px;
+ border: 1px solid #fff;
+ padding: 3px 26px 3px 3px;
+
+ -moz-transition: background-color 1s ease;
+ -webkit-transition: background-color 1s ease;
+ -o-transition: background-color 1s ease;
+ transition: background-color 1s ease;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+ }
+ #signup fieldset select { width: 401px; padding: 3px; }
+ #signup fieldset #postcode { padding: 3px; width: 400px; }
+
+
+#signup input::-webkit-input-placeholder,
+#signup input:-moz-placeholder {
+ color: #A6A6A6;
+}
+
+#signup input:focus:required:invalid
+{
+ background-color: pink;
+ background-position: 379px 3px;
+ outline: none;
+}
+#signup input[type=text]:focus:not([pattern]):required:invalid
+{
+ background-color: #fff;
+ background-position: 379px -29px;
+}
+
+#signup .validation01
+{
+ background: red;
+ color: #fff;
+ display: none;
+ font-size: 12px;
+ padding: 3px;
+ position: absolute;
+ right: -160px;
+ text-align: center;
+ top: 0;
+ width: 150px;
+
+ -moz-box-shadow: 0px 0px 4px #ffffff;
+ -webkit-box-shadow: 0px 0px 4px #ffffff;
+ box-shadow: 0px 0px 4px #ffffff;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}
+#signup input:focus + .validation01 { display: block; }
+#signup input:focus:required:valid + .validation01 { background: green; }
+#signup input:focus:required:valid + .validation01 .invalid { display: none; }
+#signup input:focus:required:invalid + .validation01 .valid { display: none; }
+
+#signup input:required:valid
+{
+ background-color: #fff;
+ background-position: 379px -61px;
+}
View
BIN css3.pdf
Binary file not shown.
View
114 form.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<!--
+ Source: http://www.alistapart.com/articles/forward-thinking-form-validation/
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="viewport" content="width=device-width">
+
+ <link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />
+
+ <title>Validate those forms with CSS3 Basic UI module pseudo-classes and HTML5 Form attributes</title>
+
+</head>
+<body>
+
+ <form id="signup">
+ <h1>Sign up now!</h1>
+
+ <h2>Fields marked (*) are required</h2>
+
+ <fieldset>
+ <legend>Your details</legend>
+
+ <ol>
+ <li>
+ <label for="msg">Name *</label>
+ <input type="text" id="msg" name="msg" placeholder="Full name" required />
+ </li>
+ <li>
+ <label for="email">Email *</label>
+ <input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" title="Please enter a valid email" required />
+ <p class="validation01">
+ <span class="invalid">Please enter a valid email address e.g. ryan@example.com</span>
+ <span class="valid">Thank you for entering a valid email</span>
+ </p>
+ </li>
+ <li>
+ <label for="tel">Phone *</label>
+ <input type="tel" id="tel" name="tel" pattern="\d{10}" placeholder="Please enter a ten digit phone number" required />
+ <p class="validation01">
+ <span class="invalid">No spaces or brackets e.g. 0390001234</span>
+ <span class="valid">That's what we wanted!</span>
+ </p>
+ </li>
+ </ol>
+ </fieldset>
+
+ <fieldset>
+ <legend>Delivery address</legend>
+ <ol>
+ <li>
+ <label for="address">Address *</label>
+ <input id="address" name="address" type="text" required />
+ </li>
+ <li>
+ <label for="suburb">Suburb *</label>
+ <input id="suburb" name="suburb" type="text" required />
+ </li>
+ <li>
+ <label for="postcode">Post code *</label>
+ <input id="postcode" name="postcode" type="number" min="1001" max="8000" maxlength="4" required />
+ <p class="validation01">
+ <span class="invalid">Your postcode is out of range between 1001 - 8000</span>
+ <span class="valid">Thank you your postcode is in the correct range</span>
+ </p>
+ </li>
+ <li>
+ <label for="state">State</label>
+ <select name="state" id="state">
+ <option>ACT</option>
+ <option>NSW</option>
+ <option>NT</option>
+ <option>QLD</option>
+ <option>SA</option>
+ <option>TAS</option>
+ <option selected>VIC</option>
+ <option>WA</option>
+ </select>
+ </li>
+ </ol>
+ </fieldset>
+
+ <fieldset>
+ <legend>Membership information</legend>
+ <ol>
+ <li>
+ <label for="username">Username *</label>
+ <input id="username" name="username" type="text" pattern="\w{4,}" placeholder="Atleast 4 alphanumeric characters" required />
+ </li>
+ <li>
+ <label for="password">Password *</label>
+ <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 />
+ <p class="validation01">
+ <span class="invalid">Minimum 8 characters, one number, one uppercase letter and one lowercase letter</span>
+ <span class="valid">Your password meets our requirements, thank you.</span>
+ </p>
+ </li>
+ <li>
+ <label for="url">Website *</label>
+ <input type="url" name="url" id="url" required />
+ </li>
+ </ol>
+ </fieldset>
+
+ <input type="submit" value="Sign up" />
+
+ </form>
+
+</body>
+</html>
View
54 hover.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Hover</title>
+ <meta name="viewport" content="width=device-width">
+
+ <style type="text/css" media="screen">
+
+ ul{
+ list-style-type: none;
+ }
+
+ li{
+ float: left;
+ padding: 1em;
+ }
+
+ .box{
+ background-color: green;
+ width: 100px;
+ height: 150px;
+ }
+
+ .box:hover{
+ background-color: blue;
+ width: 150px;
+ height: 200px;
+ }
+
+ /* NOTE: used for screen capture in the presentation */
+ .fakeHover{
+ background-color: blue;
+ width: 150px;
+ height: 200px;
+ }
+
+ </style>
+ </head>
+
+ <body>
+ <h1>Hover</h1>
+
+ <div id="covers">
+ <ul>
+ <li><div class="box"></div></li>
+ <li><div class="box"></div></li>
+ <li><div class="box"></div></li>
+ <li><div class="box"></div></li>
+ </ul>
+ </div>
+
+ </body>
+
+</html>
View
BIN ico_validation.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
119 index.html
@@ -1,88 +1,33 @@
-<!DOCTYPE html>
+<!doctype html>
<html>
-<head>
- <meta charset='utf-8'>
-
- <title>scottdavis99/css3ForProgrammers @ GitHub</title>
-
- <style type="text/css">
- body {
- margin-top: 1.0em;
- background-color: #ccc;
- font-family: Helvetica, Arial, FreeSans, san-serif;
- color: #000000;
- }
- #container {
- margin: 0 auto;
- width: 700px;
- }
- h1 { font-size: 3.8em; color: #333333; margin-bottom: 3px; }
- h1 .small { font-size: 0.4em; }
- h1 a { text-decoration: none }
- h2 { font-size: 1.5em; color: #333333; }
- h3 { text-align: center; color: #333333; }
- a { color: #333333; }
- .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
- .download { float: right; }
- pre { background: #000; color: #fff; padding: 15px;}
- hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
- .footer { text-align:center; padding-top:30px; font-style: italic; }
- </style>
-</head>
-
-<body>
- <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>
-
- <div id="container">
-
- <div class="download">
- <a href="https://github.com/scottdavis99/css3ForProgrammers/zipball/master">
- <img border="0" width="90" src="https://github.com/images/modules/download/zip.png"></a>
- <a href="https://github.com/scottdavis99/css3ForProgrammers/tarball/master">
- <img border="0" width="90" src="https://github.com/images/modules/download/tar.png"></a>
- </div>
-
- <h1><a href="https://github.com/scottdavis99/css3ForProgrammers">css3ForProgrammers</a>
- <span class="small">by <a href="https://github.com/scottdavis99">scottdavis99</a></span></h1>
-
- <div class="description">
- Source code and slides for my "CSS3 for Programmers" presentation
- </div>
-
-
-
-
-
-
-
-
-
-
- <h2>Authors</h2>
- <p>Scott Davis (scott@thirstyhead.com)
-<br/> </p>
-
-
-
- <h2>Contact</h2>
- <p>Scott Davis (scott@thirstyhead.com)
-<br/> </p>
-
-
- <h2>Download</h2>
- <p>
- You can download this project in either
- <a href="https://github.com/scottdavis99/css3ForProgrammers/zipball/master">zip</a> or
- <a href="https://github.com/scottdavis99/css3ForProgrammers/tarball/master">tar formats.
- </p>
- <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
- by running:
- <pre>$ git clone git://github.com/scottdavis99/css3ForProgrammers</pre>
- </p>
-
- <div class="footer">
- get the source code on GitHub : <a href="https://github.com/scottdavis99/css3ForProgrammers">scottdavis99/css3ForProgrammers</a>
- </div>
-
- </div>
-
+ <head>
+ <title>CSS3</title>
+ <meta name="viewport" content="width=device-width">
+ </head>
+
+
+ <body>
+ <h1>CSS3 for Programmers</h1>
+ <h2>Look and Feel</h2>
+ <ul>
+ <li><a href="selectors.html">Selectors</a></li>
+ <li><a href="selectors2.html">More Selectors</a></li>
+ <li><a href="form.html">Form Validation</a></li>
+ <li><a href="round.html">Rounded Corners</a></li>
+ </ul>
+
+ <h2>Layout</h2>
+ <ul>
+ <li><a href="layout.html">Floating DIVs</a></li>
+ </ul>
+
+ <h2>Behavior</h2>
+ <ul>
+ <li><a href="hover.html">Hover</a></li>
+ <li><a href="transition.html">Transition</a></li>
+ <li><a href="transitionWithImages.html">Transition with Images</a></li>
+ <li><a href="orientation.html">Orientation</a></li>
+ </ul>
+
+ </body>
+</html>
View
80 layout.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Layout</title>
+ <meta name="viewport" content="width=device-width">
+
+ <style type="text/css" media="screen">
+ .header{
+ background-color: yellow;
+ width: 100%;
+ clear: both;
+ }
+
+ .wrapper{
+ width: 100%;
+ overflow: auto;
+ background-color: orange;
+ }
+
+ .sidebar{
+ background-color: orange;
+ width: 25%;
+ float: left;
+ }
+
+ .main{
+ background-color: blue;
+ width: 75%;
+ float: left;
+ }
+
+ .footer{
+ background-color: green;
+ width: 100%;
+ clear: both;
+ }
+
+ @media screen and (max-width:320px){
+ .sidebar{
+ width: 40%;
+ }
+
+ .main{
+ width: 60%;
+ }
+ }
+ </style>
+ </head>
+
+ <body>
+ <div class="header">
+ ACME Web Design
+ </div>
+
+ <div class="wrapper">
+ <div class="sidebar">
+ <ul>
+ <li>Home</li>
+ <li>Services</li>
+ <li>Customers</li>
+ <li>About Us</li>
+ </ul>
+ </div>
+
+ <div class="main">
+ <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>
+
+ <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>
+
+ <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>
+
+ </div> <!-- end .body -->
+ </div> <!-- end .wrapper -->
+
+ <div class="footer">
+ &copy; 2012, ACME Web Design, Inc.
+ </div>
+ </body>
+
+</html>
View
56 orientation.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Transition</title>
+ <meta name="viewport" content="width=device-width">
+
+ <style type="text/css" media="screen">
+
+ ul{
+ list-style-type: none;
+ }
+
+ li{
+ padding: 1em;
+ }
+
+ @media screen and (orientation:landscape){
+ li{
+ float: left;
+ }
+ }
+
+ .box{
+ background-color: green;
+ width: 100px;
+ height: 150px;
+ -webkit-transition: all 1s ease;
+ -moz-transition: all 1s ease;
+ -o-transition: all 1s ease;
+ -ms-transition: all 1s ease;
+ transition: all 1s ease;
+ }
+
+ .box:hover{
+ background-color: blue;
+ width: 150px;
+ height: 200px;
+ }
+
+ </style>
+ </head>
+
+ <body>
+ <h1>Transition</h1>
+
+ <div id="covers">
+ <ul>
+ <li><div class="box"></div></li>
+ <li><div class="box"></div></li>
+ <li><div class="box"></div></li>
+ <li><div class="box"></div></li>
+ </ul>
+ </div>
+ </body>
+
+</html>
View
24 round.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Rounded Corners</title>
+ <meta name="viewport" content="width=device-width">
+
+ <style type="text/css" media="screen">
+ .rounded {
+ border: 2px solid black;
+ border-radius: 15px;
+ padding: 1em;
+ width: 50%;
+ background-color: #ccc;
+ }
+ </style>
+ </head>
+
+ <body>
+ <h1>Rounded Corners</h1>
+ <div class="rounded">
+ Look, Ma -- no sharp corners!
+ </div>
+ </body>
+</html>
View
30 selectors.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+ <head>
+ <title>selectors</title>
+ <meta name="viewport" content="width=device-width">
+
+ <style type="text/css" media="screen">
+ p{
+ background-color: red;
+ color: blue;
+ }
+ .tasty{
+ background-color: yellow;
+ }
+ #dinner{
+ background-color: green;
+ }
+ </style>
+ </head>
+
+ <body>
+ <h1>Selectors</h1>
+ <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>
+
+ <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>
+
+ <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>
+
+ </body>
+</html>
View
48 selectors2.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+ <head>
+ <title>More Selectors</title>
+ <meta name="viewport" content="width=device-width">
+
+ <style type="text/css" media="screen">
+ input{
+ width: 15em;
+ }
+
+ input[type='submit']{
+ width: 7em;
+ color: red;
+ }
+
+ label{
+ display:block;
+ font-style: italic;
+ font-weight: bold;
+ }
+
+ label:after{
+ content: ":";
+ }
+
+ </style>
+ </head>
+ <body>
+ <h1>More Selectors</h1>
+ <form action="#">
+ <label for="name">Name</label>
+ <input type="text" name="name" value="" id="name"/>
+ <br/>
+
+ <label for="email">Email</label>
+ <input type="email" name="email" value="" id="email"/>
+ <br/>
+
+ <label for="web">Web</label>
+ <input type="url" name="web" value="" id="web"/>
+ <br/>
+
+ <input type="submit" value="Continue &rarr;">
+ </form>
+
+ </body>
+</html>
View
64 transition.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Transition</title>
+ <meta name="viewport" content="width=device-width">
+
+ <style type="text/css" media="screen">
+
+ ul{
+ list-style-type: none;
+ }
+
+ li{
+ float: left;
+ padding: 1em;
+ }
+
+ .box{
+ background-color: green;
+ width: 100px;
+ height: 150px;
+ -webkit-transition: all 1s ease;
+ -moz-transition: all 1s ease;
+ -o-transition: all 1s ease;
+ -ms-transition: all 1s ease;
+ transition: all 1s ease;
+ }
+
+ .box:hover{
+ background-color: blue;
+ width: 150px;
+ height: 200px;
+ }
+
+ /* NOTE: used for screen capture in the presentation */
+ .fakeHover{
+ background-color: blue;
+ width: 150px;
+ height: 200px;
+ }
+
+ .fakeTransition{
+ background-color: blue;
+ width: 125px;
+ height: 175px;
+ }
+
+ </style>
+ </head>
+
+ <body>
+ <h1>Transition</h1>
+
+ <div id="covers">
+ <ul>
+ <li><div class="box"></div></li>
+ <li><div class="box"></div></li>
+ <li><div class="box"></div></li>
+ <li><div class="box"></div></li>
+ </ul>
+ </div>
+ </body>
+
+</html>
View
60 transitionWithImages.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Transition with Images</title>
+ <meta name="viewport" content="width=device-width">
+
+ <style type="text/css" media="screen">
+
+ ul{
+ list-style-type: none;
+ }
+
+ li{
+ float: left;
+ padding: 1em;
+ }
+
+ .box img{
+ width: 100px;
+ height: 150px;
+ -webkit-transition: all 1s ease;
+ -moz-transition: all 1s ease;
+ -o-transition: all 1s ease;
+ -ms-transition: all 1s ease;
+ transition: all 1s ease;
+ }
+
+ .box img:hover{
+ width: 150px;
+ height: 200px;
+ }
+
+ /* NOTE: used for screen capture in the presentation */
+ .fakeHover{
+ width: 150px;
+ height: 200px;
+ }
+
+ </style>
+ </head>
+
+ <body>
+ <h1>Transition with Images</h1>
+
+ <!--
+ NOTE: Be sure to request the bigger ":hover"-sized images
+ Downsampling images is essentially free (bandwidth concerns notwithstanding).
+ Upsampling images causes the dreaded "jaggies"...
+ -->
+ <div id="covers">
+ <ul>
+ <li><div class="box"><img src="http://lorempixel.com/150/200/food/1" /></div></li>
+ <li><div class="box"><img src="http://lorempixel.com/150/200/food/2" /></div></li>
+ <li><div class="box"><img src="http://lorempixel.com/150/200/food/3" /></div></li>
+ <li><div class="box"><img src="http://lorempixel.com/150/200/food/4" /></div></li>
+ </ul>
+ </div>
+ </body>
+
+</html>

0 comments on commit abdb0cc

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