Skip to content

Instantly share code, notes, and snippets.

@boyofgreen
boyofgreen / HTML5 nav.css
Created April 4, 2012 01:49
HTML5 Hacks 2.3
.nav {
color: red
}
.nav {
display: block;
background-color: blue
}
@boyofgreen
boyofgreen / auto complete.html
Created April 4, 2012 01:59
HTML5 Hacks 2.4
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
Add your telephone: <input type="tel" name="phone" autocomplete=”on” /><br />
</form>
<form name="myForm">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" oninput= “updateMessage(this)”/>
Enter Your Email: <input type="email" name="myEmail" formnovalidate />
<input type="submit" />
</form>
@boyofgreen
boyofgreen / date input.html
Created April 4, 2012 02:47
HTML5 Hacks 2.6
<form name=”dateSelection”>
Enter Departing Date: <input type="date" min="2012-03-12" name="departingDate" />
<input type="submit" />
</form>
@boyofgreen
boyofgreen / new input.css
Created April 4, 2012 03:01
HTML5 Hacks 2.7
input[type=number]{border: 2px solid green}
input:invalid {border: 2px solid red}
<table width="100%" border="1">
<tr>
<th>Title</th>
<th>Price</th>
</tr>
<tr id="323">
<td>Google Hacks</td>
<td>FREE</td>
</tr>
@boyofgreen
boyofgreen / font import.css
Created April 9, 2012 02:13
HTML5 Hacks 3.1
@font-face {
font-family: 'Radley';
font-style: normal;
font-weight: normal;
src: local('Radley'), url('../fonts/Radley.woff') format('woff');
}
@font-face {
font-family: 'Lovers Quarrel';
font-style: normal;
font-weight: 400;
@boyofgreen
boyofgreen / collection.css
Created April 11, 2012 03:56
HTML5 Hacks 3.2
@font-face {
font-family: 'Russo One';
font-style: normal;
font-weight: 400;
src: local('Russo One'), local('RussoOne-Regular'), url('http://themes.googleusercontent.com/static/fonts/russoone/v1/RO6e96EC9m6OLO0tr7J3zz8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
@font-face {
font-family: 'Trocchi';
font-style: normal;
font-weight: 400;
@boyofgreen
boyofgreen / awesome css.css
Created April 14, 2012 17:17
HTML5 Hacks 3.3
p.test{
width: 45px;
padding:5px;
border: 1px solid black;
text-transform: uppercase;
}
@boyofgreen
boyofgreen / prefix.css
Created April 16, 2012 02:34
HTML5 Hacks 3.0.5
.testClass {
width: 100%;
color: #fff;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* all webkit browsers */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}