-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
46f9204
commit abdb0cc
Showing
15 changed files
with
685 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
.DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
Source code and slides for my "CSS3 for Programmers" presentation. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.