HTML

Target IE

Header + Java link

iFrame

Image & links

Special Characters

Development Page Refresh

CSS

border-radius

@media

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Basic horizontal ‹ul› menu

Box shadow

iPhone

Animation

-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;

/**********************Animation setup**********************/
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
	
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
	
-webkit-animation-iteration-count: 3;
-moz-animation-iteration-count: 3;
-o-animation-iteration-count: 3;
animation-iteration-count: 3;
	
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;

-webkit-animation-name: ...;
-moz-animation-name: ...;
-o-animation-name: ...;
animation-name: ...;

@keyframes ... {
   0% {  }
   100% {  }
}
@-webkit-keyframes ... {
   0% {  }
   100% {  }
}
@-moz-keyframes ... {
   0% {  }
   100% {  }
}
@-ms-keyframes ... {
   0% {  }
   100% {  }
}
@-o-keyframes ... {
   0% {  }
   100% {  }
}

Filters

Style reset

/* CSS 1,2 & 3 and HTML5 reset stylesheet – April 21, 2012 http://demosthenes.info/blog/300/CSS3-HTML5-Stylesheet-Reset */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* resets sizing mode for all elements */
img { border: 0; }
/* removes borders for images (this should not be applied with a wildcard selector, as doing so makes form elements disappear) */
html, body { min-height: 100%; font-size: 62.5%; }
/* sets the body height of the browser, so backgrounds and div heights work correctly. Also sets em and rem units to exactly 10px, making sizing easier */
body, ul, ol, dl { margin: 0; }
/* Sets margin to 0 for lists and the body tag so that all content starts from the same position across all browsers */
textarea { resize: vertical; }
/* changes textarea resizing from "both" (UA default) to vertical only */
/*	HTML5 CSS */
article, aside, audio, footer, header, nav, section, video { display: block }
/* For older browsers, such as Firefox 3.6, that understand HTML5 but render the elements as display: inline. Leaves elements like date, figure and HTML5 form inputs alone */
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0px; }
/* removes the inner border effect from focused buttons when using form elements in Firefox */
input[type="search"]{-webkit-appearance:textfield;}
input[type="submit"] { -webkit-appearance:none; }
/* removes the OS X appearance from HTML 5 search inputs and submit buttons when viewed in Safari or Mobile Safari */
/* OPTIONAL - USEFUL LAYOUT CSS */
.right { float: right; margin-left: 2em; clear: right; }
.left { float: left; margin-right: 2em; clear: left; }
/* class shortcuts to floating any content left or right, e.g. <img src="x.jpg" class=right … />. Remember that you can use multiple classes so long as you put spaces between the class names: <img src="x.jpg" class="right other class" … /> */
table { border-collapse: collapse; }
th { background: #000; color: #fff; }
td { padding: 1em; border: 1px solid black; }
/* cleans up presentation of tables; reverses color of table header cells */

PHP

Calling PHP within a PHP file

Auto copyright update

Tools

Smart quote converter

Simple tool to change quote marks between smart and straight quotes. This script can convert over 170,000 quote marks in under 10 seconds, something a basic text application would grind over for a very long time!

OCR/PDF cleanup

This tool fixes many common issues that come with OCR processed text and PDF files, such as removing hard returns after every line, 1’s and r’s are changed back to I’s, page and chapter numbers are stripped out (best guess only!), smart quotes fixed, en-dashes fixed, all double spaces removed and much more. I recommend ‘newocr’ (link below) to OCR your documents before using this tool. Not 100% accurate!

I recommend this FREE online OCR tool as a starting point:http://www.newocr.com

Character code converter

This tool automatically replaces characters such as quote marks with their correct HTML code. It also cleans up formatting, removes pre-existing HTML tags and wraps everything in <p> tags. For best results use plain text.

List Maker + Ccc

This tool converts special characters and then builds an unordered list (change <ul> to <ol> for ordered list).

HTML & CSS snippet finder

Type in a word from the ‘Examples’ list below. I’ve only add the snippets that I find useful day-to-day, it’s by far a comprehensive list.

England vs America

This tool Americanizes or Anglicises text. The script contains a list of 1737 words taken from the link below. Once processed converted spellings will be highlighted with a star*. Non-preferred US alternative spellings will highlighted with a double star**

Source:http://www.tysto.com/uk-us-spelling-list.html

Word/Character count

Simply type or paste text below and the magic will happen. Inspired by http://jsfiddle.net/deepumohanp/jZeKu/

Words: 0
Total Characters (including trails): 0
Characters (excluding trails): 0
Characters (excluding all spaces): 0

LINKS

jQuery -prefix-free CSS-TRICKS CodePen Google Fonts HTML-Ipsum Bacon Ipsum Useful CSS3 LESS Mixins w3schools GreenSock

Optimising

PageSpeed Insights netrenderer Compass W3C CODEKIT Replace smart quotes Sitemapping Textmechanic

Resources

Responsive Templates HTML 5 Templates HTML5 ★ BOILERPLATE CSS3 Generator Digging Into WordPress Forms: Simple CSS for HTML forms. webbytedd Practical Typography codrops Design Principles FTW Unsplash FREE images