├── LICENSE
├── README
├── css
    ├── page-bg.jpg
    ├── prefixfree.js
    ├── print.css
    ├── religion.css
    ├── screen.css
    └── slide.js
├── files
    ├── 00_basic.html
    ├── 01_attr.html
    ├── 02_uiselectors.html
    ├── 03_root.html
    ├── 04_firstlastonly.html
    ├── 05_nth.html
    ├── 06_not.html
    ├── 07_target.html
    ├── 08_dropcap.html
    ├── 100_simpletransforms.html
    ├── 101_transform3dhtml.html
    ├── 101_transformorigin.html
    ├── 102_backface.html
    ├── 11_specificity.html
    ├── 12_flexbox.html
    ├── 31_generatetext.html
    ├── 32_generatetext.html
    ├── 32b_generatetext.html
    ├── 33_bubbles.html
    ├── 34_bubbles.html
    ├── 35_tooltip.html
    ├── 40_supports.html
    ├── 72_boxshadow.html
    ├── 72a_boxshadow.html
    ├── 80_bgposition.html
    ├── 81_bgposition.html
    ├── 81b_bgposition.html
    ├── 82_borderradius.html
    ├── 83_longcat.html
    ├── 91_basic.html
    ├── 92_basic.html
    └── 92_different_angles.html
├── icons
    ├── browser_logos-64.png
    ├── new.gif
    └── oreilly.gif
├── img
    ├── fish.png
    ├── googlefonts.gif
    ├── plankton.png
    └── shark.gif
├── index.html
├── part_01_selectors.html
├── part_02_specificity.html
├── part_03_generated.html
├── part_04_media.html
├── part_06_colors.html
├── part_07_fonts.html
├── part_08_backgrounds.html
├── part_09_gradients.html
├── part_10_transforms.html
├── part_11_animations.html
├── part_12_features.html
└── slides.js


/README:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estelle/CSS-Workshop/3185af4b4513a87188cf682b403d70ee665ecf8b/README


--------------------------------------------------------------------------------
/css/page-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estelle/CSS-Workshop/3185af4b4513a87188cf682b403d70ee665ecf8b/css/page-bg.jpg


--------------------------------------------------------------------------------
/css/prefixfree.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * StyleFix 1.0.1
  3 |  * @author Lea Verou
  4 |  * MIT license
  5 |  */
  6 | 
  7 | (function(){
  8 | 
  9 | if(!window.addEventListener) {
 10 | 	return;
 11 | }
 12 | 
 13 | var self = window.StyleFix = {
 14 | 	link: function(link) {
 15 | 		try {
 16 | 			// Ignore stylesheets with data-noprefix attribute as well as alternate stylesheets
 17 | 			if(link.rel !== 'stylesheet' || !link.sheet.cssRules || link.hasAttribute('data-noprefix')) {
 18 | 				return;
 19 | 			}
 20 | 		}
 21 | 		catch(e) {
 22 | 			return;
 23 | 		}
 24 | 
 25 | 		var url = link.href || link.getAttribute('data-href'),
 26 | 		    base = url.replace(/[^\/]+$/, ''),
 27 | 		    parent = link.parentNode,
 28 | 		    xhr = new XMLHttpRequest();
 29 | 
 30 | 		xhr.open('GET', url);
 31 | 
 32 | 		xhr.onreadystatechange = function() {
 33 | 			if(xhr.readyState === 4) {
 34 | 				var css = xhr.responseText;
 35 | 
 36 | 				if(css && link.parentNode) {
 37 | 					css = self.fix(css, true, link);
 38 | 
 39 | 					// Convert relative URLs to absolute, if needed
 40 | 					if(base) {
 41 | 						css = css.replace(/url\((?:'|")?(.+?)(?:'|")?\)/gi, function($0, url) {
 42 | 							if(!/^([a-z]{3,10}:|\/|#)/i.test(url)) { // If url not absolute & not a hash
 43 | 								// May contain sequences like /../ and /./ but those DO work
 44 | 								return 'url("' + base + url + '")';
 45 | 							}
 46 | 
 47 | 							return $0;						
 48 | 						});
 49 | 
 50 | 						// behavior URLs shoudn’t be converted (Issue #19)
 51 | 						css = css.replace(RegExp('\\b(behavior:\\s*?url\\(\'?"?)' + base, 'gi'), '$1');
 52 | 					}
 53 | 
 54 | 					var style = document.createElement('style');
 55 | 					style.textContent = css;
 56 | 					style.media = link.media;
 57 | 					style.disabled = link.disabled;
 58 | 					style.setAttribute('data-href', link.getAttribute('href'));
 59 | 
 60 | 					parent.insertBefore(style, link);
 61 | 					parent.removeChild(link);
 62 | 				}
 63 | 			}
 64 | 		};
 65 | 
 66 | 		xhr.send(null);
 67 | 
 68 | 		link.setAttribute('data-inprogress', '');
 69 | 	},
 70 | 
 71 | 	styleElement: function(style) {
 72 | 		var disabled = style.disabled;
 73 | 
 74 | 		style.textContent = self.fix(style.textContent, true, style);
 75 | 
 76 | 		style.disabled = disabled;
 77 | 	},
 78 | 
 79 | 	styleAttribute: function(element) {
 80 | 		var css = element.getAttribute('style');
 81 | 
 82 | 		css = self.fix(css, false, element);
 83 | 
 84 | 		element.setAttribute('style', css);
 85 | 	},
 86 | 
 87 | 	process: function() {
 88 | 		// Linked stylesheets
 89 | 		$('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);
 90 | 
 91 | 		// Inline stylesheets
 92 | 		$('style').forEach(StyleFix.styleElement);
 93 | 
 94 | 		// Inline styles
 95 | 		$('[style]').forEach(StyleFix.styleAttribute);
 96 | 	},
 97 | 
 98 | 	register: function(fixer, index) {
 99 | 		(self.fixers = self.fixers || [])
100 | 			.splice(index === undefined? self.fixers.length : index, 0, fixer);
101 | 	},
102 | 
103 | 	fix: function(css, raw) {
104 | 		for(var i=0; i<self.fixers.length; i++) {
105 | 			css = self.fixers[i](css, raw) || css;
106 | 		}
107 | 
108 | 		return css;
109 | 	},
110 | 
111 | 	camelCase: function(str) {
112 | 		return str.replace(/-([a-z])/g, function($0, $1) { return $1.toUpperCase(); }).replace('-','');
113 | 	},
114 | 
115 | 	deCamelCase: function(str) {
116 | 		return str.replace(/[A-Z]/g, function($0) { return '-' + $0.toLowerCase() });
117 | 	}
118 | };
119 | 
120 | /**************************************
121 |  * Process styles
122 |  **************************************/
123 | (function(){
124 | 	setTimeout(function(){
125 | 		$('link[rel="stylesheet"]').forEach(StyleFix.link);
126 | 	}, 10);
127 | 
128 | 	document.addEventListener('DOMContentLoaded', StyleFix.process, false);
129 | })();
130 | 
131 | function $(expr, con) {
132 | 	return [].slice.call((con || document).querySelectorAll(expr));
133 | }
134 | 
135 | })();
136 | 
137 | /**
138 |  * PrefixFree 1.0.4
139 |  * @author Lea Verou
140 |  * MIT license
141 |  */
142 | (function(root, undefined){
143 | 
144 | if(!window.StyleFix || !window.getComputedStyle) {
145 | 	return;
146 | }
147 | 
148 | var self = window.PrefixFree = {
149 | 	prefixCSS: function(css, raw) {
150 | 		var prefix = self.prefix;
151 | 
152 | 		function fix(what, before, after, replacement) {
153 | 			what = self[what];
154 | 
155 | 			if(what.length) {
156 | 				var regex = RegExp(before + '(' + what.join('|') + ')' + after, 'gi');
157 | 
158 | 				css = css.replace(regex, replacement);
159 | 			}
160 | 		}
161 | 
162 | 		fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(');
163 | 		fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3');
164 | 		fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:');
165 | 
166 | 		// Prefix properties *inside* values (issue #8)
167 | 		if (self.properties.length) {
168 | 			var regex = RegExp('\\b(' + self.properties.join('|') + ')(?!:)', 'gi');
169 | 
170 | 			fix('valueProperties', '\\b', ':(.+?);', function($0) {
171 | 				return $0.replace(regex, prefix + "$1")
172 | 			});
173 | 		}
174 | 
175 | 		if(raw) {
176 | 			fix('selectors', '', '\\b', self.prefixSelector);
177 | 			fix('atrules', '@', '\\b', '@' + prefix + '$1');
178 | 		}
179 | 
180 | 		// Fix double prefixing
181 | 		css = css.replace(RegExp('-' + prefix, 'g'), '-');
182 | 
183 | 		return css;
184 | 	},
185 | 
186 | 	// Warning: prefixXXX functions prefix no matter what, even if the XXX is supported prefix-less
187 | 	prefixSelector: function(selector) {
188 | 		return selector.replace(/^:{1,2}/, function($0) { return $0 + self.prefix })
189 | 	},
190 | 
191 | 	prefixProperty: function(property, camelCase) {
192 | 		var prefixed = self.prefix + property;
193 | 
194 | 		return camelCase? StyleFix.camelCase(prefixed) : prefixed;
195 | 	}
196 | };
197 | 
198 | /**************************************
199 |  * Properties
200 |  **************************************/
201 | (function() {
202 | 	var prefixes = {},
203 | 		properties = [],
204 | 		shorthands = {},
205 | 		style = getComputedStyle(document.documentElement, null),
206 | 		dummy = document.createElement('div').style;
207 | 
208 | 	// Why are we doing this instead of iterating over properties in a .style object? Cause Webkit won't iterate over those.
209 | 	var iterate = function(property) {
210 | 		if(property.charAt(0) === '-') {
211 | 			properties.push(property);
212 | 
213 | 			var parts = property.split('-'),
214 | 				prefix = parts[1];
215 | 
216 | 			// Count prefix uses
217 | 			prefixes[prefix] = ++prefixes[prefix] || 1;
218 | 
219 | 			// This helps determining shorthands
220 | 			while(parts.length > 3) {
221 | 				parts.pop();
222 | 
223 | 				var shorthand = parts.join('-');
224 | 
225 | 				if(supported(shorthand) && properties.indexOf(shorthand) === -1) {
226 | 					properties.push(shorthand);
227 | 				}
228 | 			}
229 | 		}
230 | 	},
231 | 	supported = function(property) {
232 | 		return StyleFix.camelCase(property) in dummy;
233 | 	}
234 | 
235 | 	// Some browsers have numerical indices for the properties, some don't
236 | 	if(style.length > 0) {
237 | 		for(var i=0; i<style.length; i++) {
238 | 			iterate(style[i])
239 | 		}
240 | 	}
241 | 	else {
242 | 		for(var property in style) {
243 | 			iterate(StyleFix.deCamelCase(property));
244 | 		}
245 | 	}
246 | 
247 | 	// Find most frequently used prefix
248 | 	var highest = {uses:0};
249 | 	for(var prefix in prefixes) {
250 | 		var uses = prefixes[prefix];
251 | 
252 | 		if(highest.uses < uses) {
253 | 			highest = {prefix: prefix, uses: uses};
254 | 		}
255 | 	}
256 | 
257 | 	self.prefix = '-' + highest.prefix + '-';
258 | 	self.Prefix = StyleFix.camelCase(self.prefix);
259 | 
260 | 	self.properties = [];
261 | 
262 | 	// Get properties ONLY supported with a prefix
263 | 	for(var i=0; i<properties.length; i++) {
264 | 		var property = properties[i];
265 | 
266 | 		if(property.indexOf(self.prefix) === 0) { // we might have multiple prefixes, like Opera
267 | 			var unprefixed = property.slice(self.prefix.length);
268 | 
269 | 			if(!supported(unprefixed)) {
270 | 				self.properties.push(unprefixed);
271 | 			}
272 | 		}
273 | 	}
274 | 
275 | 	// IE fix
276 | 	if(self.Prefix == 'Ms' 
277 | 	  && !('transform' in dummy) 
278 | 	  && !('MsTransform' in dummy) 
279 | 	  && ('msTransform' in dummy)) {
280 | 		self.properties.push('transform', 'transform-origin');	
281 | 	}
282 | 
283 | 	self.properties.sort();
284 | })();
285 | 
286 | /**************************************
287 |  * Values
288 |  **************************************/
289 | (function() {
290 | // Values that might need prefixing
291 | var functions = {
292 | 	'linear-gradient': {
293 | 		property: 'backgroundImage',
294 | 		params: 'red, teal'
295 | 	},
296 | 	'calc': {
297 | 		property: 'width',
298 | 		params: '1px + 5%'
299 | 	},
300 | 	'element': {
301 | 		property: 'backgroundImage',
302 | 		params: '#foo'
303 | 	}
304 | };
305 | 
306 | 
307 | functions['repeating-linear-gradient'] =
308 | functions['repeating-radial-gradient'] =
309 | functions['radial-gradient'] =
310 | functions['linear-gradient'];
311 | 
312 | var keywords = {
313 | 	'initial': 'color',
314 | 	'zoom-in': 'cursor',
315 | 	'zoom-out': 'cursor',
316 | 	'box': 'display',
317 | 	'flexbox': 'display',
318 | 	'inline-flexbox': 'display'
319 | };
320 | 
321 | self.functions = [];
322 | self.keywords = [];
323 | 
324 | var style = document.createElement('div').style;
325 | 
326 | function supported(value, property) {
327 | 	style[property] = '';
328 | 	style[property] = value;
329 | 
330 | 	return !!style[property];
331 | }
332 | 
333 | for (var func in functions) {
334 | 	var test = functions[func],
335 | 		property = test.property,
336 | 		value = func + '(' + test.params + ')';
337 | 
338 | 	if (!supported(value, property)
339 | 	  && supported(self.prefix + value, property)) {
340 | 		// It's supported, but with a prefix
341 | 		self.functions.push(func);
342 | 	}
343 | }
344 | 
345 | for (var keyword in keywords) {
346 | 	var property = keywords[keyword];
347 | 
348 | 	if (!supported(keyword, property)
349 | 	  && supported(self.prefix + keyword, property)) {
350 | 		// It's supported, but with a prefix
351 | 		self.keywords.push(keyword);
352 | 	}
353 | }
354 | 
355 | })();
356 | 
357 | /**************************************
358 |  * Selectors and @-rules
359 |  **************************************/
360 | (function() {
361 | 
362 | var 
363 | selectors = {
364 | 	':read-only': null,
365 | 	':read-write': null,
366 | 	':any-link': null,
367 | 	'::selection': null
368 | },
369 | 
370 | atrules = {
371 | 	'keyframes': 'name',
372 | 	'viewport': null,
373 | 	'document': 'regexp(".")'
374 | };
375 | 
376 | self.selectors = [];
377 | self.atrules = [];
378 | 
379 | var style = root.appendChild(document.createElement('style'));
380 | 
381 | function supported(selector) {
382 | 	style.textContent = selector + '{}';  // Safari 4 has issues with style.innerHTML
383 | 
384 | 	return !!style.sheet.cssRules.length;
385 | }
386 | 
387 | for(var selector in selectors) {
388 | 	var test = selector + (selectors[selector]? '(' + selectors[selector] + ')' : '');
389 | 
390 | 	if(!supported(test) && supported(self.prefixSelector(test))) {
391 | 		self.selectors.push(selector);
392 | 	}
393 | }
394 | 
395 | for(var atrule in atrules) {
396 | 	var test = atrule + ' ' + (atrules[atrule] || '');
397 | 
398 | 	if(!supported('@' + test) && supported('@' + self.prefix + test)) {
399 | 		self.atrules.push(atrule);
400 | 	}
401 | }
402 | 
403 | root.removeChild(style);
404 | 
405 | })();
406 | 
407 | // Properties that accept properties as their value
408 | self.valueProperties = [
409 | 	'transition',
410 | 	'transition-property'
411 | ]
412 | 
413 | // Add class for current prefix
414 | root.className += ' ' + self.prefix;
415 | 
416 | StyleFix.register(self.prefixCSS);
417 | 
418 | 
419 | })(document.documentElement);


--------------------------------------------------------------------------------
/css/print.css:
--------------------------------------------------------------------------------
 1 | @charset "UTF-8";
 2 | /* CSS Document */
 3 | 
 4 | .slide {
 5 |   page-break-inside: avoid;
 6 |   page-break-after: always;
 7 |   visibility: visible !important;
 8 |   font-size: 20pt;
 9 |   font-family: Arial, sans-serif;
10 | }
11 | 
12 | @page {
13 |   size: landscape;
14 | }
15 | 
16 | body {
17 |   font-size: 12pt;
18 |   background: white;
19 | }
20 | 
21 | header h1 {
22 |   border-top: 2pt solid gray;
23 |   border-bottom: 1px dotted silver;
24 | }
25 | 
26 | #presentation-counter, #info, #topinfo, .counter {
27 |   display: none
28 | }


--------------------------------------------------------------------------------
/css/religion.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | /* CSS Document */
  3 | 
  4 | .tiltdavid {
  5 |     background-color: #394C5F;
  6 |     background-image:   
  7 |                 -webkit-linear-gradient(135deg,
  8 |                     #16293B 0%,
  9 |                     #16293B 25%, 
 10 |                     rgba(255, 255, 255, 0.0) 25%,
 11 |                     rgba(255, 255, 255, 0.0) 75%,
 12 |                     #16293B 75%,
 13 |                     #16293B 100%
 14 |                       );
 15 |     background-image:   
 16 |                 -moz-linear-gradient(135deg,
 17 |                     #16293B 0%,
 18 |                     #16293B 25%, 
 19 |                     rgba(255, 255, 255, 0.0) 25%,
 20 |                     rgba(255, 255, 255, 0.0) 75%,
 21 |                     #16293B 75%,
 22 |                     #16293B 100%
 23 |                       );
 24 |     background-image:   
 25 |                 -ms-linear-gradient(135deg,
 26 |                     #16293B 0%,
 27 |                     #16293B 25%, 
 28 |                     rgba(255, 255, 255, 0.0) 25%,
 29 |                     rgba(255, 255, 255, 0.0) 75%,
 30 |                     #16293B 75%,
 31 |                     #16293B 100%
 32 |                       );
 33 |     background-image:   
 34 |                 -o-linear-gradient(135deg,
 35 |                     #16293B 0%,
 36 |                     #16293B 25%, 
 37 |                     rgba(255, 255, 255, 0.0) 25%,
 38 |                     rgba(255, 255, 255, 0.0) 75%,
 39 |                     #16293B 75%,
 40 |                     #16293B 100%
 41 |                       );
 42 |     background-image:   
 43 |                 linear-gradient(135deg,
 44 |                     #16293B 0%,
 45 |                     #16293B 25%, 
 46 |                     rgba(255, 255, 255, 0.0) 25%,
 47 |                     rgba(255, 255, 255, 0.0) 75%,
 48 |                     #16293B 75%,
 49 |                     #16293B 100%
 50 |                       );
 51 |     background-size: 50px 50px;
 52 | }
 53 | 
 54 | .greenbean {
 55 | 	background-color: #4C5F39;
 56 |     background-image:   
 57 |             -webkit-linear-gradient(-135deg,
 58 |                     #293B16 0%,
 59 |                     #293B16 20%, 
 60 |                     transparent 20%,
 61 |                     transparent 48%,
 62 |                     #76AA41 49%,
 63 |                     #76AA41 51%,
 64 |                     transparent 52%,
 65 |                     transparent 80%,
 66 |                     #293B16 80%,
 67 |                     #293B16 100%
 68 |                       ),
 69 |                 -webkit-linear-gradient(135deg,
 70 |                     #293B16 0%,
 71 |                     #293B16 20%, 
 72 |                     transparent 20%,
 73 |                     transparent 48%,
 74 |                     #76AA41 49%,
 75 |                     #76AA41 51%,
 76 |                     transparent 52%,
 77 |                     transparent 80%,
 78 |                     #293B16 80%,
 79 |                     #293B16 100%
 80 |                       );
 81 | 	background-image:   
 82 |             -moz-linear-gradient(-135deg,
 83 |                     #293B16 0%,
 84 |                     #293B16 20%, 
 85 |                     transparent 20%,
 86 |                     transparent 48%,
 87 |                     #76AA41 49%,
 88 |                     #76AA41 51%,
 89 |                     transparent 52%,
 90 |                     transparent 80%,
 91 |                     #293B16 80%,
 92 |                     #293B16 100%
 93 |                       ),
 94 |                 -moz-linear-gradient(135deg,
 95 |                     #293B16 0%,
 96 |                     #293B16 20%, 
 97 |                     transparent 20%,
 98 |                     transparent 48%,
 99 |                     #76AA41 49%,
100 |                     #76AA41 51%,
101 |                     transparent 52%,
102 |                     transparent 80%,
103 |                     #293B16 80%,
104 |                     #293B16 100%
105 |                       );
106 | 	background-image:   
107 |             -ms-linear-gradient(-135deg,
108 |                     #293B16 0%,
109 |                     #293B16 20%, 
110 |                     transparent 20%,
111 |                     transparent 48%,
112 |                     #76AA41 49%,
113 |                     #76AA41 51%,
114 |                     transparent 52%,
115 |                     transparent 80%,
116 |                     #293B16 80%,
117 |                     #293B16 100%
118 |                       ),
119 |                 -ms-linear-gradient(135deg,
120 |                     #293B16 0%,
121 |                     #293B16 20%, 
122 |                     transparent 20%,
123 |                     transparent 48%,
124 |                     #76AA41 49%,
125 |                     #76AA41 51%,
126 |                     transparent 52%,
127 |                     transparent 80%,
128 |                     #293B16 80%,
129 |                     #293B16 100%
130 |                       );
131 | 		background-image:   
132 |             -o-linear-gradient(-135deg,
133 |                     #293B16 0%,
134 |                     #293B16 20%, 
135 |                     transparent 20%,
136 |                     transparent 48%,
137 |                     #76AA41 49%,
138 |                     #76AA41 51%,
139 |                     transparent 52%,
140 |                     transparent 80%,
141 |                     #293B16 80%,
142 |                     #293B16 100%
143 |                       ),
144 |                 -o-linear-gradient(135deg,
145 |                     #293B16 0%,
146 |                     #293B16 20%, 
147 |                     transparent 20%,
148 |                     transparent 48%,
149 |                     #76AA41 49%,
150 |                     #76AA41 51%,
151 |                     transparent 52%,
152 |                     transparent 80%,
153 |                     #293B16 80%,
154 |                     #293B16 100%
155 |                       );
156 | 		background-image:   
157 |             linear-gradient(-135deg,
158 |                     #293B16 0%,
159 |                     #293B16 20%, 
160 |                     transparent 20%,
161 |                     transparent 48%,
162 |                     #76AA41 49%,
163 |                     #76AA41 51%,
164 |                     transparent 52%,
165 |                     transparent 80%,
166 |                     #293B16 80%,
167 |                     #293B16 100%
168 |                       ),
169 |              linear-gradient(135deg,
170 |                     #293B16 0%,
171 |                     #293B16 20%, 
172 |                     transparent 20%,
173 |                     transparent 48%,
174 |                     #76AA41 49%,
175 |                     #76AA41 51%,
176 |                     transparent 52%,
177 |                     transparent 80%,
178 |                     #293B16 80%,
179 |                     #293B16 100%
180 |                       );
181 |     background-size: 25px 25px;
182 |     background-position: 0 0, 100px 0px;
183 | }
184 | 
185 | .blurry {
186 |     background-color: #7F596C;
187 | 
188 |     background-image:         
189 |          -webkit-radial-gradient(
190 |                     #3B1629 20%, 
191 |                     transparent 20%
192 |                       ),
193 |          -webkit-radial-gradient(
194 |                     #3B1629 20%, 
195 |                     transparent 20%
196 |                       ),
197 |         -webkit-linear-gradient(135deg,
198 |                     transparent 48%,
199 |                     #9A3166 49%,
200 |                     #9A3166 51%,
201 |                     transparent 52%
202 |                       ),
203 |         -webkit-linear-gradient(-135deg,
204 |                     transparent 48%,
205 |                     #9A3166 49%,
206 |                     #9A3166 51%,
207 |                     transparent 52%
208 |                       );
209 |     background-image:         
210 |          -moz-radial-gradient(
211 |                     #3B1629 20%, 
212 |                     transparent 20%,
213 |                     transparent 100%
214 |                       ),
215 |          -moz-radial-gradient(
216 |                     #3B1629 20%, 
217 |                     transparent 20%,
218 |                     transparent 100%
219 |                       ),
220 |         -moz-linear-gradient(135deg,
221 |                     transparent 48%,
222 |                     #9A3166 49%,
223 |                     #9A3166 51%,
224 |                     transparent 52%,
225 |                     transparent 100%
226 |                       ),
227 |         -moz-linear-gradient(-135deg,
228 |                     transparent 48%,
229 |                     #9A3166 49%,
230 |                     #9A3166 51%,
231 |                     transparent 52%,
232 |                     transparent 100%
233 |                       );
234 |     background-image:         
235 |          -ms-radial-gradient(
236 |                     #3B1629 20%, 
237 |                     transparent 20%
238 |                       ),
239 |          -ms-radial-gradient(
240 |                     #3B1629 20%, 
241 |                     transparent 20%
242 |                       ),
243 |         -ms-linear-gradient(135deg,
244 |                     transparent 48%,
245 |                     #9A3166 49%,
246 |                     #9A3166 51%,
247 |                     transparent 52%
248 |                       ),
249 |         -ms-linear-gradient(-135deg,
250 |                     transparent 48%,
251 |                     #9A3166 49%,
252 |                     #9A3166 51%,
253 |                     transparent 52%
254 |                       );
255 |     background-image:         
256 |          -o-radial-gradient(
257 |                     #3B1629 20%, 
258 |                     transparent 20%
259 |                       ),
260 |          -o-radial-gradient(
261 |                     #3B1629 20%, 
262 |                     transparent 20%
263 |                       ),
264 |         -o-linear-gradient(135deg,
265 |                     transparent 48%,
266 |                     #9A3166 49%,
267 |                     #9A3166 51%,
268 |                     transparent 52%
269 |                       ),
270 |         -o-linear-gradient(-135deg,
271 |                     transparent 48%,
272 |                     #9A3166 49%,
273 |                     #9A3166 51%,
274 |                     transparent 52%
275 |                       );
276 |     background-image:         
277 |          radial-gradient(
278 |                     #3B1629 20%, 
279 |                     transparent 20%
280 |                       ),
281 |          radial-gradient(
282 |                     #3B1629 20%, 
283 |                     transparent 20%
284 |                       ),
285 |         linear-gradient(135deg,
286 |                     transparent 48%,
287 |                     #9A3166 49%,
288 |                     #9A3166 51%,
289 |                     transparent 52%
290 |                       ),
291 |         linear-gradient(-135deg,
292 |                     transparent 48%,
293 |                     #9A3166 49%,
294 |                     #9A3166 51%,
295 |                     transparent 52%
296 |                       );
297 |     background-size: 20px 20px;
298 |     background-position: 0 0, 10px 10px, 0 0, 0 0;
299 | }
300 | 
301 | .classic {
302 | 	 background-color: #48006c;
303 |         background-image: 
304 |          -webkit-linear-gradient(-135deg,  
305 |             transparent 20%, 
306 |             rgba(0,0,0,0.1) 20%,
307 |             rgba(0,0,0,0.1) 30%,
308 |             transparent 30%,
309 |             transparent 70%, 
310 |             rgba(0,0,0,0.1) 70%,
311 |             rgba(0,0,0,0.1) 80%,
312 |             transparent 80%),
313 |         -webkit-linear-gradient(135deg,  
314 |             transparent 20%,
315 |             rgba(0,0,0,0.4) 20%, 
316 |             rgba(0,0,0,0.4) 30%, 
317 |             rgba(0,0,0,0.1) 30%,
318 |             rgba(0,0,0,0.1) 40%,
319 |             transparent 40%, 
320 |             transparent 70%, 
321 |             rgba(0,0,0,0.4) 70%, 
322 |             rgba(0,0,0,0.4) 80%, 
323 |             rgba(0,0,0,0.1) 80%,
324 |             rgba(0,0,0,0.1) 90%,
325 |             transparent 90%)
326 |         ; 
327 |         background-image: 
328 |          -moz-linear-gradient(-135deg,  
329 |             transparent 20%, 
330 |             rgba(0,0,0,0.1) 20%,
331 |             rgba(0,0,0,0.1) 30%,
332 |             transparent 30%,
333 |             transparent 70%, 
334 |             rgba(0,0,0,0.1) 70%,
335 |             rgba(0,0,0,0.1) 80%,
336 |             transparent 80%,
337 |             transparent 100%),
338 |         -moz-linear-gradient(135deg,  
339 |             transparent 20%,
340 |             rgba(0,0,0,0.4) 20%, 
341 |             rgba(0,0,0,0.4) 30%, 
342 |             rgba(0,0,0,0.1) 30%,
343 |             rgba(0,0,0,0.1) 40%,
344 |             transparent 40%, 
345 |             transparent 70%, 
346 |             rgba(0,0,0,0.4) 70%, 
347 |             rgba(0,0,0,0.4) 80%, 
348 |             rgba(0,0,0,0.1) 80%,
349 |             rgba(0,0,0,0.1) 90%,
350 |             transparent 90%,
351 |             transparent 100%)
352 |         ; 
353 |         background-image: 
354 |          -ms-linear-gradient(-135deg,  
355 |             transparent 20%, 
356 |             rgba(0,0,0,0.1) 20%,
357 |             rgba(0,0,0,0.1) 30%,
358 |             transparent 30%,
359 |             transparent 70%, 
360 |             rgba(0,0,0,0.1) 70%,
361 |             rgba(0,0,0,0.1) 80%,
362 |             transparent 80%),
363 |         -ms-linear-gradient(135deg,  
364 |             transparent 20%,
365 |             rgba(0,0,0,0.4) 20%, 
366 |             rgba(0,0,0,0.4) 30%, 
367 |             rgba(0,0,0,0.1) 30%,
368 |             rgba(0,0,0,0.1) 40%,
369 |             transparent 40%, 
370 |             transparent 70%, 
371 |             rgba(0,0,0,0.4) 70%, 
372 |             rgba(0,0,0,0.4) 80%, 
373 |             rgba(0,0,0,0.1) 80%,
374 |             rgba(0,0,0,0.1) 90%,
375 |             transparent 90%)
376 |         ; 
377 |         background-image: 
378 |          -o-linear-gradient(-135deg,  
379 |             transparent 20%, 
380 |             rgba(0,0,0,0.1) 20%,
381 |             rgba(0,0,0,0.1) 30%,
382 |             transparent 30%,
383 |             transparent 70%, 
384 |             rgba(0,0,0,0.1) 70%,
385 |             rgba(0,0,0,0.1) 80%,
386 |             transparent 80%),
387 |         -o-linear-gradient(135deg,  
388 |             transparent 20%,
389 |             rgba(0,0,0,0.4) 20%, 
390 |             rgba(0,0,0,0.4) 30%, 
391 |             rgba(0,0,0,0.1) 30%,
392 |             rgba(0,0,0,0.1) 40%,
393 |             transparent 40%, 
394 |             transparent 70%, 
395 |             rgba(0,0,0,0.4) 70%, 
396 |             rgba(0,0,0,0.4) 80%, 
397 |             rgba(0,0,0,0.1) 80%,
398 |             rgba(0,0,0,0.1) 90%,
399 |             transparent 90%)
400 |         ; 
401 |         background-image: 
402 |          linear-gradient(-135deg,  
403 |             transparent 20%, 
404 |             rgba(0,0,0,0.1) 20%,
405 |             rgba(0,0,0,0.1) 30%,
406 |             transparent 30%,
407 |             transparent 70%, 
408 |             rgba(0,0,0,0.1) 70%,
409 |             rgba(0,0,0,0.1) 80%,
410 |             transparent 80%),
411 |         linear-gradient(135deg,  
412 |             transparent 20%,
413 |             rgba(0,0,0,0.4) 20%, 
414 |             rgba(0,0,0,0.4) 30%, 
415 |             rgba(0,0,0,0.1) 30%,
416 |             rgba(0,0,0,0.1) 40%,
417 |             transparent 40%, 
418 |             transparent 70%, 
419 |             rgba(0,0,0,0.4) 70%, 
420 |             rgba(0,0,0,0.4) 80%, 
421 |             rgba(0,0,0,0.1) 80%,
422 |             rgba(0,0,0,0.1) 90%,
423 |             transparent 90%)
424 |         ; 
425 |     background-size: 6px 6px;	
426 | }
427 | .inverse1 {background-image:
428 | 		-webkit-gradient(radial, 8 8,0, 8 8, 7,
429 | 			color-stop(0.7, rgba(0,0,0,0)),
430 | 			color-stop(0.8, #000000)),
431 | 		-webkit-gradient(radial, 8 8,0, 8 8, 7,
432 | 			color-stop(0.5, rgba(0,0,220,0)),
433 | 			color-stop(0.7, rgba(0,0,220, 0.4))),
434 | 		-webkit-gradient(radial, 64 64, 1000, 100 44, 40, 
435 | 			from(#FF0080), color-stop(.6,#ECB7FC), to(#f09));
436 | 
437 | 
438 | 		background-image: 
439 | 	  -webkit-radial-gradient(circle,
440 | 			rgba(0,0,0,0) 60%,
441 | 			#000000 61%),
442 | 		-webkit-radial-gradient(circle,
443 | 			rgba(0,0,220,0) 55%,
444 | 			rgba(0,0,220,0.4) 56%),
445 | 	  	-webkit-radial-gradient(circle,
446 | 			#FF0080 0%,
447 | 			#ECB7FC 60%,
448 | 			#f09 100%);
449 | 		background-image: 
450 | 	  -moz-radial-gradient(circle,
451 | 			rgba(0,0,0,0) 60%,
452 | 			#000000 61%),
453 | 		-moz-radial-gradient(circle,
454 | 			rgba(0,0,220,0) 55%,
455 | 			rgba(0,0,220,0.4) 56%),
456 | 	  	-moz-radial-gradient(circle,
457 | 			#FF0080 0%,
458 | 			#ECB7FC 60%,
459 | 			#f09 100%);
460 | 		background-image: 
461 | 	  -ms-radial-gradient(circle,
462 | 			rgba(0,0,0,0) 60%,
463 | 			#000000 61%),
464 | 		-ms-radial-gradient(circle,
465 | 			rgba(0,0,220,0) 55%,
466 | 			rgba(0,0,220,0.4) 56%),
467 | 	  	-ms-radial-gradient(circle,
468 | 			#FF0080 0%,
469 | 			#ECB7FC 60%,
470 | 			#f09 100%);
471 | 		background-image: 
472 | 	  -o-radial-gradient(circle,
473 | 			rgba(0,0,0,0) 60%,
474 | 			#000000 61%),
475 | 		-o-radial-gradient(circle,
476 | 			rgba(0,0,220,0) 55%,
477 | 			rgba(0,0,220,0.4) 56%),
478 | 	  	-o-radial-gradient(circle,
479 | 			#FF0080 0%,
480 | 			#ECB7FC 60%,
481 | 			#f09 100%);
482 | 		background-image: 
483 | 	  	radial-gradient(circle,
484 | 			rgba(0,0,0,0) 60%,
485 | 			#000000 61%),
486 | 		radial-gradient(circle,
487 | 			rgba(0,0,220,0) 55%,
488 | 			rgba(0,0,220,0.4) 56%),
489 | 	  	radial-gradient(circle,
490 | 			#FF0080 0%,
491 | 			#ECB7FC 60%,
492 | 			#f09 100%);
493 | 
494 | 		-webkit-background-size: 15px 15px, 15px 15px,100%, 100%; /* safari 4 */
495 | 		-moz-background-size: 15px 15px,15px 15px, 100%, 100%; /* FF 3.6 */
496 | 		background-size: 15px 15px, 15px 15px,160%, 160%;
497 | 		background-position: 0 0, 0 3px, 00;
498 | }
499 | .metal {
500 | 
501 |     background-image:
502 | 		-webkit-gradient(radial, 15 15, 0, 15 15, 14.6,
503 | 			color-stop(0.8, rgba(0, 0, 0, 0)),
504 | 			color-stop(0.85, rgba(0, 0, 0, 1)),
505 | 			color-stop(1.00, rgba(0, 0, 0, 1))
506 | 		),
507 | 
508 | 		-webkit-gradient(radial, 15 15, 0, 15 15, 14.6,
509 | 			color-stop(0.8, rgba(0, 0, 0, 0)),
510 | 			color-stop(0.85, rgba(0, 0, 0, 1)),
511 | 			color-stop(1.00, rgba(0, 0, 0, 1))
512 | 		);
513 |     background-image: 
514 | 		-webkit-radial-gradient(circle closest-side, 
515 | 			transparent 70%, 
516 | 			#000000 100%), 
517 | 		-webkit-radial-gradient(circle closest-side, 
518 | 			transparent 70%, 
519 | 			#000000 100%);
520 | 	   background-image: 
521 | 		-moz-radial-gradient(circle closest-side, 
522 | 			transparent 70%, 
523 | 			#000000 100%), 
524 | 		-moz-radial-gradient(circle closest-side, 
525 | 			transparent 70%, 
526 | 			#000000 100%);
527 | 	   background-image: 
528 | 		-ms-radial-gradient(circle closest-side, 
529 | 			transparent 70%, 
530 | 			#000000 100%), 
531 | 		-ms-radial-gradient(circle closest-side, 
532 | 			transparent 70%, 
533 | 			#000000 100%);
534 | 	   background-image: 
535 | 		-o-radial-gradient(circle closest-side, 
536 | 			transparent 70%, 
537 | 			#000000 100%), 
538 | 		-o-radial-gradient(circle closest-side, 
539 | 			transparent 70%, 
540 | 			#000000 100%);
541 | 	   background-image: 
542 | 		radial-gradient(circle closest-side, 
543 | 			transparent 70%, 
544 | 			#000000 100%), 
545 | 		radial-gradient(circle closest-side, 
546 | 			transparent 70%, 
547 | 			#000000 100%);
548 | 
549 |     background-color: #AAAAAA;
550 |     -webkit-background-size: 30px 30px, 30px 30px;
551 |     -moz-background-size: 30px 30px, 30px 30px;
552 |     background-size: 30px 30px, 30px 30px;
553 |     background-position: 0 0pt, 15px 15px;
554 | }
555 | .retro67, .circlestripes {
556 | 
557 |     background-image: 
558 | 		-webkit-radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%), 
559 | 		-webkit-radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%);
560 | 	background-image: 
561 | 		-moz-radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%), 
562 | 		-moz-radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%);
563 | 	background-image: 
564 | 		-ms-radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%), 
565 | 		-ms-radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%);
566 | 	background-image: 
567 | 		-o-radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%), 
568 | 		-o-radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%);
569 | 	background-image: 
570 | 		radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%), 
571 | 		radial-gradient(circle closest-side, transparent 96%, rgba(0, 0, 0, 0.3) 100%);
572 | }
573 | .circlestripes {
574 | 	background-image:
575 | 		-webkit-gradient(radial, 15 5, 0, 15 5, 5,
576 | 			color-stop(0.96, rgba(0, 0, 0, 0)),
577 | 			color-stop(0.96, rgba(0, 0, 0, 0.3)),
578 | 			color-stop(1.00, rgba(0, 0, 0, 0.3))
579 | 		),
580 | 
581 | 		-webkit-gradient(radial, 15 5, 0, 15 5, 5.5,
582 | 			color-stop(0.96, rgba(0, 0, 0, 0)),
583 | 			color-stop(0.96, rgba(0, 0, 0, 0.3)),
584 | 			color-stop(1.00, rgba(0, 0, 0, 0.3))
585 | 		);
586 |     background-position: 0 0pt, 15px 15px;
587 |     -webkit-background-size: 30px 10px, 30px 8px;
588 |     -moz-background-size: 30px 10px, 30px 8px;
589 |     background-size: 30px 10px, 30px 8px;
590 | }
591 | .retro67 {
592 | 	background-image:
593 | 		-webkit-gradient(radial, 15 7, 0, 15 7, 8.5,
594 | 			color-stop(0.96, rgba(0, 0, 0, 0)),
595 | 			color-stop(0.96, rgba(0, 0, 0, 0.3)),
596 | 			color-stop(1.00, rgba(0, 0, 0, 0.3))
597 | 		),
598 | 
599 | 		-webkit-gradient(radial, 15 15, 0, 15 15, 14.6,
600 | 			color-stop(0.96, rgba(0, 0, 0, 0)),
601 | 			color-stop(0.96, rgba(0, 0, 0, 0.3)),
602 | 			color-stop(1.00, rgba(0, 0, 0, 0.3))
603 | 		);
604 |     background-position: 15px 0pt, 15px 15px;
605 |     -webkit-background-size: 30px 15px, 30px 30px;
606 |     -moz-background-size: 30px 15px, 30px 30px;
607 |     background-size: 30px 15px, 30px 30px;
608 |     background-color: #993300;
609 | }	
610 | .bradybunch {	
611 | 	background-image: 
612 | 		-webkit-radial-gradient(circle closest-side, 
613 | 			transparent 0%, 
614 | 			transparent 75%,
615 | 			rgba(255, 255, 255, 0.3) 76%,
616 | 			rgba(255, 255, 255, 0.3) 85%,
617 | 			rgba(255, 255, 255, 0.9) 86%,
618 | 			rgba(255, 255, 255, 0.9) 94%,
619 | 			#FFFFFF 95%,
620 | 			#FFFFFF 103%,
621 | 			rgba(255, 255, 255, 0.5) 104%, 
622 | 			rgba(255, 255, 255, 0.5) 112%,
623 | 			rgba(0, 0, 0, 0.2) 113%,
624 | 			rgba(0, 0, 0, 0.2) 121%,
625 | 			#FFFFFF 122%,
626 | 			#FFFFFF 130%,
627 | 			rgba(255, 255, 255, 0.4) 131%,
628 | 			rgba(255, 255, 255, 0.4) 140%),
629 | 		-webkit-radial-gradient(circle closest-side, 
630 | 			transparent 0%, 
631 | 			transparent 75%,
632 | 			rgba(255, 255, 255, 0.3) 76%,
633 | 			rgba(255, 255, 255, 0.3) 85%,
634 | 			rgba(255, 255, 255, 0.9) 86%,
635 | 			rgba(255, 255, 255, 0.9) 94%,
636 | 			#FFFFFF 95%,
637 | 			#FFFFFF 103%,
638 | 			rgba(255, 255, 255, 0.5) 104%, 
639 | 			rgba(255, 255, 255, 0.5) 112%,
640 | 			rgba(0, 0, 0, 0.2) 113%,
641 | 			rgba(0, 0, 0, 0.2) 121%,
642 | 			#FFFFFF 122%,
643 | 			#FFFFFF 130%,
644 | 			rgba(255, 255, 255, 0.4) 131%,
645 | 			rgba(255, 255, 255, 0.4) 140%);	
646 | 	background-image: 
647 | 		-moz-radial-gradient(circle closest-side, 
648 | 			transparent 0%, 
649 | 			transparent 75%,
650 | 			rgba(255, 255, 255, 0.3) 76%,
651 | 			rgba(255, 255, 255, 0.3) 85%,
652 | 			rgba(255, 255, 255, 0.9) 86%,
653 | 			rgba(255, 255, 255, 0.9) 94%,
654 | 			#FFFFFF 95%,
655 | 			#FFFFFF 103%,
656 | 			rgba(255, 255, 255, 0.5) 104%, 
657 | 			rgba(255, 255, 255, 0.5) 112%,
658 | 			rgba(0, 0, 0, 0.2) 113%,
659 | 			rgba(0, 0, 0, 0.2) 121%,
660 | 			#FFFFFF 122%,
661 | 			#FFFFFF 130%,
662 | 			rgba(255, 255, 255, 0.4) 131%,
663 | 			rgba(255, 255, 255, 0.4) 140%),
664 | 		-moz-radial-gradient(circle closest-side, 
665 | 			transparent 0%, 
666 | 			transparent 75%,
667 | 			rgba(255, 255, 255, 0.3) 76%,
668 | 			rgba(255, 255, 255, 0.3) 85%,
669 | 			rgba(255, 255, 255, 0.9) 86%,
670 | 			rgba(255, 255, 255, 0.9) 94%,
671 | 			#FFFFFF 95%,
672 | 			#FFFFFF 103%,
673 | 			rgba(255, 255, 255, 0.5) 104%, 
674 | 			rgba(255, 255, 255, 0.5) 112%,
675 | 			rgba(0, 0, 0, 0.2) 113%,
676 | 			rgba(0, 0, 0, 0.2) 121%,
677 | 			#FFFFFF 122%,
678 | 			#FFFFFF 130%,
679 | 			rgba(255, 255, 255, 0.4) 131%,
680 | 			rgba(255, 255, 255, 0.4) 140%);	
681 | 	background-image: 
682 | 		-ms-radial-gradient(circle closest-side, 
683 | 			transparent 0%, 
684 | 			transparent 75%,
685 | 			rgba(255, 255, 255, 0.3) 76%,
686 | 			rgba(255, 255, 255, 0.3) 85%,
687 | 			rgba(255, 255, 255, 0.9) 86%,
688 | 			rgba(255, 255, 255, 0.9) 94%,
689 | 			#FFFFFF 95%,
690 | 			#FFFFFF 103%,
691 | 			rgba(255, 255, 255, 0.5) 104%, 
692 | 			rgba(255, 255, 255, 0.5) 112%,
693 | 			rgba(0, 0, 0, 0.2) 113%,
694 | 			rgba(0, 0, 0, 0.2) 121%,
695 | 			#FFFFFF 122%,
696 | 			#FFFFFF 130%,
697 | 			rgba(255, 255, 255, 0.4) 131%,
698 | 			rgba(255, 255, 255, 0.4) 140%),
699 | 		-ms-radial-gradient(circle closest-side, 
700 | 			transparent 0%, 
701 | 			transparent 75%,
702 | 			rgba(255, 255, 255, 0.3) 76%,
703 | 			rgba(255, 255, 255, 0.3) 85%,
704 | 			rgba(255, 255, 255, 0.9) 86%,
705 | 			rgba(255, 255, 255, 0.9) 94%,
706 | 			#FFFFFF 95%,
707 | 			#FFFFFF 103%,
708 | 			rgba(255, 255, 255, 0.5) 104%, 
709 | 			rgba(255, 255, 255, 0.5) 112%,
710 | 			rgba(0, 0, 0, 0.2) 113%,
711 | 			rgba(0, 0, 0, 0.2) 121%,
712 | 			#FFFFFF 122%,
713 | 			#FFFFFF 130%,
714 | 			rgba(255, 255, 255, 0.4) 131%,
715 | 			rgba(255, 255, 255, 0.4) 140%);	
716 | 	background-image: 
717 | 		-o-radial-gradient(circle closest-side, 
718 | 			transparent 0%, 
719 | 			transparent 75%,
720 | 			rgba(255, 255, 255, 0.3) 76%,
721 | 			rgba(255, 255, 255, 0.3) 85%,
722 | 			rgba(255, 255, 255, 0.9) 86%,
723 | 			rgba(255, 255, 255, 0.9) 94%,
724 | 			#FFFFFF 95%,
725 | 			#FFFFFF 103%,
726 | 			rgba(255, 255, 255, 0.5) 104%, 
727 | 			rgba(255, 255, 255, 0.5) 112%,
728 | 			rgba(0, 0, 0, 0.2) 113%,
729 | 			rgba(0, 0, 0, 0.2) 121%,
730 | 			#FFFFFF 122%,
731 | 			#FFFFFF 130%,
732 | 			rgba(255, 255, 255, 0.4) 131%,
733 | 			rgba(255, 255, 255, 0.4) 140%),
734 | 		-o-radial-gradient(circle closest-side, 
735 | 			transparent 0%, 
736 | 			transparent 75%,
737 | 			rgba(255, 255, 255, 0.3) 76%,
738 | 			rgba(255, 255, 255, 0.3) 85%,
739 | 			rgba(255, 255, 255, 0.9) 86%,
740 | 			rgba(255, 255, 255, 0.9) 94%,
741 | 			#FFFFFF 95%,
742 | 			#FFFFFF 103%,
743 | 			rgba(255, 255, 255, 0.5) 104%, 
744 | 			rgba(255, 255, 255, 0.5) 112%,
745 | 			rgba(0, 0, 0, 0.2) 113%,
746 | 			rgba(0, 0, 0, 0.2) 121%,
747 | 			#FFFFFF 122%,
748 | 			#FFFFFF 130%,
749 | 			rgba(255, 255, 255, 0.4) 131%,
750 | 			rgba(255, 255, 255, 0.4) 140%);	
751 | 	background-image: 
752 | 		radial-gradient(circle closest-side, 
753 | 			transparent 0%, 
754 | 			transparent 75%,
755 | 			rgba(255, 255, 255, 0.3) 76%,
756 | 			rgba(255, 255, 255, 0.3) 85%,
757 | 			rgba(255, 255, 255, 0.9) 86%,
758 | 			rgba(255, 255, 255, 0.9) 94%,
759 | 			#FFFFFF 95%,
760 | 			#FFFFFF 103%,
761 | 			rgba(255, 255, 255, 0.5) 104%, 
762 | 			rgba(255, 255, 255, 0.5) 112%,
763 | 			rgba(0, 0, 0, 0.2) 113%,
764 | 			rgba(0, 0, 0, 0.2) 121%,
765 | 			#FFFFFF 122%,
766 | 			#FFFFFF 130%,
767 | 			rgba(255, 255, 255, 0.4) 131%,
768 | 			rgba(255, 255, 255, 0.4) 140%),
769 | 		radial-gradient(circle closest-side, 
770 | 			transparent 0%, 
771 | 			transparent 75%,
772 | 			rgba(255, 255, 255, 0.3) 76%,
773 | 			rgba(255, 255, 255, 0.3) 85%,
774 | 			rgba(255, 255, 255, 0.9) 86%,
775 | 			rgba(255, 255, 255, 0.9) 94%,
776 | 			#FFFFFF 95%,
777 | 			#FFFFFF 103%,
778 | 			rgba(255, 255, 255, 0.5) 104%, 
779 | 			rgba(255, 255, 255, 0.5) 112%,
780 | 			rgba(0, 0, 0, 0.2) 113%,
781 | 			rgba(0, 0, 0, 0.2) 121%,
782 | 			#FFFFFF 122%,
783 | 			#FFFFFF 130%,
784 | 			rgba(255, 255, 255, 0.4) 131%,
785 | 			rgba(255, 255, 255, 0.4) 140%);
786 | 	-moz-background-size: 80px 80px;
787 | 	background-size: 80px 80px;
788 | 	background-color: #384F89;
789 | 	background-position: 0 0, 40px 40px;
790 | }


--------------------------------------------------------------------------------
/css/screen.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | /* CSS Document */
  3 | 
  4 | :root {font-size: 14px;}
  5 | div, li, a, p, pre {
  6 | 	background-repeat: no-repeat;
  7 | }
  8 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
  9 | body {
 10 |   font-family: Lato, sans-serif;
 11 |   padding: 0;
 12 |   margin: 0;
 13 |   width: 100%;
 14 |   height: 100%;
 15 |   position: absolute;
 16 |   left: 0px; top: 0px;
 17 |   background-image:url(page-bg.jpg);
 18 |   background-repeat:repeat;
 19 | }
 20 | 
 21 | #info {
 22 |   font-size: small;
 23 |   position: absolute;
 24 |   bottom: 0px;
 25 |   left: 40%;
 26 |   z-index: 500;
 27 | }
 28 | 
 29 | #topinfo {
 30 |   font-size: small;
 31 |   position: absolute;
 32 |   top: 5px;
 33 |   right: 5px;
 34 |   z-index: 500;
 35 | }
 36 | 
 37 | .key {
 38 |   color: black;
 39 |   display: inline-block;
 40 |   padding: 3px 3px 3px 3px;
 41 |   text-shadow: none;
 42 |   letter-spacing: 0;
 43 |   position: relative;
 44 |   background: white;
 45 | }
 46 | 
 47 | #presentation {
 48 |   position: absolute;
 49 |   height: 100%;
 50 |   width: 100%;
 51 |   left: 0px;
 52 |   top: 0px;
 53 |   display: block;
 54 |   overflow: hidden;
 55 | }
 56 | 
 57 | .slides {
 58 |   padding-top: 10px;
 59 |   padding-bottom: 10px;
 60 |   width: 100%;
 61 |   height: 100%;
 62 |   left: 0;
 63 |   top: 0;
 64 |   position: absolute;
 65 |   display: block;
 66 |   -webkit-transition: -webkit-transform 1s ease-in-out;
 67 |   -moz-transition: -moz-transform 1s ease-in-out;
 68 |   -o-transition: -o-transform 1s ease-in-out;
 69 |   transition: transform 1s ease-in-out;
 70 | 
 71 |   /* so it's visible in the iframe. */
 72 |   -webkit-transform: scale(0.8);
 73 |   -moz-transform: scale(0.8);
 74 |   -o-transform: scale(0.8);
 75 |   transform: scale(0.8);
 76 | }
 77 | 
 78 | .slide {
 79 |   position: absolute;
 80 |   overflow: hidden;
 81 |   width: 900px;
 82 |   height: 700px;
 83 |   left: 50%;
 84 |   top: 50%;
 85 |   margin-top: -350px;
 86 |   background-color: #eee;
 87 |   -webkit-transition: all 0.25s ease-in-out;
 88 |   -moz-transition: all 0.25s ease-in-out;
 89 |   -o-transition: all 0.25s ease-in-out;
 90 |   transition: all 0.25s ease-in-out;
 91 |   -webkit-transform: scale(1);
 92 |   -moz-transform: scale(1);
 93 |   -o-transform: scale(1);
 94 |   transform: scale(1);
 95 |   padding-left: 20px;
 96 |   padding-top: 10px;
 97 |   border: 10px solid #BDD9D5;
 98 | }
 99 | 
100 | .slide.intro {
101 |   text-align: center;
102 |   font-size: 2rem;
103 | }
104 | .intro header h1 {
105 |   font-size: 4.5rem;
106 | }
107 | .slide.intro hgroup {
108 |   margin-top: 200px;
109 | }
110 | 
111 | .content {
112 |   font-size: 1.4rem;
113 | }
114 | 
115 | .content input, button {
116 |   font-size: 140%;
117 | }
118 | 
119 | .content td {
120 |    border: 1px solid black;
121 | }
122 | 
123 | .invalid {
124 |   background-color: red;
125 | }
126 | 
127 | .slide.section,.slide.intro {
128 |   text-align: center;
129 | }
130 | 
131 | .slide.section,.slide.intro header {
132 |   font-size: 2rem;
133 | }
134 | 
135 | .slide li {
136 |   margin-bottom: 10px;
137 | }
138 | 
139 | .slide img {
140 |   max-height: 90%;
141 |   border: 1px solid white;
142 |   box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
143 |   -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
144 |   -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
145 |   text-align: center;
146 | }
147 | 
148 | .slide:nth-child(even) {
149 | }
150 | 
151 | .slide:nth-child(odd) {
152 | }
153 | 
154 | .slide p, .slide textarea {
155 |   font-size: 1.2rem;
156 | }
157 | 
158 | .slide.title > .counter,
159 | .slide.segue > .counter,
160 | .slide.mainTitle > .counter {
161 |   display: none;
162 | }
163 | 
164 | .force-render {
165 |   display: block;
166 |   visibility: hidden;
167 | }
168 | .slide,
169 | .slide.far-past {
170 |   display: block;
171 |   margin-left: -2400px;
172 | }
173 | 
174 | .slide.past {
175 |   visibility: visible;
176 |   display: block;
177 |   margin-left: -1400px;
178 | }
179 | 
180 | .slide.current {
181 |   visibility: visible;
182 |   display: block;
183 |   margin-left: -450px;
184 | }
185 | 
186 | .slide.future {
187 |   visibility: visible;
188 |   display: block;
189 |   margin-left: 500px;
190 | }
191 | 
192 | .slide.far-future {
193 |   display: block;
194 |   margin-left: 1500px;
195 | }
196 | 
197 | body.three-d div.slides {
198 |   -webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
199 |   -moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
200 |   -o-transform: translateX(50px) scale(0.8) rotateY(10deg);
201 |   transform: translateX(50px) scale(0.8) rotateY(10deg);
202 | }
203 | 
204 | /* ############################
205 | 
206 |     BROWSER SUPPORT & ICONS
207 | 
208 |    ############################ */
209 | 
210 | 
211 | 
212 | .icons li, .icons .browser {
213 | 			width: 68px; height: 14px; display: inline-block;
214 | 			background-image:url(../icons/browser_logos-64.png);
215 | 			border-radius: 32px;
216 | 			font-size: 0.8rem;
217 | 			padding-top: 60px;
218 | 			text-align:center;
219 | 			position: relative;
220 | 			background-repeat: no-repeat;
221 | 		}
222 | 		.icons .firefox {background-position:-80px 0}
223 | 		.icons .ie {background-position:-280px 0}
224 | 		.icons .safari {background-position:-210px 0}
225 | 		.icons .chrome {background-position:0 0 }
226 | 		.icons .opera {background-position:-140px 0}
227 | 		.icons .new:after {
228 | 			content: "";
229 | 			width: 40px;
230 | 			height: 28px;
231 | 			display:block;
232 | 			position:absolute;
233 | 			top: -8px;
234 | 			right:-10px;
235 | 			background-image:url(../icons/new.gif);
236 | 		}
237 | 		.icons .no {opacity: 0.25;}
238 | 		.icons .bad,
239 | 		.icons .iffy {opacity: 0.60;}
240 | 		.icons .bad {
241 | 			margin-right: 10px;
242 | 			margin-left: 10px;
243 | 		}
244 | 		.icons .bad:after {
245 | 			position:absolute;
246 | 			top: -10px;
247 | 			left:-15px;
248 | 			content: "";
249 | 			-webkit-box-sizing: padding-box;
250 | 			background:
251 | 				-webkit-linear-gradient(135deg,
252 | 					transparent 45%,
253 | 					red 45%,
254 | 					red 55%,
255 | 					transparent 55%);
256 | 			width: 68px;
257 | 			height: 68px;
258 | 			border-radius: 50%;
259 | 			border: 10px solid red;
260 | 			display:block;
261 | 		}
262 | 
263 | 		.icons .half:after {
264 | 			position:absolute;
265 | 			top: 0;
266 | 			right:0;
267 | 			content: "";
268 | 			background-color: #DCe7f3;
269 | 			width: 33px;
270 | 			border-radius: 0 0 50% 0;
271 | 			height: 65px;
272 | 			display:block;
273 | 		}
274 | 		.icons .half.new:after {
275 | 			background-repeat: no-repeat;
276 | 			background-color:transparent;
277 | 			background-image:url(../icons/new.gif),
278 | 			-webkit-linear-gradient(0deg, transparent 30%, #DCe7f3 30%) ;
279 | 			background-image:url(../icons/new.gif),
280 | 			-moz-linear-gradient(0deg, transparent 30%, #DCe7f3 30%) ;
281 | 			background-image:url(../icons/new.gif),
282 | 			-ms-linear-gradient(0deg, transparent 30%, #DCe7f3 30%) ;
283 | 			background-image:url(../icons/new.gif),
284 | 			-o-linear-gradient(0deg, transparent 30%, #DCe7f3 30%) ;
285 | 			background-image:url(../icons/new.gif),
286 | 			linear-gradient(0deg, transparent 30%, #DCe7f3 30%) ;
287 | 			width: 40px;
288 | 
289 | 		}
290 | 		.icons .txt {background-image: none; width: auto; font-size: 1.5rem;}
291 | 
292 | 
293 | /* Content */
294 | header {
295 |   font-weight: normal;
296 |   letter-spacing: -.05em;
297 |   text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
298 |   left: 30px;
299 |   top: 25px;
300 |   font-size: 1.4rem;
301 | }
302 | 
303 | h1 {
304 |   font-size: 1.4rem;
305 |   margin-bottom: 0;
306 |   color: #C7573A;
307 |   text-align:center;
308 | }
309 | 
310 | h2 {
311 |   font-size: .9rem;
312 | }
313 | 
314 | h1:first-child {
315 |   margin-top: 0;
316 | }
317 | 
318 | section, footer {
319 |   text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
320 |   margin: 20px 30px 0;
321 |   display: block;
322 |   overflow: hidden;
323 | }
324 | 
325 | footer {
326 |   font-size: 1rem;
327 |   margin: 20px 0 0 30px;
328 | }
329 | 
330 | a {
331 |   color: #C7573A;
332 |   display: inline-block;
333 |   text-decoration: none;
334 |   line-height: 110%;
335 |   border-bottom: 2px dotted #BDD9D5;
336 | }
337 | 
338 | pre, .ex, .pre, .codelike {
339 |   text-align: left;
340 |   padding: 10px 20px;
341 |   background: rgba(255, 255, 255, 0.6);
342 |   -moz-border-radius: 8px;
343 |   border-radius: 8px;
344 |   border: 1px solid #fff;
345 |   font-size: 1.8rem;
346 |   line-height: 1.8rem;
347 | }
348 | 	.ex.right {
349 | 		float: right;
350 | 		width: 200px;
351 | 	}
352 | 	.pre li{
353 | 		font-family: monospace;
354 | 		font-size: 1.3rem;
355 | 		list-style-type: none;
356 | 	}
357 | 	.preintro pre {
358 | 		font-size: 1.7rem;
359 | 		margin: 30px 20px 0 0;
360 | 		line-height: 1.5;
361 | 	}
362 | 
363 | pre b, .pre b, .imp {
364 |   font-weight: normal;
365 |   color: #C7573A;
366 |   text-shadow: #c61800 0 0 1px;
367 |   /*letter-spacing: -1px;*/
368 | }
369 | 
370 | pre em {
371 |   font-weight: normal;
372 |   font-style: normal;
373 |   color: #C7573A;
374 |   text-shadow: rgba(0,0,0,0.3) 1px 1px 2px;
375 |   font-weight: bold;
376 | }
377 | 
378 | div.example {
379 |   display: block;
380 |   padding: 10px 20px;
381 |   background: rgba(255, 255, 255, 0.4);
382 |   margin-bottom: 10px;
383 |   border: 1px solid rgba(0, 0, 0, 0.2);
384 | }
385 | 
386 | #presentation-counter {
387 |   color: #ccc;
388 |   font-size: 0.7rem;
389 |   letter-spacing: 1px;
390 |   position: absolute;
391 |   top: 40%;
392 |   left: 0;
393 |   width: 100%;
394 |   text-align: center;
395 | }
396 | 
397 | div:not(.current).reduced {
398 |   -webkit-transform: scale(0.8);
399 |   -moz-transform: scale(0.8);
400 |   -o-transform: scale(0.8);
401 |   transform: scale(0.8);
402 | }
403 | 
404 | .no-transitions {
405 |   -webkit-transition: none;
406 |   -moz-transition: none;
407 |   -o-transition: none;
408 |   transition: none;
409 | }
410 | 
411 | .no-gradients {
412 |   background: none;
413 |   background-color: #fff;
414 | }
415 | dt {
416 | 	font-weight: bold;
417 | 	margin-top: 0.5rem;
418 | 
419 | 	background-color: #BDD9D5;;
420 | 	display:inline-block;
421 | 	margin-bottom: 2px;
422 | 	clear: both;
423 | }
424 | dd {
425 | 	font-weight: normal;
426 | 	margin: 0 0 2px 0;
427 | }
428 | 
429 | dl.inline dt {
430 | 	width: 200px;
431 | 	float: left;
432 | 	text-align: right;
433 | 	padding-right: 15px;
434 | 	clear:both;
435 | 	margin: 0 0 2px 0;
436 | }
437 | dl.inline dd{
438 | 	font-style: italic;
439 | }
440 | .light section {
441 | 	font-size: 1.8rem;
442 | }
443 | 
444 | .new {color: #C7573A; background-color: #fff; padding: 3px 8px;}
445 | ul.columns {
446 | 	-webkit-column-count: 4;
447 | 	margin: 40px -40px 0;
448 | }
449 | ul {
450 |   -moz-box-sizing: border-box;
451 |   box-sizing: border-box;
452 | }
453 | .play h1 {
454 | 	 text-align:center;
455 | 	 margin-top:100px;
456 | 	 font-size: 2rem;
457 | 
458 | }
459 | .play {text-align: center;}
460 | .columns2 {
461 | 	-webkit-columns: 2 1rem;
462 | 
463 | 	-webkit-column-rule: 1px solid #BDD9D5;
464 | }
465 | 
466 | .hilite {font-size: 1.2rem; padding:5px 2px;}
467 | 
468 | .specificity li{
469 | 	display: inline-block;
470 | 	width: 200px;
471 | 	padding-bottom: 180px;
472 | 	background-position: 50% bottom;
473 | 	text-align:center;
474 | 	font-size: 1.5rem;
475 | 
476 | 	border-radius: 15px;
477 | 	background-color: #fff;
478 | 	margin: 0 30px;
479 | }
480 | .nonspec li {padding-bottom: 0;}
481 | .specificity .id {
482 | 	background-image:url(../img/shark.gif);
483 | }
484 | .specificity .class {
485 | 	background-image:url(../img/fish.png);
486 | }
487 | .specificity .element {
488 | 	background-image:url(../img/plankton.png);
489 | }
490 | .object header {position:absolute; top: 10px; width: 100%; text-align:center; background-color: rgba(255,255,255,0.9); left:0;}
491 | .objectlink {position:absolute;top:0; right:0;color: white; background-color: #C7573A; padding: 3px 5px; border: none;}
492 | .slide.object {padding:0;}
493 | .object object {width: 100%; height: 100%;}
494 | 
495 | .deprecated dt {margin-bottom: 1rem;
496 |     }
497 | .deprecated dd {display: none;}
498 | .deprecated dt:hover + dd {display:inherit;}
499 | .appearance dt {margin-bottom:0.5rem;
500 |     }
501 | .deprecated.listed dt {margin-bottom:0; margin-top:0.2rem;
502 |      display:block; width: 50%; padding-left: 5px;
503 | }
504 | .deprecated.listed.wide dt{width:100%;}
505 | 
506 | button, .button {
507 | 	-webkit-appearance: none;
508 | 	color: #333;
509 | 	font-size: 1.6rem;
510 | 	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
511 | 	background: -webkit-linear-gradient(#fff, #ddd);
512 | 	border-radius: 15px;
513 | 	border: none;
514 | 	padding: 5px 10px;
515 | 	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
516 | }
517 | button:hover {
518 | 	background: -webkit-linear-gradient(#ddd, #fff);
519 | }
520 | .slide.object section {margin-top:100px;}
521 | td {text-align:center;}
522 | [contenteditable]:focus {outline: 1px dashed #fff;}
523 | section > ol {-webkit-margin-start: 2rem;
524 |     }
525 | 
526 | 
527 | /* =======================
528 | 
529 | SLIDE ORIGINAL
530 | 
531 | ========================== */
532 | body {
533 |   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif, 'Droid Sans';
534 |   padding: 0;
535 |   margin: 0;
536 |   width: 100%;
537 |   height: 100%;
538 |   position: absolute;
539 |   left: 0px; top: 0px;
540 | }
541 | 
542 | #info {
543 |   font-size: small;
544 |   position: absolute;
545 |   bottom: 0px;
546 |   left: 40%;
547 |   z-index: 500;
548 |   color: #fff;
549 | }
550 | /* optional */
551 | #topinfo {
552 |   font-size: small;
553 |   position: absolute;
554 |   top: 5px;
555 |   right: 5px;
556 |   z-index: 500;
557 | }
558 | .key {
559 |   color: black;
560 |   display: inline-block;
561 |   padding: 3px 3px 3px 3px;
562 |   text-shadow: none;
563 |   letter-spacing: 0;
564 |   position: relative;
565 |   background: white;
566 |   border-radius: 5px;
567 |   font-weight: bold;
568 |   text-shadow: 0 0 1px currentColor;
569 |   }
570 | 
571 | .slides {
572 |   padding-top: 10px;
573 |   padding-bottom: 10px;
574 |   width: 100%;
575 |   height: 100%;
576 |   left: 0;
577 |   top: 0;
578 |   position: absolute;
579 |   display: block;
580 |   -webkit-transition: -webkit-transform 1s ease-in-out;
581 |   -moz-transition: -moz-transform 1s ease-in-out;
582 |   -ms-transition: -ms-transform 1s ease-in-out;
583 |   -o-transition: -o-transform 1s ease-in-out;
584 |   transition: transform 1s ease-in-out;
585 |   -webkit-transform: scale(0.8);
586 |   -moz-transform: scale(0.8);
587 |   -ms-transform: scale(0.8);
588 |   -o-transform: scale(0.8);
589 |   transform: scale(0.8);
590 | }
591 | .slide {
592 |   display: none;
593 |   position: absolute;
594 |   overflow: hidden;
595 |   width: 900px;
596 |   height: 700px;
597 |   left: 50%;
598 |   top: 50%;
599 |   margin-top: -350px;
600 |   background-color: #eee;
601 |   -webkit-transition: all 0.25s ease-in-out;
602 |   -moz-transition: all 0.25s ease-in-out;
603 |   -ms-transition: all 0.25s ease-in-out;
604 |   -o-transition: all 0.25s ease-in-out;
605 |   transition: all 0.25s ease-in-out;
606 |   -webkit-transform: scale(1);
607 |   -moz-transform: scale(1);
608 |   -ms-transform: scale(1);
609 |   -o-transform: scale(1);
610 |   transform: scale(1);
611 |   padding-left: 20px;
612 |   padding-top: 10px;
613 |   border-radius: 15px;
614 |   border: 5px solid #fff;
615 | 
616 |   box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 6px rgba(0,0,0,0.4);
617 | }
618 | .slide.intro {
619 |   text-align: center;
620 |   font-size: 2rem;
621 | }
622 | .slide.intro hgroup {
623 |   margin-top: 200px;
624 | }
625 | .content {
626 |   font-size: 2rem;
627 | }
628 | .content input, button {
629 |   font-size: 2rem;
630 | }
631 | .slide textarea.mynotes {
632 |     -webkit-appearance: none;
633 |     border: 1px #aaa solid;
634 |     border-radius: 5px;
635 |     width: 100%;
636 |     font-size: 1.2rem;
637 |     font-style: italic;
638 |     box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
639 |     padding: 5px;
640 |     box-sizing: border-box;
641 |     font-family:"Palatino Linotype", "Book Antiqua", Palatino, cursive,serif;
642 |    }
643 | .content td {
644 |   border: 1px solid black;
645 | }
646 | .invalid {
647 |   background-color: red;
648 | }
649 | .slide.section,.slide.intro {
650 |   text-align: center;
651 | }
652 | .slide.section,.slide.intro header {
653 |   font-size: 2.5rem;
654 | }
655 | .slide li {
656 |     margin-bottom: 10px;
657 | }
658 | .slide img {
659 |   max-height: 90%;
660 |   border: 1px solid white;
661 |   -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
662 |   box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
663 |   text-align: center;
664 | }
665 | .slide p{
666 |   font-size: 2rem;
667 | }
668 | .slide .counter {
669 |   color: #999999;
670 |   position: absolute;
671 |   left: 20px;
672 |   bottom: 20px;
673 |   display: block;
674 |   font-size: 0.9rem;
675 | }
676 | .slide.title > .counter,
677 | .slide.segue > .counter,
678 | .slide.mainTitle > .counter {
679 |   display: none;
680 | }
681 | .force-render {
682 |   display: block;
683 |   visibility: hidden;
684 | }
685 | .slide.far-past {
686 |   display: block;
687 |   margin-left: -2400px;
688 | }
689 | .slide.past {
690 |   visibility: visible;
691 |   display: block;
692 |   margin-left: -1400px;
693 | }
694 | .slide.current {
695 |   visibility: visible;
696 |   display: block;
697 |   margin-left: -450px;
698 | }
699 | .slide.future {
700 |   visibility: visible;
701 |   display: block;
702 |   margin-left: 500px;
703 | }
704 | .slide.far-future {
705 |   display: block;
706 |   margin-left: 1500px;
707 | }
708 | 
709 | /* Content */
710 | 
711 | header {
712 |   font-weight: normal;
713 |   letter-spacing: -.05rem;
714 |   text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
715 |   left: 30px;
716 |   top: 25px;
717 |   font-size: 2rem;
718 | }
719 | h1 {
720 |   font-size: 2.5rem;
721 |   margin-bottom: 0;
722 | }
723 | h2 {
724 |   font-size: 1.9rem;
725 | }
726 | h1:first-child {
727 |   margin-top: 0;
728 | }
729 | section, footer {
730 |   text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
731 |   margin: 20px 30px 0;
732 |   display: block;
733 |   overflow: hidden;
734 | }
735 | footer {
736 |   font-size: 1rem;
737 |   margin: 20px 0 0 30px;
738 | }
739 | a {
740 |   display: inline-block;
741 |   text-decoration: none;
742 |   line-height: 110%;
743 | }
744 | a:hover {
745 |   text-decoration: underline;
746 | }
747 | 
748 | div.example {
749 |   display: block;
750 |   padding: 10px 20px;
751 |   background: rgba(255, 255, 255, 0.4);
752 |   border-radius: 8px;
753 |   margin-bottom: 10px;
754 |   border: 1px solid rgba(0, 0, 0, 0.2);
755 | }
756 | #presentation-counter {
757 |   color: #ccc;
758 |   font-size: 0.9rem;
759 |   letter-spacing: 1px;
760 |   position: absolute;
761 |   top: 40%;
762 |   left: 0;
763 |   width: 100%;
764 |   text-align: center;
765 | }
766 | #next,
767 | #back {
768 |   z-index: 1000;
769 |   position: absolute;
770 |   top: 5px;
771 |   left: 5px;
772 |   list-style-type: none;
773 |   -webkit-appearance: none;
774 |   color: #333;
775 |   font-size: 1rem;
776 |   text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
777 |   background: -webkit-linear-gradient(#fff 50%, #eee 50%, #ddd);
778 |   background: -moz-linear-gradient(#fff 50%, #eee 50%, #ddd);
779 |   background: -ms-linear-gradient(#fff 50%, #eee 50%, #ddd);
780 |   background: -o-linear-gradient(#fff 50%, #eee 50%, #ddd);
781 |   background: linear-gradient(#fff 50%, #eee 50%, #ddd);
782 |   border-radius: 7px;
783 |   border: none;
784 |   padding: 5px 10px;
785 |   letter-spacing:1px;
786 |   font-size: 1rem;
787 |   box-shadow: inset 0 0 2px rgba(0,0,0,0.3),
788 |     2px 2px 5px rgba(0,0,0,0.7);
789 |   border: 3px solid #eee;
790 | }
791 | #next {left: auto; right: 5px;}
792 | 
793 | /* OBJECT PAGES */
794 | .object header {
795 |   position:absolute;
796 |   top: 10px;
797 |   width: 100%;
798 |   text-align:center;
799 |   background-color: rgba(255,255,255,0.9);
800 |   left:0;
801 | }
802 | .objectlink {
803 |   position:absolute;
804 |   top:0; right:0;
805 |   color: white;
806 |   background-color: #000;
807 |   padding: 3px 5px;
808 |   border: none;
809 | }
810 | .slide.object {padding:0;}
811 | .object object {min-height: 100%;}
812 | .notes, .temphidden {display: none;}
813 | 
814 | /* ===============================
815 | 
816 |    PRINT STYLE SHEET
817 | 
818 | // =============================== */
819 | 
820 | @media print {
821 |   .slide {
822 |     page-break-inside: avoid;
823 |     page-break-after: always;
824 |     visibility: visible !important;
825 |     font-size: 20pt;
826 |     font-family: Arial, sans-serif;
827 |   }
828 |   @page {
829 |     size: landscape;
830 |   }
831 |   body {
832 |     font-size: 12pt;
833 |     background: white;
834 |   }
835 |   header h1 {
836 |     border-top: 2pt solid gray;
837 |     border-bottom: 1px dotted silver;
838 |   }
839 |   #presentation-counter, #info, #topinfo, .counter {
840 |     display: none
841 |   }
842 | }
843 | 


--------------------------------------------------------------------------------
/css/slide.js:
--------------------------------------------------------------------------------
  1 | // JavaScript Document
  2 | 
  3 | 
  4 | function vendorPrefix(prefix, id){
  5 | 	  var prefixTxt = 'cat';
  6 | 		switch (prefix){
  7 | 			case 'w':
  8 | 				prefixTxt = '-webkit-';
  9 | 			break;
 10 | 			case 'm':
 11 | 				prefixTxt = '-moz-';
 12 | 			break;
 13 | 			case 'ms':
 14 | 				prefixTxt = '-ms-';
 15 | 			break;
 16 | 			case 'o':
 17 | 				prefixTxt = '-o-';
 18 | 			break;
 19 | 			case 'r':
 20 | 				prefixTxt = '';
 21 | 			break;
 22 | 		};
 23 | 	  var spans = document.getElementById(id).querySelectorAll('u');
 24 | 	  for(var i = 0, j = spans.length; i < j; i++ ){
 25 | 	  	spans[i].innerHTML = prefixTxt;
 26 | 	  }
 27 | 
 28 | 	}
 29 | 
 30 | 
 31 | 
 32 |   (function() {
 33 |   var doc = document;
 34 |   var disableBuilds = true;
 35 | 
 36 |   var ctr = 0;
 37 |   var spaces = /\s+/, a1 = [''];
 38 | 
 39 |   var toArray = function(list) {
 40 |     return Array.prototype.slice.call(list || [], 0);
 41 |   };
 42 | 
 43 |   var byId = function(id) {
 44 |     if (typeof id == 'string') { return doc.getElementById(id); }
 45 |     return id;
 46 |   };
 47 | 
 48 |   var query = function(query, root) {
 49 |     if (!query) { return []; }
 50 |     if (typeof query != 'string') { return toArray(query); }
 51 |     if (typeof root == 'string') {
 52 |       root = byId(root);
 53 |       if(!root){ return []; }
 54 |     }
 55 | 
 56 |     root = root || document;
 57 |     var rootIsDoc = (root.nodeType == 9);
 58 |     var doc = rootIsDoc ? root : (root.ownerDocument || document);
 59 | 
 60 |     // rewrite the query to be ID rooted
 61 |     if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
 62 |       root.id = root.id || ('qUnique' + (ctr++));
 63 |       query = '#' + root.id + ' ' + query;
 64 |     }
 65 |     // don't choke on something like ".yada.yada >"
 66 |     if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }
 67 | 
 68 |     return toArray(doc.querySelectorAll(query));
 69 |   };
 70 | 
 71 |   var strToArray = function(s) {
 72 |     if (typeof s == 'string' || s instanceof String) {
 73 |       if (s.indexOf(' ') < 0) {
 74 |         a1[0] = s;
 75 |         return a1;
 76 |       } else {
 77 |         return s.split(spaces);
 78 |       }
 79 |     }
 80 |     return s;
 81 |   };
 82 |   /*
 83 |   var _notesOn = false;
 84 |   var showNotes = function() {
 85 |       var isOn = this._notesOn = !this._notesOn;
 86 |       document.querySelectorAll('.notes').forEach(function(el) {
 87 |         el.style.display = (isOn) ? '' : 'none';
 88 |       });
 89 |     };
 90 | */
 91 |   var addClass = function(node, classStr) {
 92 |     classStr = strToArray(classStr);
 93 |     var cls = ' ' + node.className + ' ';
 94 |     for (var i = 0, len = classStr.length, c; i < len; ++i) {
 95 |       c = classStr[i];
 96 |       if (c && cls.indexOf(' ' + c + ' ') < 0) {
 97 |         cls += c + ' ';
 98 |       }
 99 |     }
100 |     node.className = cls.trim();
101 |   };
102 | 
103 |   var removeClass = function(node, classStr) {
104 |     var cls;
105 |     if (classStr !== undefined) {
106 |       classStr = strToArray(classStr);
107 |       cls = ' ' + node.className + ' ';
108 |       for (var i = 0, len = classStr.length; i < len; ++i) {
109 |         cls = cls.replace(' ' + classStr[i] + ' ', ' ');
110 |       }
111 |       cls = cls.trim();
112 |     } else {
113 |       cls = '';
114 |     }
115 |     if (node.className != cls) {
116 |       node.className = cls;
117 |     }
118 |   };
119 | 
120 |   var toggleClass = function(node, classStr) {
121 |     var cls = ' ' + node.className + ' ';
122 |     if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
123 |       removeClass(node, classStr);
124 |     } else {
125 |       addClass(node, classStr);
126 |     }
127 |   };
128 | 
129 |   var ua = navigator.userAgent;
130 |   var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined;
131 |   var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined;
132 |   var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;
133 | 
134 |   var canTransition = (function() {
135 |   var ver = parseFloat(ua.split('Version/')[1]) || undefined;
136 |   // test to determine if this browser can handle CSS transitions.
137 |   var cachedCanTransition =
138 |     (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
139 |     return function() { return cachedCanTransition; }
140 |   })();
141 | 
142 |   //
143 |   // Slide class
144 |   //
145 |   var Slide = function(node, idx) {
146 |     this._node = node;
147 |     if (idx >= 0) {
148 |       this._count = idx + 1;
149 |     }
150 |     if (this._node) {
151 |       addClass(this._node, 'slide distant-slide');
152 |     }
153 |     this._makeCounter();
154 |     this._makeBuildList();
155 |   };
156 | 
157 |   Slide.prototype = {
158 |     _node: null,
159 |     _count: 0,
160 |     _buildList: [],
161 |     _visited: false,
162 |     _currentState: '',
163 |     _states: [ 'distant-slide', 'far-past',
164 |                'past', 'current', 'future',
165 |                'far-future', 'distant-slide' ],
166 |     setState: function(state) {
167 |       if (typeof state != 'string') {
168 |         state = this._states[state];
169 |       }
170 |       if (state == 'current' && !this._visited) {
171 |         this._visited = true;
172 |         this._makeBuildList();
173 |       }
174 |       removeClass(this._node, this._states);
175 |       addClass(this._node, state);
176 |       this._currentState = state;
177 | 
178 |       // delay first auto run. Really wish this were in CSS.
179 |       /*
180 |       this._runAutos();
181 |       */
182 |       var _t = this;
183 |       setTimeout(function(){ _t._runAutos(); } , 400);
184 |     },
185 |     _makeCounter: function() {
186 |       if(!this._count || !this._node) { return; }
187 |       var c = doc.createElement('span');
188 |       c.innerHTML = this._count;
189 |       c.className = 'counter';
190 |       this._node.appendChild(c);
191 |     },
192 |     _makeBuildList: function() {
193 |       this._buildList = [];
194 |       if (disableBuilds) { return; }
195 |       if (this._node) {
196 |         this._buildList = query('[data-build] > *', this._node);
197 |       }
198 |       this._buildList.forEach(function(el) {
199 |         addClass(el, 'to-build');
200 |       });
201 |     },
202 |     _runAutos: function() {
203 |       if (this._currentState != 'current') {
204 |         return;
205 |       }
206 |       // find the next auto, slice it out of the list, and run it
207 |       var idx = -1;
208 |       this._buildList.some(function(n, i) {
209 |         if (n.hasAttribute('data-auto')) {
210 |           idx = i;
211 |           return true;
212 |         }
213 |         return false;
214 |       });
215 |       if (idx >= 0) {
216 |         var elem = this._buildList.splice(idx, 1)[0];
217 |         var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
218 |         var _t = this;
219 |         if (canTransition()) {
220 |           var l = function(evt) {
221 |             elem.parentNode.removeEventListener(transitionEnd, l, false);
222 |             _t._runAutos();
223 |           };
224 |           elem.parentNode.addEventListener(transitionEnd, l, false);
225 |           removeClass(elem, 'to-build');
226 |         } else {
227 |           setTimeout(function() {
228 |             removeClass(elem, 'to-build');
229 |             _t._runAutos();
230 |           }, 400);
231 |         }
232 |       }
233 |     },
234 |     buildNext: function() {
235 |       if (!this._buildList.length) {
236 |         return false;
237 |       }
238 |       removeClass(this._buildList.shift(), 'to-build');
239 |       return true;
240 |     },
241 |   };
242 | 
243 |   //
244 |   // SlideShow class
245 |   //
246 |   var SlideShow = function(slides) {
247 |     this._slides = (slides || []).map(function(el, idx) {
248 |       return new Slide(el, idx);
249 |     });
250 | 
251 |     var h = window.location.hash;
252 |     try {
253 |       this.current = parseInt(h.split('#slide')[1], 10);
254 |     }catch (e) { /* squeltch */ }
255 |     this.current = isNaN(this.current) ? 1 : this.current;
256 |     var _t = this;
257 |     doc.addEventListener('keydown',
258 |         function(e) { _t.handleKeys(e); }, false);
259 |     doc.addEventListener('mousewheel',
260 |         function(e) { _t.handleWheel(e); }, false);
261 |     doc.addEventListener('DOMMouseScroll',
262 |         function(e) { _t.handleWheel(e); }, false);
263 |     doc.addEventListener('touchstart',
264 |         function(e) { _t.handleTouchStart(e); }, false);
265 |     doc.addEventListener('touchend',
266 |         function(e) { _t.handleTouchEnd(e); }, false);
267 |     window.addEventListener('popstate',
268 |         function(e) { _t.go(e.state); }, false);
269 |     this._update();
270 |   };
271 | 
272 |   SlideShow.prototype = {
273 |     _slides: [],
274 |     _update: function(dontPush) {
275 |       document.querySelector('#presentation-counter').innerText = this.current;
276 |       if (history.pushState) {
277 |         if (!dontPush) {
278 |           history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
279 |         }
280 |       } else {
281 |         window.location.hash = 'slide' + this.current;
282 |       }
283 |       for (var x = this.current-1; x < this.current + 7; x++) {
284 |         if (this._slides[x-4]) {
285 |           this._slides[x-4].setState(Math.max(0, x-this.current));
286 |         }
287 |       }
288 |     },
289 | 
290 |     current: 0,
291 |     next: function() {
292 |       if (!this._slides[this.current-1].buildNext()) {
293 |         this.current = Math.min(this.current + 1, this._slides.length);
294 |         this._update();
295 |       }
296 |     },
297 |     prev: function() {
298 |       this.current = Math.max(this.current-1, 1);
299 |       this._update();
300 |     },
301 |     go: function(num) {
302 |       if (!num) return;
303 |       if (history.pushState && this.current != num) {
304 |         history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
305 |       }
306 |       this.current = num;
307 |       this._update(true);
308 |     },
309 | 
310 |     _notesOn: true,
311 |     showNotes: function() {
312 |       var isOn = this._notesOn = !this._notesOn;
313 |       var elements = document.querySelectorAll('.notes');
314 | 	  for(var i = 0, length = elements.length; i < length; i++) {
315 | 	    elements[i].style.display = (isOn) ? '' : 'none';
316 |       }
317 |     },
318 |     switch3D: function() {
319 |       toggleClass(document.body, 'three-d');
320 |     },
321 |     handleWheel: function(e) {
322 |       var delta = 0;
323 |       if (e.wheelDelta) {
324 |         delta = e.wheelDelta/120;
325 |         if (isOpera) {
326 |           delta = -delta;
327 |         }
328 |       } else if (e.detail) {
329 |         delta = -e.detail/3;
330 |       }
331 | 
332 |       if (delta > 0 ) {
333 |         this.prev();
334 |         return;
335 |       }
336 |       if (delta < 0 ) {
337 |         this.next();
338 |         return;
339 |       }
340 |     },
341 |     handleKeys: function(e) {
342 | 
343 |       if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
344 | 	  //console.dir(e.target);
345 |       if(e.target.contentEditable == "true") return;
346 |       switch (e.keyCode) {
347 |         case 37: // left arrow
348 |           this.prev(); break;
349 |         case 39: // right arrow
350 |         case 32: // space
351 |           this.next(); break;
352 |         case 50: // 2
353 |           this.showNotes(); break;
354 |         case 51: // 3
355 |           this.switch3D(); break;
356 |       }
357 |     },
358 |     _touchStartX: 0,
359 |     handleTouchStart: function(e) {
360 |       this._touchStartX = e.touches[0].pageX;
361 |     },
362 |     handleTouchEnd: function(e) {
363 |       var delta = this._touchStartX - e.changedTouches[0].pageX;
364 |       var SWIPE_SIZE = 150;
365 |       if (delta > SWIPE_SIZE) {
366 |         this.next();
367 |       } else if (delta< -SWIPE_SIZE) {
368 |          this.prev();
369 |        }
370 |     },
371 |   };
372 | 
373 |   // Initialize
374 |   var slideshow = new SlideShow(query('.slide'));
375 | })();
376 | 


--------------------------------------------------------------------------------
/files/00_basic.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
11 | li {color: black;}
12 | :root {background-color:#ccc; 
13 |   background-image:url(../css/page-bg.jpg);}
14 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
15 | li {color: black;}
16 | li li {color: green;}
17 | </style>
18 | 
19 | <style contenteditable>ol li 		{color: green;}
20 | ol > li 	{color: purple;}
21 | li 		{color: yellow;}
22 | li.myclass 	{color: red;}
23 | li.myclass ~ li {color: blue;} 
24 | li.myclass + li {color:orange;}
25 | </style>
26 | <title>CSS Selector Test</title>
27 | </head>
28 | 
29 | <body>
30 | 	<ol>
31 |      	<li>item 1</li>
32 |      	<li>item 2</li>
33 |      	<li>item 3
34 |         	<ul>
35 |      		<li>item a</li>
36 |      		<li>item b</li>
37 |      		<li>item c</li>
38 |             </ul>
39 |         </li>
40 |      	<li class="myclass">item 4 (myclass)</li>
41 |      	<li>item 5</li>
42 |      	<li>item 6</li>
43 |      	<li>item 7</li>
44 |         </ol>
45 | </body>
46 | </html>
47 | 
48 | 


--------------------------------------------------------------------------------
/files/01_attr.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
11 | li {color: black;}
12 | :root {background-color:#ccc; 
13 |   background-image:url(../css/page-bg.jpg);}
14 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
15 | li {color: black;}
16 | li li {color: green;}
17 | </style>
18 | 
19 | <style contenteditable>i[title] {color: red;} 
20 | a[href] {text-decoration: overline;}
21 | </style>
22 | <title>CSS Selector Test</title>
23 | </head>
24 | 
25 | <body><ol>
26 | <li class="myClass" title="unicorns eat rainbows">First List Item - &lt;li class=&quot;myClass&quot; title=&quot;unicorns eat rainbows&quot;&gt;</li>
27 | <li>Second List Item has a <span>span</span> - &lt;li&gt;Second List Item has a &lt;span&gt;span&lt;/span&gt;&lt;/li&gt;</li>
28 | <li class="myClass">Third List Item - &lt;li class=&quot;myClass&quot;&gt;</li>
29 | <li>Fourth List Item</li>
30 | <li>Fifth List Item
31 | 	<ul>
32 |     	<li>Child 1 external  <a href="http://site.com/file.pdf" title="external pdf file">pdf</a> - &lt;a href=&quot;http://site.com/file.pdf&quot; title=&quot;external pdf file&quot;&gt;</li>
33 |     	<li>Child 2</li>
34 |     	<li>Child 3</li>
35 |     </ul>
36 | </li>
37 | <li>Sixth  List Item</li>
38 | <li id="myID">Seventh List Item - &lt;li id=&quot;myID&quot;&gt;</li>
39 | <li>Eighth List Item</li>
40 | <li class="myClass">Ninth List Item - &lt;li class=&quot;myClass&quot;&gt;</li>
41 | <li>Tenth List Item with an external <a href="http://standardista.com">Link</a> - &lt;a href=&quot;http://standardista.com&quot;&gt;Link&lt;/a&gt;</li>
42 | <li>Eleventh List Item with a <a href="local.pdf" title="a local pdf file">PDF</a> - &lt;a href=&quot;local.pdf&quot;  title=&quot;a local pdf file&quot;&gt;PDF&lt;/a&gt;</li>
43 | <li>Twelvth List Item</li>
44 | <li title="unicorn ate a rainbow">Thirteenth List Item -  &lt;li title=&quot;unicorn ate a rainbow&quot;&gt;</li>
45 | </ol>
46 | </body>
47 | </html>
48 | 
49 | 


--------------------------------------------------------------------------------
/files/02_uiselectors.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | 
10 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
11 | :root {background-color:#ccc; 
12 |   background-image:url(../css/page-bg.jpg);}ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
13 | li {color: black;}
14 | </style>
15 | 
16 | <style contenteditable>
17 | input[type=checkbox]:checked + label {color: red;}
18 | input:valid { border: 1px solid green;}
19 | input:invalid { border: 1px solid red;}
20 | input:required {border-width: 5px;}
21 | input:optional {border-width: 10px;}
22 | input:out-of-range { background-color: pink;}
23 | input:in-range { background-color:lightgreen;}
24 | </style>
25 | <title>CSS UI Selector</title>
26 | </head>
27 | 
28 | <body><ol>
29 | <li><input type="checkbox" id="test1ck"/> <label  for="test1ck">Check and Uncheck Me</label></li>
30 | <li>
31 |   <input type="checkbox" id="test2ck"/> <label  for="test2ck">Check and uncheck me too!</label>
32 |   </li>
33 | <li>
34 |   <input type="number" min="5" max="7" id="test3ck" required/> 
35 |   <label  for="test3ck">Number between 5 an 7</label>
36 | </li>
37 | <li><input type="color" pattern="#[a-fA-F0-9]{6}" id="test4ck" /> <label  for="test4ck">Hexidecimal color</label></li>
38 | </ol>
39 | </body>
40 | </html>
41 | 
42 | 


--------------------------------------------------------------------------------
/files/03_root.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
11 | li {color: black;}
12 | :root {background-color:#ccc; 
13 |   background-image:url(../css/page-bg.jpg);}
14 | </style>
15 | 
16 | <style contenteditable>
17 | :root {background-color:#ccc; 
18 |   background-image:url(../css/page-bg.jpg);}
19 | input[type=checkbox]:checked + label {color: red;}
20 | input:valid { border: 1px solid green;}
21 | input:invalid { border: 1px solid red;}
22 | input:required {border-width: 5px;}
23 | input:optional {border-width: 10px;}
24 | input:out-of-range { background-color: pink;}
25 | input:in-range { background-color:lightgreen;}
26 | </style>
27 | <title>CSS UI Selector</title>
28 | </head>
29 | 
30 | <body><ol>
31 | <li><input type="checkbox" id="test1ck"/> <label  for="test1ck">Check and Uncheck Me</label></li>
32 | <li>
33 |   <input type="checkbox" id="test2ck"/> <label  for="test2ck">Check and uncheck me too!</label>
34 |   </li>
35 | <li>
36 |   <input type="number" min="5" max="7" id="test3ck" required/> 
37 |   <label  for="test3ck">Number between 5 an 7</label>
38 | </li>
39 | <li><input type="color" pattern="#[a-fA-F0-9]{6}" id="test4ck" /> <label  for="test4ck">Hexidecimal color</label></li>
40 | </ol>
41 | </body>
42 | </html>
43 | 
44 | 


--------------------------------------------------------------------------------
/files/04_firstlastonly.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | :root {background-color:#ccc; 
11 |   background-image:url(../css/page-bg.jpg);}
12 | p, h1, h2 {font-family:Verdana, Geneva, sans-serif; margin:0.4em 0;}
13 | div {background-color: #ededed; padding:10px; margin:10px;}
14 | 
15 | </style>
16 | 
17 | <style contenteditable>
18 | * {color: red;}
19 | </style>
20 | <title>CSS UI Selector</title>
21 | </head>
22 | 
23 | <body>
24 | <div>
25 | <h1>This is a H1</h1>
26 | <p>Carz wtf noice pour uh saiz hoi.</p>
27 | <p>Oh winz lol wuv donutz yu. Herrow not wut carz pwety oh hornz. </p>
28 | <p>Bere noze dum cheezeburger oh. Notise hai mikrosoft foots. Dum oh iz nuthing gravy haz nozbody finking. Funnae hai nom winz noze r. </p>
29 | </div>
30 | 
31 | <div>
32 | <h1>This is an H1</h1>
33 | <p>Sheeze dum can compewters flowerz. Loike choosday noice nom samez do hornz mac n. Funnae pour hoi dided gravy samez ghoast I.</p>
34 | <p> U pwety oh haz cat ghoast hai. Taytoes hornz hunnae hai meeeow ghoast. 
35 | </p>
36 | <h2>This is an h2</h2>
37 | <p>Sheeze meeeow dum uh dided cat nom hornz wuv. </p>
38 | <p>Donutz scratchin mac n dum rong ded gravy.</p>
39 | <p>Thx chz can hoi wtf. Evrybody yu u ded choosday evrybody hai neether. Iz hai dided sheeze bukket noice nozzing chz watzzup?. </p>
40 | <h2>this is another h2</h2>
41 | <p>Graet samez iz iz nozbody saiz sheeze oh carz. Jest kitteh not scratchin herrow. Nom scratchin rong saiz ya kitteh haz chz nom. </p>
42 | <p>Graet gravy gravy mikrosoft. Dided winz cheezeburger finking samez wtf foots. Gravy wut mac n partay noice noze foots. </p>
43 | <p>Can sink nom compewter ur ded how herrow cat. </p>
44 | </div>
45 | 
46 | <div><h1>This is the 3rd h1</h1>
47 | <p>Wut owwch owwch noze. Thx rong watzzup? graet. Watzzup? feat saiz watzzup? neether.</p>
48 | <h2>Look, an H2. 
49 | Lol evryfink compewters loike wut.</h2>
50 | <p> Ur hunnae graet hoi noice finking sink wut. Ghoast invizible compewters bukket. </p>
51 | <p>Sink feat can hornz watzzup? finking finking flowerz. Scratchin mac n bere invizible. Compewter pour nozzing gravy carz hai lol. </p>
52 | <h3>This is an H3 </h3>
53 | <p>Funnae lol ded dum bukket loike winz. Carz kitteh nozbody wtf wtf haz. Invizible bere hornz herrow.</p>
54 | <p> Oh nom hoi feathurz evryfink nom yu invizible. Hoi flowerz invizible uh. Ded oh invizible nuthing r lol pwety. </p>
55 | <p>Feat flowerz neether oh scratchin cat ghoast.</p>
56 | </div>
57 | 
58 | <div><h1>Only h1 in an otherwise empty div</h1></div>
59 | 
60 | </body>
61 | </html>
62 | 
63 | 


--------------------------------------------------------------------------------
/files/05_nth.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | :root {background-color:#ccc; 
11 |   background-image:url(../css/page-bg.jpg);}
12 | li{font-family:Verdana, Geneva, sans-serif; margin:0.4em 0;}
13 | div {background-color: #ededed; padding:10px; margin:10px;}
14 | 
15 | </style>
16 | 
17 | <style contenteditable>i:nth-last-of-type(3n) {color: red;}
18 | </style>
19 | <title>CSS UI Selector</title>
20 | </head>
21 | 
22 | <body>
23 | <ol>
24 | <li>list item</li>
25 | <li>list item</li>
26 | <li>list item</li>
27 | <li>list item</li>
28 | <li>list item</li>
29 | <li>list item</li>
30 | <li>list item</li>
31 | <li>list item</li>
32 | <li>list item</li>
33 | <li>list item</li>
34 | <li>list item</li>
35 | <li>list item</li>
36 | <li>list item</li>
37 | <li>list item</li>
38 | <li>list item</li>
39 | <li>list item</li>
40 | <li>list item</li>
41 | <li>list item</li>
42 | <li>list item</li>
43 | <li>list item</li>
44 | <li>list item</li>
45 | </ol>
46 | </body>
47 | </html>
48 | 
49 | 


--------------------------------------------------------------------------------
/files/06_not.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | :root {background-color:#ccc; 
11 |   background-image:url(../css/page-bg.jpg);}
12 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
13 | li {color: black;}
14 | li li {color: green;}
15 | </style>
16 | 
17 | <style contenteditable>i:not(:first-child) {color: red;}
18 | </style>
19 | <title>CSS Selector Test</title>
20 | </head>
21 | 
22 | <body><ol>
23 | <li class="myClass" title="unicorns eat rainbows">First List Item - &lt;li class=&quot;myClass&quot; title=&quot;unicorns eat rainbows&quot;&gt;</li>
24 | <li>Second List Item has a <span>span</span> - &lt;li&gt;Second List Item has a &lt;span&gt;span&lt;/span&gt;&lt;/li&gt;</li>
25 | <li class="myClass">Third List Item - &lt;li class=&quot;myClass&quot;&gt;</li>
26 | <li>Fourth List Item</li>
27 | <li>Fifth List Item
28 | 	<ul>
29 |     	<li>Child 1 external  <a href="http://site.com/file.pdf" title="external pdf file">pdf</a> - &lt;a href=&quot;http://site.com/file.pdf&quot; title=&quot;external pdf file&quot;&gt;</li>
30 |     	<li>Child 2</li>
31 |     	<li>Child 3</li>
32 |     </ul>
33 | </li>
34 | <li>Sixth  List Item</li>
35 | <li id="myID">Seventh List Item - &lt;li id=&quot;myID&quot;&gt;</li>
36 | <li>Eighth List Item</li>
37 | <li class="myClass">Ninth List Item - &lt;li class=&quot;myClass&quot;&gt;</li>
38 | <li>Tenth List Item with an external <a href="http://standardista.com">Link</a> - &lt;a href=&quot;http://standardista.com&quot;&gt;Link&lt;/a&gt;</li>
39 | <li>Eleventh List Item with a <a href="local.pdf" title="a local pdf file">PDF</a> - &lt;a href=&quot;local.pdf&quot;  title=&quot;a local pdf file&quot;&gt;PDF&lt;/a&gt;</li>
40 | <li>Twelvth List Item</li>
41 | <li title="unicorn ate a rainbow">Thirteenth List Item -  &lt;li title=&quot;unicorn ate a rainbow&quot;&gt;</li>
42 | </ol>
43 | </body>
44 | </html>
45 | 
46 | 


--------------------------------------------------------------------------------
/files/07_target.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | html, body {margin: 0;}
 9 | style:first-of-type {visibility:hidden;}
10 | style:last-of-type {padding: 5px 20px; font-size: 1.25em; white-space: pre; font-family: monospace; background-color: #eee;}
11 | 
12 | 
13 | 
14 | .block { 
15 | 	width: 300px; 
16 |  	min-height: 250px; 
17 | 	position: relative;
18 | 	margin: 20px auto;
19 | 	}
20 |         .section { display: inline; }
21 |          a { 
22 | 			text-decoration: none; 
23 | 			color: black; 
24 | 			float: left; 
25 | 			padding: 5px 10px; 
26 | 			border: 1px solid #ccc; 
27 | 			border-bottom: none; 
28 | 			margin-right: 10px;
29 | 			}
30 |         div:not(:target) > a { 
31 | 			background-color: #eee;
32 | 			}   
33 |         div:target > a { 
34 | 			background-color: white; 
35 | 			}    
36 |         .section > div { 
37 | 			background: white; 
38 | 			z-index: -2; 
39 | 			left: 0; 
40 | 			top: 30px; 
41 | 			bottom: 0; 
42 | 			right: 0; 
43 | 			padding: 20px; 
44 | 			border: 1px solid #ccc; }    
45 |         .section:not(:target) > div { position: absolute }
46 |         .section:target > div { position: absolute; z-index: -1; }
47 | </style>
48 | 
49 | <style contenteditable>div:not(:target) > a { 
50 | 	border-bottom: 0; 
51 | 	background-color: #eee;
52 | }   
53 | div:target > a { 
54 | 	background-color: white; 
55 | }
56 | .section:not(:target) > div { z-index: -2; }
57 | .section:target > div { z-index: -1; }
58 | </style>
59 | <title>CSS Selector Test</title>
60 | </head>
61 | 
62 | <body>
63 | <div class="block">
64 |         <div id="tab1" class="section">
65 |             <a href="#tab1">Tab 1</a>
66 |             <div>Bacon ipsum dolor sit amet flank shank filet mignon prosciutto, frankfurter pork shankle tail short ribs pork belly short loin sirloin. Pig shank prosciutto tail short ribs, boudin spare ribs t-bone capicola bresaola.</div>
67 |         </div>
68 |         <div id="tab2" class="section">
69 |             <a href="#tab2">Tab 2</a>
70 |             <div>Beef chuck cow beef ribs kielbasa, venison hamburger ribeye biltong t-bone prosciutto strip steak boudin turducken flank.</div>
71 |         </div>
72 |         <div id="tab3" class="section">
73 |             <a href="#tab3">Tab 3</a>
74 |             <div>Jerky swine meatloaf, venison spare ribs boudin hamburger leberkase short ribs ball tip shoulder.</div>
75 |         </div>
76 |     </div>
77 | </body>
78 | 
79 | </html>
80 | 
81 | 


--------------------------------------------------------------------------------
/files/08_dropcap.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | html, body {margin: 0;}
 9 | style:first-of-type {visibility:hidden;}
10 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
11 | 
12 | :root {background-color:#ccc; 
13 |   background-image:url(../css/page-bg.jpg);}
14 | p{width: 450px;
15 |  font-size: 36px;
16 |  font-family:Georgia, "Times New Roman", Times, serif;
17 |  margin: 0 20px 20px;
18 | }</style>
19 | 
20 | <style contenteditable>
21 | p:first-of-type::first-letter {
22 | 	position: relative;
23 | 	top: 8px;
24 | 	float: left;
25 | 	font-size: 3em;
26 | 	line-height: 1;
27 | 	color: #C7573A;
28 | 	padding: 0 4px 2px 0;
29 | 	font-weight: bold;		
30 | }
31 | </style>
32 | <title>CSS Drop Caps</title>
33 | </head>
34 | 
35 | <body>
36 | <p>You can even pretty drop-caps with :first-letter, but make sure to apply it to p:first-of-type so your site not too ugly. </p> 
37 | <p>This is a second paragraph. If it had a drop-cap this site would be ugly!</p>
38 | </body>
39 | 
40 | </html>
41 | 
42 | 


--------------------------------------------------------------------------------
/files/100_simpletransforms.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; background-color: rgba(255,255,255,0.5);}
10 | html {min-height:100%;}
11 | .box {margin: auto; height: 100px; width: 100px; background-color: indianred;}
12 | </style>
13 | 
14 | <style contenteditable> 
15 | .box {
16 |   -webkit-transform: 
17 |     rotate(0deg)
18 |     translate(0,0)
19 |     skew(0,0)
20 |     scale(1);
21 | }
22 | </style>
23 | <title>Simple Transforms</title>
24 | </head>
25 | 
26 | <body>
27 | 	<div class="box"></div>
28 | </body>
29 | </html>
30 | 
31 | 


--------------------------------------------------------------------------------
/files/101_transform3dhtml.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; background-color: rgba(255,255,255,0.5);}
10 | html {min-height:100%;}
11 | .box, .box:after {margin: auto; height: 100px; width: 100px; background-color: indianred; }
12 | .box:after {
13 |   background-color: goldenrod; content: ''; display: block;
14 | }
15 | p {font-family: helvetica, arial, sans-serif; text-align: center;}
16 | </style>
17 | 
18 | <style contenteditable>
19 | .box {-webkit-perspective: 1000px;} 
20 | .box:after {
21 |   -webkit-transform: 
22 |     rotate3d(130,110,80,25deg)
23 |     perspective(200); 
24 |   -webkit-transform-origin: bottom right;
25 | }
26 | 
27 | </style>
28 | <title>Transform origin</title>
29 | </head>
30 | 
31 | <body>
32 | 	<div class="box"></div>
33 | 	<p>Apply perspective to parent element. smaller # = closer; larger # = farther</p>
34 | </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/files/101_transformorigin.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; background-color: rgba(255,255,255,0.5);}
10 | html {min-height:100%;}
11 | .box, .box:after {margin: auto; height: 100px; width: 100px; background-color: indianred; content: ''; display: block}
12 | </style>
13 | 
14 | <style contenteditable> 
15 | .box:after {
16 |   -webkit-transform: 
17 |     rotate(230deg)
18 |     translate(0,0)
19 |     skew(0,0)
20 |     scale(1);
21 |   -webkit-transform-origin: bottom right;
22 |   background-color: goldenrod;
23 | }
24 | 
25 | </style>
26 | <title>Transform origin</title>
27 | </head>
28 | 
29 | <body>
30 | 	<div class="box"></div>
31 | </body>
32 | </html>
33 | 
34 | 


--------------------------------------------------------------------------------
/files/102_backface.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; background-color: rgba(255,255,255,0.5);}
10 | html {min-height:100%;}
11 | .box, .box:after {margin: auto; height: 100px; width: 100px; background-color: indianred; }
12 | .box:after {
13 |   background-color: goldenrod; content: ''; display: block;
14 | }
15 | p {font-family: helvetica, arial, sans-serif; text-align: center;}
16 | </style>
17 | 
18 | <style contenteditable>
19 | .box {-webkit-perspective: 1000px;} 
20 | .box:after {
21 |   -webkit-transform: 
22 |     rotate3d(130,110,80,25deg)
23 |     perspective(200); 
24 |   -webkit-transform-origin: bottom right;
25 | }
26 | 
27 | </style>
28 | <title>Transform origin</title>
29 | </head>
30 | 
31 | <body>
32 | 	<div class="box"></div>
33 | 	<p>Apply perspective to parent element. smaller # = closer; larger # = farther</p>
34 | </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/files/11_specificity.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace;}
10 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
11 | li {color: black;}
12 | li li {color: green;}
13 | </style>
14 | 
15 | <style contenteditable>i.myClass {color: red;}
16 | li[title] {color: blue;}
17 | </style>
18 | <title>CSS Selector Test</title>
19 | </head>
20 | 
21 | <body><ol>
22 | <li class="myClass" title="unicorns eat rainbows">First List Item - &lt;li class=&quot;myClass&quot; title=&quot;unicorns eat rainbows&quot;&gt;</li>
23 | <li>Second List Item has a <span>span</span> - &lt;li&gt;Second List Item has a &lt;span&gt;span&lt;/span&gt;&lt;/li&gt;</li>
24 | <li class="myClass">Third List Item - &lt;li class=&quot;myClass&quot;&gt;</li>
25 | <li>Fourth List Item</li>
26 | <li>Fifth List Item
27 | 	<ul>
28 |     	<li>Child 1 external  <a href="http://site.com/file.pdf" title="external pdf file">pdf</a> - &lt;a href=&quot;http://site.com/file.pdf&quot; title=&quot;external pdf file&quot;&gt;</li>
29 |     	<li>Child 2</li>
30 |     	<li>Child 3</li>
31 |     </ul>
32 | </li>
33 | <li>Sixth  List Item</li>
34 | <li id="myID">Seventh List Item - &lt;li id=&quot;myID&quot;&gt;</li>
35 | <li>Eighth List Item</li>
36 | <li class="myClass">Ninth List Item - &lt;li class=&quot;myClass&quot;&gt;</li>
37 | <li>Tenth List Item with an external <a href="http://standardista.com">Link</a> - &lt;a href=&quot;http://standardista.com&quot;&gt;Link&lt;/a&gt;</li>
38 | <li>Eleventh List Item with a <a href="local.pdf" title="a local pdf file">PDF</a> - &lt;a href=&quot;local.pdf&quot;  title=&quot;a local pdf file&quot;&gt;PDF&lt;/a&gt;</li>
39 | <li>Twelvth List Item</li>
40 | <li title="unicorn ate a rainbow">Thirteenth List Item -  &lt;li title=&quot;unicorn ate a rainbow&quot;&gt;</li>
41 | </ol>
42 | </body>
43 | </html>
44 | 
45 | 


--------------------------------------------------------------------------------
/files/12_flexbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | head, style {display: block;}
 6 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 7 | style:first-of-type {visibility:hidden;}
 8 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; background-color: rgba(255,255,255,0.5);}
 9 | html {min-height:100%;}
10 | div {border: 3px solid indianred; padding: 3px;}
11 | div div {border-color: goldenrod;}
12 | 
13 | div:nth-of-type(2){border-style: dashed;}
14 | </style>
15 | 
16 | <style contenteditable> 
17 | #container {
18 | 	display: -webkit-flex;
19 |     -webkit-flex-direction: row;
20 | }
21 | #container div{
22 | 	-webkit-flex: 20%;
23 | }
24 | #container div:nth-of-type(2){
25 | 	-webkit-order: -1; 
26 | 	-webkit-flex: 40%;
27 | }
28 | </style>
29 | <title>Flexbox</title>
30 | </head>
31 | 
32 | <body>
33 | 	<div id="container">
34 | 		<div class="box">one</div>
35 | 		<div class="box">two</div>
36 | 		<div class="box">three</div>
37 | 	</div>
38 | </body>
39 | </html>
40 | 
41 | 


--------------------------------------------------------------------------------
/files/31_generatetext.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}style:first-of-type {visibility:hidden;}style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
 9 | :root {background-color:#ccc; 
10 |   background-image:url(../css/page-bg.jpg);}
11 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
12 | li {color: black;}
13 | li li {color: green;}
14 | p, pre {font-size: 2em;padding: 20px; background-color: #ccc; border-radius: 15px;}
15 | p {}
16 | </style>
17 | 
18 | <style contenteditable>
19 | p:before {
20 | 	content: '';	
21 | }
22 | p:after {
23 | 	content: '';	
24 | }
25 | </style>
26 | <title>Generate Text</title>
27 | </head>
28 | 
29 | <body>
30 | 	<p contenteditable id="text"> are </p>
31 |     <pre contenteditable>&lt;p&gt; <span id="textchange" contenteditable tabindex>are</span> &lt;/p&gt;</pre>
32 | <small>Text is editable, and p has an id of text</small>    
33 |     <script>
34 | var curText = document.getElementById('textchange');
35 | var showText = document.getElementById('text');
36 | document.designMode = 'on';
37 | document.addEventListener('keyup', function () {
38 | 	console.log('worked');
39 |   	showText.innerHTML =  " " + curText.innerHTML + " ";
40 | });
41 | 
42 | 
43 | 
44 | 
45 | </script>
46 | </body>
47 | </html>
48 | 
49 | 


--------------------------------------------------------------------------------
/files/32_generatetext.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}style:first-of-type {visibility:hidden;}style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
 9 | :root {background-color:#ccc; 
10 |   background-image:url(../css/page-bg.jpg);}
11 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
12 | li {color: black;}
13 | li li {color: green;}
14 | p, pre {font-size: 2em;padding: 20px; background-color: #ccc; border-radius: 15px;}
15 | p {}
16 | </style>
17 | 
18 | <style contenteditable>
19 | p:before {
20 | 	content: '\2603\2603\2603';	
21 | }
22 | p:after {
23 | 	content: '\2042\2042\2042';
24 | 	color: #ffffff;	
25 | }
26 | </style>
27 | <title>Generate Text</title>
28 | </head>
29 | 
30 | <body>
31 | 	<p contenteditable id="text"> are </p>
32 |     <pre contenteditable>&lt;p&gt; <span id="textchange" contenteditable tabindex>are</span> &lt;/p&gt;</pre>
33 |  <small>Text is editable</small>    
34 |     <script>
35 | var curText = document.getElementById('textchange');
36 | var showText = document.getElementById('text');
37 | document.designMode = 'on';
38 | document.addEventListener('keyup', function () {
39 | 	console.log('worked');
40 |   	showText.innerHTML =  " " + curText.innerHTML + " ";
41 | });
42 | 
43 | 
44 | 
45 | 
46 | </script>
47 | </body>
48 | </html>
49 | 
50 | 


--------------------------------------------------------------------------------
/files/32b_generatetext.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
 9 | :root {background-color:#ccc; 
10 |   background-image:url(../css/page-bg.jpg);}
11 | p {font-family:Verdana, Geneva, sans-serif;}
12 | </style>
13 | 
14 | <style contenteditable>p{font-size:2em;}
15 | blockquote p:first-of-type::before, 
16 | blockquote p:last-of-type::after {
17 |   font-size: 2em;
18 |   color: #C7573A;
19 |   line-height: 0;
20 |   vertical-align: middle; 
21 | }
22 | blockquote p:first-child:before {
23 |   content: "\275D"; 
24 |   margin: 0 5px 0 -1.4ex;
25 | }
26 | blockquote p:last-child:after {
27 |   content: "\275E";
28 |   padding-left:5px;
29 | }
30 | </style>
31 | <title>Quotes</title>
32 | </head>
33 | 
34 | <body>
35 | 	<blockquote><p>With generated content you can created text effects.</p>
36 | 
37 | <p>We'll cover other uses next.</p></blockquote>
38 | </body>
39 | </html>
40 | 
41 | 


--------------------------------------------------------------------------------
/files/33_bubbles.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace;}
10 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
11 | li {color: black;}
12 | li li {color: green;}
13 | p, pre {font-size: 2em;padding: 20px; background-color: #ccc; border-radius: 15px;}
14 | p {}
15 | </style>
16 | 
17 | <style contenteditable>.quote {
18 | 	border-radius: 10px;
19 | 	position:relative;
20 | 	padding: 20px;
21 | 	background-color: red;
22 | 	color: white;
23 | 	float: left;
24 | }
25 | .quote:after {
26 | 	position:absolute;
27 | 	content: '';
28 | 	width: 0;
29 | 	height:0;
30 | 	border: 20px solid blue;
31 | 	border-color: red transparent transparent transparent;
32 | 	bottom: -39px;
33 | 	left: 20px;	
34 | }</style>
35 | <title>Generate Text</title>
36 | </head>
37 | 
38 | <body>
39 | <p class="quote">This is a quote</p>
40 | </body>
41 | </html>
42 | 
43 | 


--------------------------------------------------------------------------------
/files/34_bubbles.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | html, body, head, style {margin: 0; padding: 0;}
 9 | style:first-of-type {visibility:hidden;}
10 | style:last-of-type {padding: 0 20px 20px; font-size: 1.5em; white-space: pre; font-family: monospace;}
11 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
12 | li {color: black;}
13 | li li {color: green;}
14 | p, pre {font-size: 2em;padding: 0 20px 20px; background-color: #ccc; border-radius: 15px;}
15 | p {}
16 | </style>
17 | 
18 | <style contenteditable>.thought {
19 | 	border-radius: 50%;
20 | 	border: 5px solid blue;
21 | 	background-color: white;
22 | 	position:relative;
23 | 	padding: 40px;
24 | 	background-color: #fff;
25 | 	float: left;
26 | }
27 | .thought:before,
28 | .thought:after {
29 | 	content: '';
30 | 	border: 5px solid blue;
31 | 	border-radius: 50%;
32 | 	position:absolute;
33 | 	left: 20%;
34 | 	bottom: -30px;
35 | 	width: 40px;
36 | 	height: 40px;
37 | 	background-color: #fff;
38 | }
39 | .thought:after {
40 | 	height: 20px;
41 | 	width: 20px;
42 | 	bottom: -50px;
43 | 	left: 12%;	
44 | }
45 | </style>
46 | <title>Thought bubble</title>
47 | </head>
48 | 
49 | <body>
50 | <p class="thought">This is a thought bubble</p>
51 | </body>
52 | </html>
53 | 
54 | 


--------------------------------------------------------------------------------
/files/35_tooltip.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 | <html xmlns="http://www.w3.org/1999/xhtml">
 3 | <head>
 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 | <title>Untitled Document</title>
 6 | <style>
 7 | /* TOOL TIP */
 8 | p {
 9 | 	margin: 1em;
10 | 	font-size: 30px;
11 | 	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
12 | }
13 | p [data-tooltip="true"] {
14 | 	border-bottom: 1px solid;
15 | 	text-decoration:none;
16 | 	line-height:1;
17 | 	display:inline;
18 | 	z-index: 0;
19 | }
20 | p [data-tooltip="true"]:hover {	
21 | 	position: relative;
22 | 	}
23 | p [data-tooltip="true"]:hover:before {
24 | 	content: attr(title);
25 | 	position: absolute; 
26 | 	top: 45px;
27 | 	left: 0;
28 | 	background-color: #C7573A;
29 | 	color: white;
30 | 	max-width: 10em;
31 | 	min-width: 5em;
32 | 	font-style: normal;
33 | 	padding: 5px;
34 | 	border-radius: 10px;
35 | 	text-align:center;
36 | 	z-index: 100;
37 | }
38 | p [data-tooltip="true"]:hover:after {
39 | 	content: "";
40 | 	position:absolute;
41 | 	bottom: -10px;
42 | 	border: 15px solid;
43 | 	position: absolute; left: 20px;
44 | 	border-color:  transparent transparent #C7573A ; 	
45 | }
46 | </style>
47 | </head>
48 | 
49 | <body>
50 | <p>In this section you have learned the general idea of using generated content to create effects and / or to provide additional information.  Try hovering over me to find out how awesome <i title="Generated Content Rocks my world" data-tooltip="true">generated content</i> can be.</p>
51 |      <p>Open up a text editor and try creating a <i title="'Cause tool tips are awesome" data-tooltip="true">tooltip</i> without looking at the code. But, if you must, the code is attached, or you can check out your web inspector.</p>
52 |      <p style="margin-bottom: 50px;">Here is <a title="View source for solution" data-tooltip="true" href="files/35_tooltip.html" target="play">one solution</a></p>
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/files/40_supports.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; background-color: rgba(255,255,255,0.5);}
10 | html {min-height:100%;}
11 | </style>
12 | 
13 | <style contenteditable> 
14 | @media screen and (-webkit-animation){
15 | 	 :root {background-color: green;}
16 |  }
17 | </style>
18 | <title>@supports</title>
19 | </head>
20 | 
21 | <body>
22 | 	
23 | </body>
24 | </html>
25 | 
26 | 


--------------------------------------------------------------------------------
/files/72_boxshadow.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace; position:relative; top: -60px;}
10 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
11 | li {color: black;}
12 | :root {background-color:#ccc; 
13 |   background-image:url(../css/page-bg.jpg);}
14 | p {font-family:Verdana, Geneva, sans-serif; font-size:1.2em;
15 | 	margin: 60px 60px 140px 60px; padding:20px; text-align:center;}
16 | 
17 | </style>
18 | 
19 | <style contenteditable>.rainbow {
20 |   box-shadow: 
21 |     0 0 0 10px red,
22 |     0 0 0 20px orange,
23 |     0 0 0 30px yellow,
24 |     0 0 0 40px green,
25 |     0 0 0 50px blue,
26 |     0 0 0 60px purple;
27 | }
28 | .borders {
29 |   box-shadow: 
30 |     0 0 0 20px purple,
31 |     0px 0px 10px 25px rgba(255,255,255,0.5),
32 |     0 0 0 60px purple;
33 | }
34 | </style>
35 | <title>box-shadow as borders</title>
36 | </head>
37 | 
38 | <body>
39 | 	<p class="rainbow">This has no borders</p>
40 | 	<p class="borders">This has no borders</p>
41 | </body>
42 | </html>
43 | 
44 | 


--------------------------------------------------------------------------------
/files/72a_boxshadow.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace; position:relative; top: -60px;}
10 | ol {font-family:Verdana, Geneva, sans-serif; font-size:1.2em}
11 | li {color: black;}
12 | :root {background-color:#ccc; 
13 |   background-image:url(../css/page-bg.jpg);}
14 | p {font-family:Verdana, Geneva, sans-serif; font-size:1.2em;
15 | 	margin: 60px 60px 140px 60px; padding:20px; text-align:center;}
16 | 
17 | </style>
18 | 
19 | <style contenteditable>.rainbow {
20 |   box-shadow: 
21 |     0 0 0 10px red,
22 |     0 0 0 20px orange,
23 |     0 0 0 30px yellow,
24 |     0 0 0 40px green,
25 |     0 0 0 50px blue,
26 |     0 0 0 60px purple;
27 | }
28 | </style>
29 | <title>box-shadow as borders</title>
30 | </head>
31 | 
32 | <body>
33 | 	<p class="rainbow">This has no borders</p>
34 | </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/files/80_bgposition.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {display:none;}
 9 | * {pointer-events: none;}
10 | style:last-of-type {position: relative; top: 100px;padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace; pointer-events: auto;}
11 | div {
12 |     background-image: 
13 |     -webkit-linear-gradient(top,
14 |         #C7573A 2%,
15 |         transparent  2%,
16 |         transparent  49%,
17 |         #C7573A 49%,
18 |         #C7573A 51%, 
19 |         transparent 51%,
20 |         transparent  98%,
21 |         #C7573A 98%),
22 |     -webkit-linear-gradient(left,
23 |         #C7573A 2%,
24 |         transparent  2%,
25 |         transparent  49%,
26 |         #C7573A 49%,
27 |         #C7573A 51%, 
28 |         transparent 51%,
29 |         transparent  98%,
30 |         #C7573A 98%);    
31 |     background-image: 
32 |     linear-gradient(to top,
33 |         #C7573A 2%,
34 |         transparent  2%,
35 |         transparent  49%,
36 |         #C7573A 49%,
37 |         #C7573A 51%, 
38 |         transparent 51%,
39 |         transparent  98%,
40 |         #C7573A 98%),
41 |     linear-gradient(to left,
42 |         #C7573A 2%,
43 |         transparent  2%,
44 |         transparent  49%,
45 |         #C7573A 49%,
46 |         #C7573A 51%, 
47 |         transparent 51%,
48 |         transparent  98%,
49 |         #C7573A 98%);
50 |     background-size: 95px 95px;
51 |     background-repeat: no-repeat;
52 |     height: 100%; width: 100%;
53 |     min-height: 610px;
54 |         
55 |  }
56 |  div {border: 1px solid #C7573A; position: absolute; bottom: 0; width:90%; margin: 10px 40px; height: 300px;}
57 |  div:after {content: ''; position: absolute; height: 8px; width: 8px; background-color: #C7573A; margin-top: -4px; margin-left: -4px;}
58 | </style>
59 | 
60 | <style contenteditable>div {background-position: 75% 75%;}
61 | div:after {top: 75%; left:75%;}</style>
62 | <title>Background-Position</title>
63 | </head>
64 | 
65 | <body>
66 | 	<div></div>
67 | </body>
68 | </html>
69 | 
70 | 


--------------------------------------------------------------------------------
/files/81_bgposition.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | body {
11 |     background-image: -webkit-radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
12 |     background-image: -moz-radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
13 |     background-image: -ms-radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
14 |     background-image: -o-radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
15 |     background-image: radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
16 |     background-size: 95px 95px;
17 |     background-repeat: no-repeat;
18 |     height: 100%; width: 100%;
19 |     min-height: 310px;
20 |         
21 |  }
22 | </style>
23 | 
24 | <style contenteditable>
25 | body {
26 |     background-position: right 50px bottom 50px;
27 | }
28 | </style>
29 | <title>CSS Selector Test</title>
30 | </head>
31 | 
32 | <body>
33 | 	
34 | </body>
35 | </html>
36 | 
37 | 


--------------------------------------------------------------------------------
/files/81b_bgposition.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | div {
11 |     background-image: -webkit-radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
12 |     background-image: -moz-radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
13 |     background-image: -ms-radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
14 |     background-image: -o-radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
15 |     background-image: radial-gradient(50% 50%, circle closest-side, transparent 70%, #C7573A 70%,#C7573A 85%,transparent  85% );
16 |     background-size: 95px 95px;
17 |     background-repeat: no-repeat;
18 |     height:200px; width: 200px;
19 |     margin: auto;}
20 | body {
21 |     height: 100%; width: 100%;
22 |     min-height: 310px;
23 |         
24 |  }
25 | </style>
26 | 
27 | <style contenteditable>
28 | div {
29 |     border: 20px dashed goldenrod;
30 |     border-radius: 20px;
31 |     background-origin: border-box;
32 |     background-clip: border-box;
33 | }
34 | </style>
35 | <title>CSS Selector Test</title>
36 | </head>
37 | 
38 | <body>
39 | 	<div></div>
40 | </body>
41 | </html>
42 | 
43 | 


--------------------------------------------------------------------------------
/files/82_borderradius.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | div {text-align: center;
11 |     margin: 100px auto;
12 |     border: 20px solid green; 
13 |     padding: 40px 0; 
14 |     -moz-box-sizing: border-box;
15 |     box-sizing: border-box;
16 |     border-color: white black;
17 | }
18 | </style>
19 | 
20 | <style contenteditable>div { 
21 |     height: 200px; 
22 |     width: 200px;
23 |     border-radius: 40% / 5% 50%;
24 | }</style>
25 | <title>CSS Border Radius</title>
26 | </head>
27 | 
28 | <body>
29 | 	<div>This is a div</div>
30 | </body>
31 | </html>
32 | 
33 | 


--------------------------------------------------------------------------------
/files/83_longcat.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; white-space:pre; border-radius: 10px; border: 3px solid #aaa; background-color:#dedede; margin: 20px auto; width: 80%; font-family:"Courier New", Courier, monospace;}
10 | div {
11 |     padding-top: 60px;
12 |     white-space: nowrap;
13 |     min-width: 80px;
14 | }
15 | </style>
16 | 
17 | <style contenteditable>div {
18 |     border: solid transparent;
19 |     border-width: 48px 137px 68px 84px;
20 | -webkit-border-image: url(http://i1275.photobucket.com/albums/y446/estellevw/longcat_zps8f994bf4.jpg) 48 137 68 84 stretch;
21 | border-image: url(http://i1275.photobucket.com/albums/y446/estellevw/longcat_zps8f994bf4.jpg) 48 137 68 84 fill stretch;
22 | }</style>
23 | <title>CSS Border Image</title>
24 | </head>
25 | 
26 | <body>
27 | 	<div>This is a very long cat</div>
28 | </body>
29 | </html>
30 | 
31 | 


--------------------------------------------------------------------------------
/files/91_basic.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; background-color: rgba(255,255,255,0.5);}
10 | html {min-height:100%;}
11 | </style>
12 | 
13 | <style contenteditable> 
14 | html {
15 | 	 background: linear-gradient(brown, khaki);
16 |  }
17 | </style>
18 | <title>Basic Gradients</title>
19 | </head>
20 | 
21 | <body>
22 | 	
23 | </body>
24 | <script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
25 | </html>
26 | 
27 | 


--------------------------------------------------------------------------------
/files/92_basic.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; background-color: rgba(255,255,255,0.5);}
10 | html {min-height:100%;}
11 | </style>
12 | 
13 | <style contenteditable> 
14 | html {
15 | 	 background: linear-gradient(brown, khaki);
16 |  }
17 | </style>
18 | <title>Basic Gradients</title>
19 | </head>
20 | 
21 | <body>
22 | 	
23 | </body>
24 | <script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
25 | </html>
26 | 
27 | 


--------------------------------------------------------------------------------
/files/92_different_angles.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE HTML>
 3 | <html>
 4 | <head>
 5 | <style>
 6 | head, style {display: block;}
 7 | [contenteditable] {-webkit-user-modify: read-write-plaintext-only;}
 8 | style:first-of-type {visibility:hidden;}
 9 | style:last-of-type {padding: 20px; font-size: 1.5em; white-space: pre; font-family: monospace; background-color: rgba(255,255,255,0.5);}
10 | html {min-height:100%;}
11 | </style>
12 | 
13 | <style contenteditable> 
14 | .degrees {
15 | 	 background: linear-gradient(brown, khaki);
16 |  }
17 | .keyterms
18 | </style>
19 | <title>Basic Gradients</title>
20 | </head>
21 | 
22 | <body>
23 | 	
24 | </body>
25 | <script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
26 | </html>
27 | 
28 | 


--------------------------------------------------------------------------------
/icons/browser_logos-64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estelle/CSS-Workshop/3185af4b4513a87188cf682b403d70ee665ecf8b/icons/browser_logos-64.png


--------------------------------------------------------------------------------
/icons/new.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estelle/CSS-Workshop/3185af4b4513a87188cf682b403d70ee665ecf8b/icons/new.gif


--------------------------------------------------------------------------------
/icons/oreilly.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estelle/CSS-Workshop/3185af4b4513a87188cf682b403d70ee665ecf8b/icons/oreilly.gif


--------------------------------------------------------------------------------
/img/fish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estelle/CSS-Workshop/3185af4b4513a87188cf682b403d70ee665ecf8b/img/fish.png


--------------------------------------------------------------------------------
/img/googlefonts.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estelle/CSS-Workshop/3185af4b4513a87188cf682b403d70ee665ecf8b/img/googlefonts.gif


--------------------------------------------------------------------------------
/img/plankton.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estelle/CSS-Workshop/3185af4b4513a87188cf682b403d70ee665ecf8b/img/plankton.png


--------------------------------------------------------------------------------
/img/shark.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/estelle/CSS-Workshop/3185af4b4513a87188cf682b403d70ee665ecf8b/img/shark.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <!--[if gte IE 9]>
  5 |       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <![endif]-->
  7 |     <!--[if lt IE 9]>
  8 |       <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
  9 |     <![endif]-->
 10 |     <meta charset="utf-8" />
 11 |     <title>CSS3: From Knowledgable to Ninja</title>
 12 |      <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
 13 |    <link rel="stylesheet" href="css/screen.css" media="projection, screen"/>
 14 |    <link rel="stylesheet" href="css/print.css" media="print"/>
 15 |    <style>
 16 | 
 17 | body, #presentation, #slides {
 18 | 	-webkit-transition: all 1.5s linear;
 19 | 	-moz-transition: all 1.5s linear;
 20 | 	-ms-transition: all 1.5s linear;
 21 | 	-o-transition: all 1.5s linear;
 22 | 	transition: all 1.5s linear;
 23 | }
 24 | body {counter-reset: sections;}
 25 | header h1.sectiontitle:before{
 26 | 	content: "Part " counter(sections) ": ";
 27 | 	counter-increment: sections;
 28 | }
 29 | 
 30 | 
 31 | .completed:after{
 32 |   content: '✔';
 33 |   position: absolute; top: 40px; right: 40px;
 34 |   color: green;
 35 |   font-size: 96px;
 36 |   border: 10px solid green;
 37 |   border-radius: 50%;
 38 |   width: 1em; height: 1em;
 39 |   line-height: 1em;
 40 |   text-align: center;
 41 | }
 42 | 
 43 | /* brown: C7573A;*/
 44 |    </style>
 45 | 
 46 |   </head>
 47 |   <body>
 48 | 
 49 |   <div id="topinfo">
 50 | 
 51 |   </div>
 52 |   <header>
 53 |     <nav>
 54 |         <ul>
 55 |             <li class="button cancel" id="back">Back</li>
 56 |             <li class="button done" id="next">Next</li>
 57 |         </ul>
 58 |     </nav>
 59 | </header>
 60 |   <div id="info">
 61 |     <p>
 62 |     <span class="key">&rarr;</span> and <span class="key">&rarr;</span> to change slides.
 63 |     <span class="key">2</span> for comments. <a href="http://estelle.github.com/CSS-Workshop">estelle.github.com/CSS-Workshop</a>
 64 |     </p>
 65 |   </div>
 66 | 
 67 |   <div id="presentation">
 68 | 
 69 |    <div id="presentation-counter"></div>
 70 | 
 71 |    <div id="slides">
 72 | 
 73 | 
 74 | <div class="slide intro">
 75 |     <header>
 76 |     	<h1>CSS: from Knowledgable to Ninja</h1>
 77 |     </header>
 78 |      <section class="intro">
 79 | 
 80 | <p>Estelle Weyl<br>
 81 | <a href="http://www.twitter.com/estellevw">@estellevw</a>
 82 | <br>
 83 | <a href="http://www.standardista.com">www.standardista.com</a></p>
 84 | <p><a href="http://estelle.github.com/CSS-Workshop">estelle.github.com/CSS-Workshop</a></p>
 85 |      </section>
 86 |     </div>
 87 | 
 88 | 
 89 |  <div class="slide object">
 90 |   <object data="http://meiert.com/en/indices/css-properties/"></object>
 91 |   <a href="http://meiert.com/en/indices/css-properties/" class="objectlink" target="_new">Visit Site</a>
 92 |  </div>
 93 | 
 94 |  <div class="slide preintro">
 95 |  <pre contenteditable>selectorA {
 96 |    property1: value1;
 97 |    property2: value2;
 98 | }
 99 | 
100 | selectorB {
101 |    property1: value3;
102 |    property2: value4;
103 | }</pre>
104 |  </div>
105 | 
106 | 
107 | 
108 |   <div class="slide preintro">
109 |  <pre contenteditable>selector:pseudo-class::pseudo-element {
110 |     -vendor-property: value;
111 | }
112 | 
113 | selector[attribute],
114 | selector ~ relation {
115 |     property: -vendor-value;
116 |     -vendor-property: -vendor-value;
117 |     -vendor-property: weirdsyntax;
118 | }</pre>
119 |  </div>
120 | 
121 | 
122 |  <div class="slide preintro">
123 |  <pre contenteditable>@at-rule {
124 |     property: value;
125 |  }
126 | 
127 | @at-rule {
128 |     selector {
129 |     	property: value;
130 |     }
131 |     selector2 {
132 |     	property: value;
133 |     }
134 |  }</pre>
135 |  </div>
136 | 
137 | 
138 | 
139 | <!-- OUTLINE -->
140 | <div class="slide normal">
141 |  <header><h1>Course Outline</h1></header>
142 |  <section class="content">
143 |   <ol>
144 |   	<li><a href="../selectors/">Selectors</a></li>
145 |     <li><a href="part_02_specificity.html">Specificity</a></li>
146 |     <li><a href="part_03_generated.html">Generated Content</a></li>
147 |     <li><a href="part_04_media.html">Media Queries</a></li>
148 |     <li><a href="part_04_media.html#slide10">Debugging</a></li>
149 |     <li><a href="part_06_colors.html">Colors &amp; Transparency </a></li>
150 |     <li><a href="part_07_fonts.html">Fonts / Typography </a></li>
151 |     <li><a href="part_08_backgrounds.html">Backgrounds &amp; Borders </a></li>
152 |     <li><a href="../gradients/index.html">Gradients</a></li>
153 |     <li><a href="part_10_transforms.html">Transforms</a></li>
154 |     <li><a href="</dd>
155 | ../animation/index.html">Transitions &amp; Animation</a></li>
156 | <li><a href="part_12_features.html">Other Features</a></li>
157 | </ol>
158 |  </section>
159 | </div>
160 | 
161 | 
162 | <!-- Intro to exercises -->
163 | <div class="slide normal">
164 |      <header><h1>Slide Notes/Exercise Files</h1></header>
165 |      <section class="content">
166 |   		<p>Many exercise files open in a separate window. When they do, they will all open in the same seperate window</p>
167 |       <p>Other exercise files are incorporated in the deck. If the slide is grey or reads "try this", you can edit the CSS in the head to impact the rest of the slide.<p>
168 |       <p>If you are unable to move between slides, click anywhere OUTSIDE the slide, and try again</p>
169 |       <p>To take notes, click on #4.</p>
170 |      </section>
171 |     </div>
172 | 
173 | 
174 | 
175 | <div class="slide">
176 |  <header><h1 class="sectiontitle"><a href="../selectors/" target="deck">Selectors</a></h1></header>
177 | <section class="content">
178 |         <ul style="-webkit-column-count:2;" class="completed">
179 |             <li>Basic Selectors</li>
180 |             <li>Relational selectors </li>
181 |             <li>Selector list </li>
182 |             <li>selector support grid </li>
183 |             <li>Intro to Attribute selectors</li>
184 |             <li> Older attribute selectors </li>
185 |             <li>CSS3 Attribute Selectors  </li>
186 |             <li>Attribute Selectors Examples</li>
187 |             <li>Using attribute selectors </li>
188 |             <li>UI pseudo-classes </li>
189 |             <li>Form related UI pseudo-classes</li>
190 |             <li>UI selectors </li>
191 |             <li>List of Structural selectors</li>
192 |             <li>:root</li>
193 |             <li>First, last, &amp; only </li>
194 |             <li>nth pseudo-classes</li>
195 |             <li>Structural Selectors </li>
196 |             <li>:empty pseudo-class </li>
197 |             <li><strong>:not</strong> -  Negation pseudo-class</li>
198 |             <li>lang, target, anchor links</li>
199 |             <li>Pseudo elements </li>
200 |             <li>selectors tips </li>
201 |          </ul>
202 |      </section>
203 |  </div>
204 | 
205 | <div class="slide">
206 |     <header><h1 class="sectiontitle"><a href="part_02_specificity.html" target="deck">Specificity</a></h1></header>
207 |     <section class="content">
208 |         <ul>
209 |             <li>Understanding Specificity</li>
210 |             <li>Specificity PDF </li>
211 |             <li>Specificity Notes</li>
212 |         </ul>
213 |     </section>
214 | </div>
215 | 
216 | <div class="slide">
217 |      <header><h1 class="sectiontitle"><a href="part_03_generated.html" target="deck">Generated Content</a></h1></header>
218 |     <section class="content">
219 |         <ul>
220 |             <li>before and ::after</li>
221 |             <li>Understanding Generated Content</li>
222 |             <li>Faux Elements</li>
223 |             <li>Syntax</li>
224 |             <li>Special Character</li>
225 |             <li>Simple Use Cases</li>
226 |             <li>Informative Links</li>
227 |             <li>Quote &amp; Thought bubbles</li>
228 |             <li>shapes</li>
229 |             <li>Other ideas</li>
230 |             <li>Exercise</li>
231 |         </ul>
232 |     </section>
233 | </div>
234 | 
235 | <div class="slide">
236 |     <header><h1 class="sectiontitle"><a href="part_04_media.html" target="deck">Media Queries</a></h1>
237 |     </header>
238 |     <section class="content">
239 |         <ul>
240 |             <li>Syntax</li>
241 |             <li>Old Media Queries</li>
242 |             <li>New Media Queries</li>
243 |             <li>More Media Query Tidbits</li>
244 |             <li>In action</li>
245 |             <li> mediaqueri.es</li>
246 |         </ul>
247 |     </section>
248 | </div>
249 | 
250 | 
251 | <div class="slide">
252 |     <header><h1 class="sectiontitle"><a href="part_04_media.html#slide10" target="deck">Debugging</a></h1></header>
253 |     <section class="content">
254 |         <ul>
255 |             <li>Debuggers</li>
256 |             <li>Pseudo Elements / Shadow DOM</li>
257 |         </ul>
258 |     </section>
259 | </div>
260 | 
261 | 
262 | <div class="slide">
263 |     <header><h1 class="sectiontitle"><a href="part_06_colors.html" target="deck">Colors</a></h1></header>
264 |     <section class="content">
265 |         <ul>
266 |             <li>Color formats</li>
267 |             <li>Color Keywords</li>
268 |             <li>RGB / RGBA</li>
269 |             <li>HSL / HSLA</li>
270 |             <li>HSLA / RGBA  / HEX conversion</li>
271 |             <li>Opacity</li>
272 |             <li>AlphaTransparency</li>
273 |             <li>AlphaTransparency Tips</li>
274 |             <li>Color Tips</li>
275 |             <li>Depracated UI Keyterm Colors</li>
276 |             <li>-moz-appearance / -webkit-appearance</li>
277 |         </ul>
278 |     </section>
279 | </div>
280 | 
281 | 
282 | 
283 | <div class="slide normal">
284 |     <header><h1 class="sectiontitle"><a href="part_07_fonts.html" target="deck">Fonts</a></h1></header>
285 |     <section class="content">
286 |         <ul>
287 |             <li>@font-face
288 |             	<ul>
289 |                 	<li>Syntax</li>
290 |                 	<li>Support</li>
291 |                 	<li>Gotchas</li>
292 |                 </ul>
293 |             </li>
294 |             <li>Font Resources</li>
295 |             <li>Text Shadow</li>
296 |             <li>Box-shadow</li>
297 |             <li>Text-stroke</li>
298 |             <li>W3C Text Module</li>
299 |         </ul>
300 |     </section>
301 | </div>
302 | 
303 | 
304 | <div class="slide normal">
305 |     <header><h1 class="sectiontitle"><a href="part_08_backgrounds.html" target="deck">Backgrounds and Borders</a></h1></header>
306 |     <section class="content">
307 |          <ul style="float: left; width:50%;">
308 |     <li>Background properties
309 |       <ul>
310 |         <li>background-color</li>
311 |         <li>background-image'</li>
312 |         <li>background-repeat</li>
313 |         <li>background-attachment</li>
314 |         <li>background-position</li>
315 |         <li>background-clip</li>
316 |         <li>background-origin</li>
317 |         <li>background-size</li>
318 |         <li>background shorthand</li>
319 |       </ul>
320 |     </li>
321 |     </ul>
322 | 
323 |          <ul style="float: left">
324 |     <li>Border properties
325 |       <ul>
326 |         <li>border-color</li>
327 |         <li>border-style</li>
328 |         <li>border-width</li>
329 |         <li>border shorthand</li>
330 |         <li>border-radius </li>
331 |       </ul>
332 |     </li>
333 |     <li>Border Images
334 |       <ul>
335 |         <li>border-image-source</li>
336 |         <li>border-image-slice</li>
337 |         <li>border-image-width</li>
338 |         <li>border-image-outset</li>
339 |         <li>border-image-repea</li>
340 |         <li>border-image shorthand</li>
341 |       </ul>
342 |     </li>
343 |   </ul>
344 |     </section>
345 | </div>
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | <div class="slide normal">
354 |      <header><h1 class="sectiontitle"><a href="../gradients/index.html">Gradients</a></h1></header>
355 |      <section class="content">
356 |   <ul>
357 |   	<li>Types of Gradients</li>
358 |     <li>Angles &amp; Keyterm directions</li>
359 |     <li>Color Stops</li>
360 |     <li>Linear Gradients</li>
361 |     <li>Angled patterns</li>
362 |     <li>with Background-size</li>
363 |     <li>Radial Gradients</li>
364 |     </ul>
365 |      </section>
366 |     </div>
367 | 
368 | 
369 |  <div class="slide normal">
370 |      <header><h1 class="sectiontitle"><a href="part_10_transforms.html">Tranforms</a></h1></header>
371 |      <section class="content">
372 |      <ul>
373 |      	<li>2D Transform Functions</li>
374 |         <li>3D Transform Functions</li>
375 |         <li>Transform Related Properties</li>
376 |         <li>Multiple Transforms</li>
377 |         </ul>
378 |      </section>
379 |  </div>
380 | 
381 | 
382 |   <div class="slide normal">
383 |      <header><h1 class="sectiontitle"><a href="part_11_animations.html">Transitions &amp; Animations</a></h1></header>
384 |      <section class="content">
385 |      <ul>
386 |      	<li>Transtion Propertes</li>
387 |         <li>What can be transitioned?</li>
388 |         <li>Animation Keyframes</li>
389 |         <li>Animation Properties</li>
390 |      </ul>
391 |      </section>
392 |  </div>
393 | 
394 |   <div class="slide normal">
395 |      <header><h1 class="sectiontitle"><a href="part_12_features.html">Other Features</a></h1></header>
396 |      <section class="content">
397 |      <ul>
398 |      	<li>Columns</li>
399 |         <li>Box Sizing</li>
400 |         <li>CSS Regions</li>
401 |         <li>FlexBox &amp; Grids</li>
402 |         <li>Cursors</li>
403 |         <li>Text Overflow</li>
404 |         <li>Word Wrap</li>
405 |         <li>calc()</li>
406 |         <li>rem</li>
407 |         <li>Pointer Events</li>
408 |         <li>-webkit-user-modify</li>
409 | 
410 |      </ul>
411 |      </section>
412 |  </div>
413 | 
414 | <div class="slide intro">
415 |   <header><h1><a href="../selectors/">Get Started</a></h1></header>
416 |     <section class="content">
417 |         <h1><a href="../selectors/">Next ➹</a></h1>
418 |     </section>
419 | </div>
420 | 
421 |   </div>
422 |   <script src="slides.js"></script>
423 |   </body>
424 | </html>
425 | 


--------------------------------------------------------------------------------
/part_01_selectors.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html> 
  3 |   <head> 
  4 |     <!--[if gte IE 9]>
  5 |       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <![endif]--> 
  7 |     <!--[if lt IE 9]>
  8 |       <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
  9 |     <![endif]--> 
 10 |     <meta charset="utf-8" />
 11 |     <title>CSS3: From Knowledgable to Ninja</title>
 12 |     <!--<script>
 13 |     document.location.href = '../selectors/index.html'
 14 |    </script>-->
 15 |   <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>   <link rel="stylesheet" href="css/screen.css" media="projection, screen"/>  
 16 |    <link rel="stylesheet" href="css/print.css" media="print"/>
 17 |    <style>
 18 | 
 19 | body, #presentation, #slides {
 20 | 	-webkit-transition: all 1.5s linear;
 21 | 	-moz-transition: all 1.5s linear;
 22 | 	-ms-transition: all 1.5s linear;
 23 | 	-o-transition: all 1.5s linear;
 24 | 	transition: all 1.5s linear;	
 25 | }
 26 | 
 27 |   /* CSS for Structural Selector Slide */
 28 | .structural tr:first-child,
 29 | .structural tr:last-child {
 30 |   font-weight: bold;
 31 | }
 32 | .structural tr:nth-child(even) {
 33 |   background-color: #CCC;
 34 | }
 35 | .structural tr:nth-child(3) {
 36 |   color: #CCC;
 37 | }
 38 | .structural tr:first-of-type,
 39 | .structural tr:last-of-type{
 40 |   text-decoration:line-through;
 41 | }
 42 | .structural tr:nth-of-type(odd) {
 43 |   background-color: #FFF;
 44 | }
 45 | .structural tr:nth-of-type(4n) {
 46 |   color: #C61800;
 47 | }
 48 | .structural tr:nth-of-type(3n-1) {
 49 |   font-style: italic;
 50 | }
 51 | /* SELECTION SLIDE */
 52 |  .thisSlide *::selection {
 53 |     	background-color: #C61800;
 54 |         color: #ffffff;
 55 |     }
 56 | p.firstletter {width: 400px;
 57 |  font-size: 24px;
 58 |  font-family:Georgia, "Times New Roman", Times, serif;
 59 |  margin: 0 20px 20px;
 60 | }
 61 | .firstletter::first-letter {
 62 | 	position: relative;
 63 | 	top: 8px;
 64 | 	float: left;
 65 | 	font-size: 3em;
 66 | 	line-height: 1;
 67 | 	color: #C7573A;
 68 | 	padding: 0 4px 2px 0;
 69 | 	font-weight: bold;		
 70 | }
 71 | .count li {display: inline-block; text-align:center;}
 72 | .count li:nth-of-type(even) {background-color: white;}
 73 | .count li:nth-of-type(odd){background-color: #C7573A;}
 74 | .count li:first-of-type:last-of-type{width: 100%;}
 75 | .count li:nth-of-type(1):nth-last-of-type(2),
 76 | .count li:nth-of-type(2):nth-last-of-type(1){width: 50%;}
 77 | .count li:nth-of-type(1):nth-last-of-type(3),
 78 | .count li:nth-of-type(3):nth-last-of-type(1),
 79 | .count li:nth-of-type(2):nth-last-of-type(2){width: 33.33%;}
 80 | .count li:nth-of-type(1):nth-last-of-type(4),
 81 | .count li:nth-of-type(2):nth-last-of-type(3),
 82 | .count li:nth-of-type(3):nth-last-of-type(2),
 83 | .count li:nth-of-type(4):nth-last-of-type(1){width: 25%;}
 84 | 
 85 | 
 86 | input[type=checkbox]:checked + label {
 87 |   color: red;
 88 | }
 89 | input:valid { border: 1px solid green;}
 90 | input:invalid { border: 1px solid red;}
 91 | input:required {border-width: 5px;}
 92 | input:optional {border-width: 10px;}
 93 | input:out-of-range { background-color: pink;}
 94 | input:in-range { background-color:lightgreen;}
 95 | 
 96 | /* brown: C7573A;*/
 97 |    </style>  
 98 |     
 99 |   </head> 
100 |   <body> 
101 |   
102 |   <div id="topinfo">
103 | 
104 |   </div>
105 |   
106 |   <div id="info">
107 |     <p>
108 |     <span class="key">&rarr;</span> and <span class="key">&rarr;</span> to change slides. 
109 |     <span class="key">2</span> for comments. <a href="http://estelle.github.com/CSS-Workshop">estelle.github.com/CSS-Workshop</a>
110 |     </p>
111 |   </div>
112 |   
113 |   <div id="presentation">
114 |   
115 |    <div id="presentation-counter"></div>
116 |       
117 |    <div id="slides">
118 |    
119 | <!-- Estelle -->    
120 | <div class="slide normal">
121 |     <header> 
122 |     	<h1 style="font-size:200%;">CSS: from Knowledgable to Ninja</h1> 
123 |     </header>
124 |      <section class="content"> 
125 |      <p> ◈ Estelle Weyl</p>
126 |   <p> ◈ <a href="http://www.twitter.com/estellevw">@estellevw</a></p><p> ◈ <a href="http://www.standardista.com">www.standardista.com</a></p>
127 |      </section>
128 |     </div>
129 |   
130 | <!-- OUTLINE -->
131 | <div class="slide normal"> 
132 |  <header><h1>Course Outline</h1></header> 
133 |  <section class="content"> 
134 |   <ol><li><a href="../selectors/">Selectors</a></li>
135 |     <li><a href="part_02_specificity.html">Specificity</a></li>
136 |     <li><a href="part_03_generated.html">Generated Content</a></li>
137 |     <li><a href="part_04_media.html">Media Queries</a></li>
138 |     <li><a href="part_04_media.html#slide10">Debugging</a></li>
139 |     <li><a href="part_06_colors.html">Colors &amp; Transparency </a></li>
140 |     <li><a href="part_07_fonts.html">Fonts / Typography </a></li>
141 |     <li><a href="part_08_backgrounds.html">Backgrounds &amp; Borders </a></li>
142 |     <li><a href="../gradients/">Gradients</a></li>
143 |     <li><a href="part_10_transforms.html">Transforms</a></li>
144 |     <li><a href="../animation/">Transitions &amp; Animation</a></li>
145 | <li><a href="part_12_features.html">Other Features</a></li>
146 | </ol>
147 |  </section>
148 | </div>
149 |    
150 | <!-- Basic Selectors-->
151 | <div class="slide normal light" id="slcElement"> 
152 |      <header><h1>Basic Selectors</h1></header> 
153 |      <section class="content"> 
154 |      <pre contenteditable style="font-size:100%; line-height:1.5">&lt;ul&gt; 
155 |  &lt;li id=&quot;myID&quot; class=&quot;myClass&quot;&gt;item 1&lt;/li&gt;
156 |  &lt;li class=&quot;myClass&quot;&gt;item 2&lt;/li&gt;    
157 |  &lt;li&gt;item 3&lt;/li&gt;
158 | &lt;/ul&gt; </pre>
159 | <dl class="inline">
160 | <dt><b class="imp">#</b>myID</dt>
161 | <dd>ID</dd>
162 | <dt><b class="imp">.</b>myClass</dt>
163 | <dd>class</dd>
164 | <dt class="imp">li</dt>
165 | <dd>tag name</dd>
166 | </dl>
167 |      </section>
168 |  </div>
169 |     
170 | <!-- Relational selectors -->
171 | <div class="slide normal" id="slcRelational"> 
172 |      <header><h1>Relational selectors</h1></header> 
173 |      <section class="content"> 
174 |      <div class="ex right">
175 |      	<ol>
176 |      	<li>item 1</li>
177 |      	<li>item 2</li>
178 |      	<li>item 3
179 |         	<ul>
180 |      		<li>item a</li>
181 |      		<li>item b</li>
182 |      		<li>item c</li>
183 |             </ul>
184 |         </li>
185 |      	<li>item 4</li>
186 |      	<li>item 5</li>
187 |      	<li>item 6</li>
188 |      	<li>item 7</li>
189 |         </ol>
190 |         </div>
191 | <dl>
192 |   <dt>ul li</dt>
193 |   <dd>descendant selector<br />
194 |     matches nested &lt;li&gt;s</dd>
195 |   <dt>ol &gt; li</dt>
196 |   <dd><em>child selector</em> <br />
197 |     matches &lt;li&gt;s in &lt;ol&gt; but not nested &lt;ul&gt;</dd>
198 |   <dt>li.myClass + li</dt>
199 |   <dd><em>adjacent sibling</em> </dd>
200 |   <dt><strong class="new">NEW  </strong><span style="background-color:#eee; padding:3px 8px; position:relative; left: 20px; margin-left: -20px;">(IE7+)</span><br />
201 |     li.myClass ~ li</dt>
202 |   <dd>
203 |     <em>general sibling	selector</em><br />
204 |     matches later siblings, but not nested.</dd>
205 | </dl>
206 | <p><a href="files/00_basic.html" target="play">Try it out</a></p>
207 |      </section>
208 |     </div> 
209 |     
210 |   
211 |   
212 | <!-- Selector list -->
213 | <div class="slide normal"> 
214 |      <header><h1>Lots 'o Selectors</h1></header> 
215 |      <section class="content"> 
216 |   
217 | <ul class="columns">
218 |   <li>*</li>
219 |   <li>E</li>
220 |   <li>.class</li>
221 |   <li>#id</li>
222 |   <li>E F</li>
223 |   <li>E &gt; F</li>
224 |   <li>E + F</li>
225 |   <li>E[attribute]</li>
226 |   <li>E[attribute=value]</li>
227 |   <li>E[attribute~=value]</li>
228 |   <li>E[attribute|=value]</li>
229 |   <li>:first-child</li>
230 |   <li>:lang()</li>
231 |   <li>:before</li>
232 |   <li>::before</li>
233 |   <li>::selection</li>
234 |   <li>:after</li>
235 |   <li>::after</li>
236 |   <li>:first-letter</li>
237 |   <li>::first-letter</li>
238 |   <li>:first-line</li>
239 |   <li>::first-line</li>
240 |   <li>E[attribute^=value]</li>
241 |   <li>E[attribute$=value]</li>
242 |   <li>E[attribute*=value]</li>
243 |   <li>E ~ F</li>
244 |   <li>:root</li>
245 |   <li>:last-child</li>
246 |   <li>:only-child</li>
247 |   <li>:nth-child()</li>
248 |   <li>:nth-last-child()</li>
249 |   <li>:first-of-type</li>
250 |   <li>:last-of-type</li>
251 |   <li>:only-of-type</li>
252 |   <li>:nth-of-type()</li>
253 |   <li>:nth-last-of-type()</li>
254 |   <li>:empty</li>
255 |   <li>:not()</li>
256 |   <li>:target</li>
257 |   <li>:enabled</li>
258 |   <li>:disabled</li>
259 |   <li>:checked</li>
260 |   <li>:indeterminate</li>
261 |   <li>:default</li>
262 |   <li>:valid</li>
263 |   <li>:invalid</li>
264 |   <li>:in-range</li>
265 |   <li>:out-of-range</li>
266 |   <li>:required</li>
267 |   <li>:optional</li>
268 |   <li>:read-only</li>
269 |   <li>:read-write</li>
270 | </ul>
271 |      </section>
272 |     </div>
273 |     
274 | <!-- Standardista: selector support grid -->   
275 | <div class="slide" style="padding: 0;"> 
276 |      <object data="http://www.standardista.com/css3/css3-selector-browser-support/" style="width:100%; height:100%;"></object> </div>
277 |     
278 |     
279 |   
280 | <!-- Attribute selectors-->
281 | <div class="slide normal"> 
282 |      <header><h1>Attribute selectors</h1></header> 
283 |      <section class="content"> 
284 |   <dl>
285 |   <dt>element[attribute]</dt>
286 |   <dd>Select elements containing the named attribute</dd>
287 | </dl>
288 | <pre contenteditable style="font-size: 95%;"><strong>img[alt] {}</strong>
289 |      &lt;img src=&quot;image.jpg&quot; <strong>alt</strong>=&quot;accessible&quot;&gt;     
290 |      <span style="opacity:0.3">&lt;img src=&quot;image.jpg&quot; title=&quot;inaccessible&quot;&gt;</span>  
291 | <strong>form [type] {}</strong> 
292 |      &lt;input <strong>type</strong>=date&gt;  
293 |      <span style="opacity:0.3">&lt;select&gt;</span></pre>
294 | <p><small>IE6 sucks <br />
295 |   IE7 support basic non-empty attribute</small></p>
296 |      </section>
297 |     </div>
298 |       
299 | <!-- Older attribute selectors -->
300 | <div class="slide normal"> 
301 |      <header style="position:absolute; top: 20px; right: 20px;"><h1>Older attribute selectors</h1></header> 
302 |      <section class="content"> 
303 |   <dl>
304 |   <dt>E[attr]</dt>
305 |   <dd>Element E that has the attribute attr with any value.</dd>
306 |   <dt>E[attr=&quot;val&quot;]</dt>
307 |   <dd>Element E that has the attribute attr with the exact, case-sensitive if attribute is case sensitive, value <em>val</em>.</dd>
308 |   <dt>E[attr|=val]</dt>
309 |   <dd>Element E whose attribute <em>attr</em> has a value <em>val</em> or begins with val- (&quot;val&quot; plus &quot;-&quot;).<br />
310 |     <pre contenteditable>p[lang|=&quot;en&quot;]{/*    &lt;p lang=&quot;en-us&quot;&gt;  &lt;p lang=&quot;en-uk&quot;&gt; */ }</pre>
311 |   </dd>
312 |   <dt>E[attr~=val]</dt>
313 |   <dd>Element E whose attribute <em>attr</em> has within its value the space-separated full word <em>val</em>.<br />
314 |     <pre contenteditable>a[title~=more] {/* &lt;a title=&quot;want more info about this?&quot;&gt;}</pre>
315 |   </dd></dl>
316 |      </section>
317 |     </div>
318 |        
319 | <!-- CSS3 Attribute Selectors -->
320 | <div class="slide normal"> 
321 |      <header  style="position:absolute; top: 20px; right: 20px;"><h1>CSS3 Attribute Selectors</h1></header> 
322 |      <section class="content">
323 |      <dl>
324 |   <dt>E[attr^=val]</dt>
325 |   <dd>Element E whose attribute <em>attr</em> starts with the value <em>val</em>.<br />
326 |     <pre contenteditable>a[href^=mailto] {background-image: url(emailicon.gif);}  
327 | a[href^=http]:after {content: &quot; (&quot; attr(href) &quot;)&quot;;}</pre>
328 |   </dd>
329 |   <dt>E[attr$=val]</dt>
330 |   <dd>Element E whose attribute <em>attr</em> ends in <em>val</em> . <br />
331 |     <pre contenteditable>a[href$=pdf] {background-image: url(pdficon.gif);}
332 | a[href$=pdf]:after {content: &quot; (PDF)&quot;;}</pre>
333 |   </dd>
334 |   <dt>E[attr*=val]</dt>
335 |   <dd>Element E whose attribute <em>attr </em>matches <em>val</em> anywhere within the attribute. Similar to E[attr~=val] above, except the <em>val</em> can be part of a word.</dd>
336 | </dl>
337 | <p>Note: Multiple attributes work! a[title][href]</p> 
338 |      </section>
339 |  </div>    
340 |   
341 | <!-- Attribute Selectors Recap -->
342 | <div class="slide normal"> 
343 |      <header><h1>Attribute Selectors Recap</h1></header> 
344 |      <section class="content"> 
345 |      <pre contenteditable style="float:left; width: 45%; margin: 0 20px 0 0;">
346 | input[placeholder] { 
347 | <b class="notes">/* matches any input with a placeholder */</b>}
348 | input[type=email] {
349 | <b class="notes">/* exact match */</b>}
350 | abbr[title~=unicorn] { 
351 | <b class="notes">/* matches unicorn but not unicorns */</b>}
352 | abbr[title|=en] { 
353 | <b class="notes">/* matches en-us and en-uk */</b>}
354 | a[href^=mailto] { 
355 | <b class="notes">/* starts with */</b>}
356 | a[href$=pdf]{ 
357 | <b class="notes">/* ends in */</b>}
358 | abbr[title*=unicorn] { 
359 | <b class="notes">/* matches unicorn and unicorns */</b>}
360 | </pre>
361 | <pre contenteditable style="float:left; width: 40%; margin-top:0;">E:[att] <b class="notes"><br/>/* have the attribute at all */</b>
362 | 
363 | E:[att=val] <b class="notes"><br/>/* exact */</b>
364 | 
365 | E:[att~=val] <b class="notes"><br/>/* val is a space separated word */</b>
366 | 
367 | E:[att|=val] <b class="notes"><br/>/* with a dash */</b>
368 | 
369 | E:[att^=val] <b class="notes"><br/>/* begins with val */</b>
370 | 
371 | E:[att$=val]  <b class="notes"><br/>/* ends with val */</b>
372 | 
373 | E:[att*=val]  <b class="notes"><br/>/* val is anywhere as a substring */</b>
374 | .</pre>
375 | <pre contenteditable style="clear:both">
376 | @media print{
377 |   abbr[title]:after { 
378 |     content: "(" attr(title) ")";
379 |   }
380 |   a[href^=http]:after { 
381 |     content: "(" attr(href) ")";
382 |   }
383 | }</pre>
384 |      </section>
385 |  </div>  
386 |   
387 | <!-- Using attribute selectors -->
388 | <div class="slide normal"> 
389 |      <header><h1>Using attribute selectors</h1></header> 
390 |      <section class="content play"> 
391 |   <h1><a href="files/01_attr.html" target="play">Play Time: Attribute Selectors</a></h1>
392 |   <p><strong>Note:</strong> The top line of the example is editable. The CSS will impact the contents on the rest of the page.</p>
393 |      </section>
394 |     </div>
395 |    
396 | <!-- UI pseudo-classes -->
397 | <div class="slide normal"> 
398 |      <header><h1>UI pseudo-classes</h1></header> 
399 |      <section class="content"> 
400 |   <p>Based on current state of UI</p>
401 |   <pre contenteditable>
402 |   :enabled
403 |   
404 |   :disabled
405 |   
406 |   :checked
407 |   </pre>
408 |   <p style="float: left; margin-right:20px">Example:<p>
409 | <pre contenteditable style="float: left">input[type=checkbox]:checked + label {
410 |   color: red;
411 | }</pre>
412 | <div style="clear:both;">
413 | <input type="checkbox" id="test1ck"/> <label  for="test1ck">Check and Uncheck Me</label><br/>
414 | <input type="checkbox" id="test2ck"/> <label  for="test2ck">Check and uncheck me too!</label></div>   </section>
415 | </div>
416 |     
417 | <!--Form related UI pseudo-classes -->
418 | <div class="slide normal"> 
419 |      <header><h1>Form related UI pseudo-classes</h1></header> 
420 |      <section class="content"> 
421 |   <pre contenteditable class="columns2">:valid
422 | :invalid
423 | :required
424 | :optional
425 | 
426 | 
427 | :in-range
428 | :out-of-range
429 | :read-only
430 | :read-write
431 | 
432 | :default</pre>
433 |   <p style="float: left; margin-right:20px">Example:<p>
434 | <pre contenteditable style="float: left">input:valid { border: 1px solid green;}
435 | input:invalid { border: 1px solid red;}
436 | input:required {border-width: 5px;}
437 | input:optional {border-width: 10px;}
438 | input:out-of-range { background-color: pink;}
439 | input:in-range { background-color:lightgreen;}</pre>
440 | <div style="clear:both;">
441 | <input type="number" min="5" max="7" id="test3ck" required/> <label  for="test3ck">Number between 5 and 7</label><br/>
442 | <input type="color" pattern="#[a-fA-F0-9]{6}" id="test4ck" /> <label  for="test4ck">Hexidecimal color</label>
443 | </div>   </section>
444 | </div>	
445 |     
446 | <!-- UI selectors -->
447 | <div class="slide normal"> 
448 |      <header><h1>UI selectors</h1></header> 
449 |      <section class="content play"> 
450 |   <h1><a href="files/02_uiselectors.html" target="play">Play Time: UI Selectors</a></h1>
451 |   <p>Test them out for yourselves</p>
452 |      </section>
453 |     </div>     
454 |  
455 |    
456 | <!-- List of Structural selectors -->
457 | <div class="slide normal"> 
458 |      <header><h1>Structural selectors</h1></header> 
459 |      <section class="content"> 
460 |   <pre contenteditable class="columns2">:nth-child() 
461 | 
462 | :nth-last-child() 
463 | 
464 | :nth-of-type() 
465 | 
466 | :nth-last-of-type() 
467 | 
468 | :first-child<sup style="color:#C61800">*</sup>
469 | 
470 | :last-child 
471 | 
472 | :first-of-type 
473 | 
474 | :last-of-type 
475 | 
476 | :only-child 
477 | 
478 | :only-of-type 
479 | 
480 | :root
481 | 
482 | :empty
483 | 
484 | :not(:empty) 
485 | </pre>
486 | <ul><li>Target elements on the page based on their relationships to other elements in the DOM.</li>
487 | <li>Updates dynamically if page updates.</li>
488 | 
489 |   <li>Reduced need for extra markup, classes and IDs</li>
490 | </ul>
491 | <small style="position:absolute; bottom: 10px; right: 10px;"><sup style="color:#C61800">*</sup> CSS2 / IE8 </small>
492 |      </section>
493 |     </div>
494 |  
495 | 
496 | <!--First, last, & only -->
497 | <div class="slide normal"> 
498 |      <header><h1>First, last, &amp; only</h1></header> 
499 |      <section class="content"> 
500 |  <pre contenteditable> 
501 | :first-child
502 | 
503 | :last-child 
504 | 
505 | :first-of-type 
506 | 
507 | :last-of-type 
508 | 
509 | :only-child 
510 | 
511 | :only-of-type 
512 | </pre>
513 | 
514 | <p>Easier to explain <a href="files/04_firstlastonly.html"  target="play">by example</a></p>
515 |      </section>
516 |     </div>    
517 |   
518 | 
519 |     
520 |    
521 |      
522 |   
523 |   
524 | <!--nth pseudo-classes -->
525 | <div class="slide normal"> 
526 |      <header><h1>nth pseudo-classes</h1></header> 
527 |      <section class="content"> 
528 | <pre contenteditable>:nth-child(<b>3n</b>) 
529 | 
530 | :nth-last-child(<b>odd</b>) 
531 | 
532 | :nth-of-type(<b>5</b>) 
533 | 
534 | :nth-last-of-type(<b>3n+1</b>) </pre>
535 | 
536 | <p>Target element or elements based on argument passed to the selector</p> 
537 | <ul class="pre">
538 | 	<li>:nth-of-type(<b>even</b>)</li>
539 |     <li>:nth-of-type(<b>odd</b>)</li>
540 |     <li>:nth-of-type(<b>an+b</b>) </li>
541 | </ul>
542 | <p><a href="files/05_nth.html" target="play">Let's Play</a> <small style="float:right">Note: Play with negative values for 'a'</small></p>
543 |      </section>
544 |     </div>
545 |        
546 | <!--Structural Selectors -->
547 | <div class="slide normal"> 
548 |      <header><h1>Structural Selectors</h1></header> 
549 |      <section class="content"> 
550 |      <pre contenteditable style="margin-top: 0; float: left;">
551 | tr:<b>first-child</b>,
552 | tr:<b>last-child</b> {
553 |   font-weight: bold;
554 | }
555 | tr:<b>first-of-type</b>,
556 | tr:<b>last-of-type</b>{
557 |   text-decoration:line-through;
558 | }
559 | tr:<b>nth-child</b>(<b>even</b>) {
560 |   background-color: #CCC;
561 | }
562 | tr:nth-child(<b>3</b>) {
563 |   color: #CCC;
564 | }
565 | tr:<b>nth-of-type</b>(<b>odd</b>) {
566 |   background-color: #FFF;
567 | }
568 | tr:nth-of-type(<b>4n</b>) {
569 |   color: #C61800;
570 | }
571 | tr:nth-of-type(<b>3n-1</b>) {
572 |   font-style: italic;
573 | }
574 | 
575 | </pre>
576 | <table class="structural" cellpadding="1" cellspacing="0" border="0" style="float: right; width:33%;">
577 | <tbody>
578 | <tr><td>Row 1</td></tr>
579 | <tr><td>Row 2</td></tr>
580 | <tr><td>Row 3</td></tr>
581 | <tr><td>Row 4</td></tr>
582 | <tr><td>Row 5</td></tr>
583 | <tr><td>Row 6</td></tr>
584 | <tr><td>Row 7</td></tr>
585 | <tr><td>Row 8</td></tr>
586 | <tr><td>Row 9</td></tr>
587 | <tr><td>Row 10</td></tr>
588 | </tbody>
589 | </table>
590 |      </section>
591 |  </div>
592 |  
593 |  <!--Advanced Structural Selectors -->
594 | <div class="slide normal"> 
595 |      <header><h1>Structural Selectors</h1></header> 
596 |      <section class="content"> 
597 |      <ul class="count"><li>1</li></ul>
598 |      <ul class="count"><li>1</li><li>2</li></ul>
599 |      <ul class="count"><li>1</li><li>2</li><li>3</li></ul>
600 |      <ul class="count"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
601 |      <pre contenteditable> li:first-of-type:last-of-type{width: 100%;}
602 |  li:nth-of-type(1):nth-last-of-type(2),
603 |  li:nth-of-type(2):nth-last-of-type(1){width: 50%;}
604 |  li:nth-of-type(1):nth-last-of-type(3),
605 |  li:nth-of-type(3):nth-last-of-type(1),
606 |  li:nth-of-type(2):nth-last-of-type(2){width: 33.33%;}
607 |  li:nth-of-type(1):nth-last-of-type(4),
608 |  li:nth-of-type(2):nth-last-of-type(3),
609 |  li:nth-of-type(3):nth-last-of-type(2),
610 |  li:nth-of-type(4):nth-last-of-type(1){width: 25%;}</pre>
611 |      </section>
612 |  </div>
613 | 
614 | 
615 | <!-- :empty pseudo-class -->
616 | <div class="slide normal"> 
617 |      <header><h1>:empty pseudo-class </h1></header> 
618 |      <section class="content"> 
619 |   <pre contenteditable>p<strong>:empty</strong> {
620 |   	/* styles here */
621 |     }
622 | </pre>
623 | <p>Matches:
624 |  <pre contenteditable>&lt;p&gt;&lt;/p&gt;
625 | &lt;p&gt;&lt;!-- this is a comment --&gt;&lt;/p&gt;
626 | </pre>
627 |      </section>
628 |     </div>   
629 |   
630 |   
631 | <!-- :not -->
632 | <div class="slide normal"> 
633 |      <header><h1><strong>:not</strong> -  Negation pseudo-class</h1></header> 
634 |      <section class="content">
635 |      <pre contenteditable>
636 |  <span class="hilite" style="background-color:#ededed">div</span><span class="hilite" style="background-color:#deded8">:not(</span><span class="hilite" style="background-color:#f9f9f9">.excludeMe</span><span class="hilite"  style="background-color:#deded8">)</span></pre>
637 |   </pre>
638 |   <p><a href="files/06_not.html" target="play">Practice makes perfect</a></p>
639 |      </section>
640 |     </div>
641 |    
642 | <!-- lang, target, anchor links-->
643 | <div class="slide normal"> 
644 |      <header><h1>Other Pseudo Classes</h1></header> 
645 |      <section class="content"> 
646 |   <pre contenteditable>
647 |   :lang
648 |   :target
649 |   </pre>
650 |     <p>link &amp; user action pseudo-classes</p>
651 |   <pre contenteditable>
652 |   :link
653 |   :visited
654 |   
655 |   :hover
656 |   :active
657 |   :focus
658 |   </pre>
659 |   <p>  <a href="files/07_target.html" target="play">:target</a> example</p>
660 |      </section>
661 |     </div>
662 |      
663 |  
664 | <!--root  -->
665 | <div class="slide normal"> 
666 |      <header><h1>:root</h1></header> 
667 |      <section class="content"> 
668 |  <pre contenteditable> 
669 | :root
670 | </pre>
671 | 
672 | <p>Selects the document root, which is &lt;html&gt;</p>
673 | <ul><li>Declare <em>font-size</em> on <strong>:root</strong> if using <strong>rem</strong> units</li>
674 | <li>Style <strong>:root</strong> only if showing <strong>&lt;head&gt;</strong> (as in our exercise files)</li>
675 | 
676 |   <li>In CSS4, define Defining Variables on root. (see <a href="http://dev.w3.org/csswg/css-variables/"  target="play">Variables module</a>)</li>
677 | </ul>
678 | <p><small><a href="files/03_root.html" target="play">example</a></small></p>
679 |      </section>
680 |     </div>   
681 |     
682 |            
683 | <!-- Pseudo elements -->
684 | <div class="slide intro"> 
685 |      <header><h1>Pseudo elements</h1></header> 
686 |  </div>
687 | 
688 | <!-- Pseudo elements -->
689 | <div class="slide normal thisSlide"> 
690 |      <header><h1>Pseudo elements</h1></header> 
691 |      <section class="content">
692 |      <pre contenteditable style="font-size: 100%;">
693 | ::first-line
694 | ::first-letter
695 | ::selection (not in specification)
696 | ::before
697 | ::after
698 |     </pre>
699 | 
700 |   <p><i class="imp">Pseudo-classes</i> select elements that 
701 | 
702 | already exist.<br>
703 | 
704 | <i class="imp">Pseudo-elements</i> create "faux" elements you can style.</p> 
705 |    
706 | <p>    Use single colon because of IE</p>
707 |      </section>
708 |     </div>
709 |   
710 |   
711 | <!-- Drop Cap -->
712 | <div class="slide normal "> 
713 |      <header><h1>::first-letter</h1></header> 
714 |      <section class="content">
715 |         
716 |    <p class="firstletter">You can even pretty drop-caps with :first-letter, but make sure to apply it to p:first-of-type so your site not too ugly. <a href="files/08_dropcap.html" target="play">Code for drop cap.</a></p>  <pre contenteditable>p:first-of-type::first-letter {
717 | 	position: relative;
718 | 	top: 8px;
719 | 	float: left;
720 | 	font-size: 3em;
721 | 	line-height: 1;
722 | 	color: #C7573A;
723 | 	padding: 0 4px 2px 0;
724 | 	font-weight: bold;	
725 | }
726 |  </pre>
727 |      </section>
728 |     </div>
729 |     
730 |     
731 | <!-- ::selection -->
732 | <div class="slide normal thisSlide"> 
733 |      <header><h1>::selection</h1></header> 
734 |      <section class="content">
735 |      
736 |     <pre contenteditable>.thisSlide *::selection {
737 |    background-color: #C61800;
738 |    color: #ffffff;
739 | }
740 |     </pre>
741 |     <p class="notes">Prefix with -moz- for Firefox<br>
742 |     Use single colon because of IE</p>
743 |      </section>
744 |     </div>  
745 |   
746 |       
747 | <!-- selectors tips -->
748 | <div class="slide normal"> 
749 |      <header><h1>Tips</h1></header> 
750 |      <section class="content"> 
751 | <ul>
752 | 	<li><a href="http://selectivizr.com/" target="_blank">selectivizr.com</a> + JS Library = JS for backward compatibility</li>
753 |     <li>jQuery $(selector) == document.querySelectorAll(selector)</li>
754 |     <li>Many, many more pseudo-elements with prefixes currently treated as a shadow DOM
755 |     	<ul><li>::-webkit-progress-bar</li>
756 |          <li>::-webkit-progress-value</li>
757 |          <li>::-webkit-meter-even-less-good-value
758 |          </li>
759 |          <li>::-webkit-inner-spin-button /outer-spin-button
760 |          </li>
761 |          <li>::-webkit-validation-bubble / arrow-clipper /arrow /message</li>
762 |          <li>::-webkit-scrollbar</li>
763 |          <li>::-webkit-scrollbar-button / thumb / track
764 |          <li><a href="https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions#section_22" target="_new">Mozilla Pseudo-elements and pseudo-classes</a></li>
765 |          
766 |          </ul>
767 |     </li>
768 |     
769 | </ul>
770 |      </section>
771 |  </div>
772 |  
773 |   <!-- -->
774 | <div class="slide intro"> 
775 |      <header><h1>Specificity </h1></header> 
776 |      <section class="content"> 
777 |   <h1><a href="part_02_specificity.html#slide3">Next ➹</a></h1>
778 |      </section>
779 |     </div>
780 |     
781 |    
782 |     
783 |     
784 |    
785 |     
786 |     
787 |     
788 |   
789 |    
790 |   </div>
791 |   <script src="css/slide.js"></script>
792 |   </body> 
793 | </html>
794 | 


--------------------------------------------------------------------------------
/part_02_specificity.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <!--[if gte IE 9]>
  5 |       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <![endif]-->
  7 |     <!--[if lt IE 9]>
  8 |       <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
  9 |     <![endif]-->
 10 |     <meta charset="utf-8" />
 11 |     <title>CSS3: From Knowledgable to Ninja</title>
 12 |      <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
 13 |    <link rel="stylesheet" href="css/screen.css" media="projection, screen"/>
 14 |    <link rel="stylesheet" href="css/print.css" media="print"/>
 15 |  <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
 16 | 
 17 |   </head>
 18 |   <body>
 19 | 
 20 |   <div id="topinfo">
 21 | 
 22 |   </div>
 23 |    <header>
 24 |     <nav>
 25 |         <ul>
 26 |             <li class="button cancel" id="back">Back</li>
 27 |             <li class="button done" id="next">Next</li>
 28 |         </ul>
 29 |     </nav>
 30 | </header>
 31 |   <div id="info">
 32 |     <p>
 33 |     <span class="key">&rarr;</span> and <span class="key">&rarr;</span> to change slides.
 34 |     <span class="key">2</span> for comments. <a href="http://estelle.github.com/CSS-Workshop">estelle.github.com/CSS-Workshop</a>
 35 |     </p>
 36 |   </div>
 37 | 
 38 |   <div id="presentation">
 39 | 
 40 |    <div id="presentation-counter"></div>
 41 | 
 42 |    <div id="slides">
 43 | 
 44 | 
 45 | <div class="slide normal">
 46 |     <header>
 47 |     	<h1 style="font-size:200%;">CSS: from Knowledgable to Ninja</h1>
 48 |     </header>
 49 |      <section class="content">
 50 |      <p> ◈ Estelle Weyl</p>
 51 |   <p> ◈ <a href="http://www.twitter.com/estellevw">@estellevw</a></p><p> ◈ <a href="http://www.standardista.com">www.standardista.com</a></p>
 52 |      </section>
 53 |     </div>
 54 | 
 55 | <!-- OUTLINE -->
 56 | <div class="slide normal">
 57 |  <header><h1>Course Outline</h1></header>
 58 |  <section class="content">
 59 |   <ol><li><a href="../selectors/">Selectors</a></li>
 60 |     <li><a href="part_02_specificity.html">Specificity</a></li>
 61 |     <li><a href="part_03_generated.html">Generated Content</a></li>
 62 |     <li><a href="part_04_media.html">Media Queries</a></li>
 63 |     <li><a href="part_04_media.html#slide10">Debugging</a></li>
 64 |     <li><a href="part_06_colors.html">Colors &amp; Transparency </a></li>
 65 |     <li><a href="part_07_fonts.html">Fonts / Typography </a></li>
 66 |     <li><a href="part_08_backgrounds.html">Backgrounds &amp; Borders </a></li>
 67 |     <li><a href="../gradients/">Gradients</a></li>
 68 |     <li><a href="part_10_transforms.html">Transforms</a></li>
 69 |     <li><a href="../animation/">Transitions &amp; Animation</a></li>
 70 | <li><a href="part_12_features.html">Other Features</a></li>
 71 | </ol>
 72 |  </section>
 73 | </div>
 74 | 
 75 | 
 76 | 
 77 | <div class="slide intro">
 78 |      <header><h1>Part 2: Specificity</h1></header>
 79 | </div>
 80 | 
 81 | <!-- Specificity -->
 82 | <div class="slide normal">
 83 |      <header><h1>Understanding Specificity</h1></header>
 84 |      <section class="content">
 85 |      <ul class="specificity">
 86 |      	<li class="id">ID</li>
 87 |         <li class="class">Class</li>
 88 |         <li class="element">Element</li>
 89 |      </ul>
 90 |      <ul class="specificity nonspec">
 91 |      	<li>1-0-0</li>
 92 |         <li>0-1-0</li>
 93 |         <li>0-0-1</li>
 94 |      </ul>
 95 |      <p><a href="http://www.standardista.com/wp-content/uploads/2012/01/specifishity1.pdf" target="_blank">PDF</a><br>
 96 |      <a href="files/11_specificity.html" target="play">Examples</a></p>
 97 |      </section>
 98 |  </div>
 99 | 
100 | <!-- Specificity PDF -->
101 | <div class="slide" style="padding: 0;">
102 |      <object data="http://www.standardista.com/wp-content/uploads/2012/01/specifishity1.pdf" style="width:100%; height:100%; overflow:scroll"></object>
103 | </div>
104 | 
105 | <!-- Specificity Notes -->
106 | <div class="slide normal">
107 |      <header><h1>Specificity: The less than obvious</h1></header>
108 |      <section class="content">
109 |  <p>The * selector, or global selector, has no value.</p>
110 |  <pre contenteditable>* {} 0-0-0 </pre>
111 | 
112 | <p>Combinators, like ~, >, and + have no value</p>
113 | <pre contenteditable>ul li {} 0-0-2
114 | ul > li {} 0-0-2</pre>
115 | 
116 | <p>:not has no value, but parameter selector does</p>
117 | <pre contenteditable>.myClass:not(p) {} 0-1-1</pre>
118 | 
119 | <p>Specificity is not inheritance</p>
120 |      </section>
121 | </div>
122 | 
123 | 
124 | <div class="slide object">
125 | <header><h1>Play Time</h1></header>
126 | <object data="files/00_basic.html"></object>
127 | <a href="files/00_basic.html" target="play" class="objectlink">Try it out</a>
128 | </div>
129 | 
130 | 
131 | <div class="slide intro">
132 |      <header><h1>Part 3: Generated Content</h1></header>
133 |     <h1><a href="part_03_generated.html">Next ➹</a></h1>
134 | </div>
135 | 
136 | 
137 | 
138 | 
139 | 
140 |   </div>
141 |   <script src="slides.js"></script>
142 |   </body>
143 | </html>
144 | 


--------------------------------------------------------------------------------
/part_03_generated.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <!--[if gte IE 9]>
  5 |       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <![endif]-->
  7 |     <!--[if lt IE 9]>
  8 |       <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
  9 |     <![endif]-->
 10 |     <meta charset="utf-8" />
 11 |     <title>CSS3: Generated Content</title>
 12 |      <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
 13 |    <link rel="stylesheet" href="css/screen.css" media="projection, screen"/>
 14 |    <link rel="stylesheet" href="css/print.css" media="print"/>
 15 |    <style>
 16 | 
 17 | body, #presentation, #slides {
 18 | 	-webkit-transition: all 1.5s linear;
 19 | 	-moz-transition: all 1.5s linear;
 20 | 	-ms-transition: all 1.5s linear;
 21 | 	-o-transition: all 1.5s linear;
 22 | 	transition: all 1.5s linear;
 23 | }
 24 | 
 25 | /* INTRO TO GENERATED CONTENT */
 26 | .beforeafter::before {
 27 |   	content: "before content - ";
 28 |   }
 29 | .beforeafter::after{
 30 | 	content: " - after content";
 31 |   }
 32 | .beforeafter:before,
 33 | .beforeafter:after {font-weight: bold;}
 34 | 
 35 | /* GENERATED CONTENT: 2 FREE FAUX ELEMENTS */
 36 | .beforeafterdivcont {position:relative;}
 37 | .beforeafterdiv,
 38 | .beforeafterdiv:before,
 39 | .beforeafterdiv:after,
 40 | .beforeafterdiv i {
 41 | 	height: 200px;
 42 | 	content: "";
 43 | 	border: 1px solid blue;
 44 | 	position:relative;
 45 | 	background-color: red;
 46 | 	-webkit-transform: none;
 47 | 	display:inline-block;
 48 | 	box-shadow:3px 3px rgba(0,0,0,0.2),-3px -3px rgba(0,0,0,0.2), ;
 49 | 	margin: 5px;
 50 |   font-size: 3rem;
 51 | }
 52 | 
 53 | .beforeafterdiv:before {
 54 | 	content: "before";
 55 | 	background-color: green;
 56 | 	margin-right: -50px;
 57 | 	color: #fff;
 58 | 	-webkit-transform: translatez(15px);
 59 | }
 60 | .beforeafterdiv:after {
 61 | 	content: "after";
 62 | 	background-color: blue;
 63 | 	margin-left: -50px;
 64 | 	color: #fff;
 65 | 	-webkit-transform: translatez(5px);
 66 | 	}
 67 | .beforeafterdiv i {
 68 | 	background-color: yellow;
 69 | }
 70 | /* GENERATED CONTENT : LINKS */
 71 | .ba li {list-style-type: none; margin-bottom: 20px;}
 72 | .ba a:before {
 73 |   color: #ffffff;
 74 |   background: #000000;
 75 |   font-size: 120%;
 76 |   padding: 2px 5px;
 77 |   display: inline-block;
 78 |   width: 1.2em;
 79 |   margin-right: 10px;
 80 |   text-align: center;
 81 | }
 82 | .ba a[href^="mailto:"]:before {
 83 |   content: "\2709 ";
 84 | }
 85 | .ba a[href^="tel:"]:before {
 86 |   content: "\2706";
 87 | }
 88 | .ba a[href$="vcs"]:before {
 89 |   content: "\231A";
 90 | }
 91 | 
 92 | /* GENERATED CONTENT -- QUOTES */
 93 | blockquote.gc p:before, blockquote.gc p:after {
 94 |   font-size: 2em;
 95 |   color: #C7573A;
 96 |   line-height: 0;
 97 |   vertical-align: middle;
 98 | }
 99 | blockquote.gc p:first-child:before {
100 |   content: "\275D";
101 |   margin: 0 5px 0 -48px;
102 | }
103 | blockquote.gc p:last-child:after {
104 |   content: "\275E";
105 |   margin: 0 -40px 0 5px;
106 | }
107 | 
108 | /* THOUGHT BUBBLE & QUOTE */
109 | .quote {
110 | 	border-radius: 10px;
111 | 	position:relative;
112 | 	padding: 20px;
113 | 	background-color: red;
114 | 	color: white;
115 | }
116 | .quote:after {
117 | 	position:absolute;
118 | 	content: '';
119 | 	width: 0;
120 | 	height:0;
121 | 	border: 20px solid blue;
122 | 	border-color: red transparent transparent transparent;
123 | 	bottom: -39px;
124 | 	left: 20px;
125 | }
126 | 
127 | .thought {
128 | 	border-radius: 50%;
129 | 	border: 5px solid blue;
130 | 	background-color: white;
131 | 	float: right;
132 | 	position:relative;
133 | 	padding: 40px;
134 | 	background-color: #fff;
135 | 	overflow:visible;
136 | 	margin-bottom: 80px;
137 | }
138 | .thought:before,
139 | .thought:after {
140 | 	content: '';
141 | 	border: 5px solid blue;
142 | 	border-radius: 50%;
143 | 	position:absolute;
144 | 	left: 20%;
145 | 	bottom: -30px;
146 | 	width: 40px;
147 | 	height: 40px;
148 | 	background-color: #fff;
149 | }
150 | .thought:after {
151 | 	height: 20px;
152 | 	width: 20px;
153 | 	bottom: -50px;
154 | 	left: 12%;
155 | }
156 | 
157 | /* TOOL TIP */
158 | p [data-tooltip="true"] {
159 | 	border-bottom: 1px solid;
160 | 	text-decoration:none;
161 | 	line-height:1;
162 | 	display:inline;
163 | 	z-index: 0;
164 | }
165 | p [data-tooltip="true"]:hover {
166 | 	position: relative;
167 | 	}
168 | p [data-tooltip="true"]:hover:before {
169 | 	content: attr(title);
170 | 	position: absolute;
171 | 	top: 45px;
172 | 	left: 0;
173 | 	background-color: #C7573A;
174 | 	color: white;
175 | 	max-width: 10em;
176 | 	min-width: 5em;
177 | 	font-style: normal;
178 | 	padding: 5px;
179 | 	border-radius: 10px;
180 | 	text-align:center;
181 | 	z-index: 100;
182 | }
183 | p [data-tooltip="true"]:hover:after {
184 | 	content: "";
185 | 	position:absolute;
186 | 	top: 1.1rem;
187 | 	border: 15px solid;
188 | 	position: absolute; left: 20px;
189 | 	border-color:  transparent transparent #C7573A ;
190 | }
191 | 
192 | .d3 {
193 | 	-webkit-transform: perspective(500px) rotateY(40deg);
194 | 	margin: 20px auto;
195 | 
196 | }
197 | .attribute a[href^=http]:hover {
198 |    position: relative;
199 | }
200 | .attribute a[href^=http]:hover:after {
201 |    content: attr(href);
202 |    position: absolute;
203 |    top: 1em;
204 |    left: 0;
205 |    background-color: black;
206 |    color: white;
207 |    padding: 3px 5px;
208 |    line-height:1;
209 | }
210 | /* brown: C7573A;*/
211 |    </style>
212 | 
213 |   </head>
214 |   <body>
215 |   <header>
216 |     <nav>
217 |         <ul>
218 |             <li class="button cancel" id="back">Back</li>
219 |             <li class="button done" id="next">Next</li>
220 |         </ul>
221 |     </nav>
222 | </header>
223 |   <div id="topinfo">
224 | 
225 |   </div>
226 | 
227 |   <div id="info">
228 |     <p>
229 |     <span class="key">&rarr;</span> and <span class="key">&rarr;</span> to change slides.
230 |     <span class="key">2</span> for comments. <a href="http://estelle.github.com/CSS-Workshop">estelle.github.com/CSS-Workshop</a>
231 |     </p>
232 |   </div>
233 | 
234 |   <div id="presentation">
235 | 
236 |    <div id="presentation-counter"></div>
237 | 
238 |    <div id="slides">
239 | <!-- slidedeck title -->
240 | <div class="slide normal">
241 |     <header>
242 |     	<h1 style="font-size:200%;">CSS: from Knowledgable to Ninja</h1>
243 |     </header>
244 |      <section class="content">
245 |      <p> ◈ Estelle Weyl</p>
246 |   <p> ◈ <a href="http://www.twitter.com/estellevw">@estellevw</a></p><p> ◈ <a href="http://www.standardista.com">www.standardista.com</a></p>
247 |      </section>
248 |     </div>
249 | 
250 | <!-- OUTLINE -->
251 | <div class="slide normal">
252 |  <header><h1>Course Outline</h1></header>
253 |  <section class="content">
254 |   <ol><li><a href="../selectors/">Selectors</a></li>
255 |     <li><a href="part_02_specificity.html">Specificity</a></li>
256 |     <li><a href="part_03_generated.html">Generated Content</a></li>
257 |     <li><a href="part_04_media.html">Media Queries</a></li>
258 |     <li><a href="part_04_media.html#slide10">Debugging</a></li>
259 |     <li><a href="part_06_colors.html">Colors &amp; Transparency </a></li>
260 |     <li><a href="part_07_fonts.html">Fonts / Typography </a></li>
261 |     <li><a href="part_08_backgrounds.html">Backgrounds &amp; Borders </a></li>
262 |     <li><a href="../gradients/">Gradients</a></li>
263 |     <li><a href="part_10_transforms.html">Transforms</a></li>
264 |     <li><a href="../animation/">Transitions &amp; Animation</a></li>
265 | <li><a href="part_12_features.html">Other Features</a></li>
266 | </ol>
267 |  </section>
268 | </div>
269 | 
270 | <!-- title -->
271 | <div class="slide intro">
272 |      <header><h1>Part 3: Generated Content</h1></header>
273 | </div>
274 | 
275 | 
276 | <!-- :before and :after  -->
277 | <div class="slide normal">
278 |      <header><h1>::before and ::after</h1></header>
279 | 
280 | 
281 |      <section class="content">
282 |   <pre contenteditable>p:before {
283 |   content: "before content - ";
284 |   font-weight: bold;
285 | }
286 | p:after{
287 |   content: " - after content";
288 |   font-weight: bold;
289 | }</pre>
290 | 
291 | <pre contenteditable>&lt;p>the content&lt;/p></pre>
292 | 
293 | <p class="beforeafter">the content</p>
294 | <pre contenteditable>&lt;p>
295 |     &lt;before&gt;before content - &lt;/before>
296 |         the content
297 |     &lt;after&gt; - after content&lt;/after>
298 | &lt;/p></pre>
299 | <a href="files/31_generatetext.html" target="play" class="objectlink">Try it out</a> </section>
300 | 
301 |     </div>
302 | 
303 | 
304 | <div class="slide object">
305 | <header><h1>Try it out</h1></header>
306 | <object data="files/31_generatetext.html"></object>
307 | <a href="files/31_generatetext.html" target="play" class="objectlink">Try it out</a>
308 | </div>
309 | 
310 | 
311 | 
312 | <!-- 2 free elements  -->
313 | <div class="slide intro">
314 |      <header><h1>Pseudo Elements</h1></header>
315 |      <section class="content">
316 |      You get 2 free stylable faux elements for every non-empty element
317 |      <div class="beforeafterdivcont  d3">
318 |      	<div class="beforeafterdiv"><i>Content</i></div>
319 |       </div>
320 |      </section>
321 |  </div>
322 | 
323 | <!-- Pseudoelement Syntax & Support-->
324 | <div class="slide normal">
325 |      <header><h1>Syntax</h1></header>
326 |      <section class="content">
327 |      <pre contenteditable>
328 |  element:before {
329 |  	content: "REQUIRED";
330 |  }
331 |  </pre>
332 |  <ul class="icons">
333 |          <li class="chrome">Chrome</li>
334 |          <li class="safari">Safari</li>
335 |          <li class="firefox">Firefox</li>
336 |          <li class="opera">Opera</li>
337 |          <li class="ie ">IE 8</li>
338 |      </ul>
339 |       <pre contenteditable>
340 |  element:before {
341 |     content: '';                  /* empty */
342 |     content: " (.pdf) ";          /* any text */
343 |     content: "\2603";             /* unicode */
344 |     content: " (" attr(href) ")"; /* attributes */
345 |     content: counter(name);
346 |         counter-increment: name;  /* counters */
347 |  }
348 |  </pre>
349 |      </section>
350 |  </div>
351 | 
352 | <!--  Special Characters -->
353 | <div class="slide normal">
354 |      <header><h1>Special Character</h1></header>
355 |      <section class="content">
356 |      <pre contenteditable>
357 |  element:before {
358 |  	content: "\2603";
359 |  }
360 |  </pre>
361 | <object data="http://evotech.net/articles/testjsentities.html" style="height:300px; width:100%;"></object>
362 | <p><a href="files/32_generatetext.html" target="play">Try it out</a><br>
363 |  <a href="http://copypastecharacter.com/">CopyPasteCharacter.com</a></p>
364 |  <a class="objectlink" href="http://evotech.net/articles/testjsentities.html" target="resource">Calculator</a>
365 |      </section>
366 |  </div>
367 | 
368 | <!-- counters and content -->
369 | <div class="slide normal">
370 |      <header><h1>Values for content:</h1></header>
371 |      <section class="content">
372 |      <dl class="deprecated listed">
373 |   <dt><span title="none"><strong>none</strong></span></a></dt>
374 |   <dd>Same as no content property declared.</dd>
375 |   <dt><span title="normal"><strong>normal</strong></span></a></dt>
376 |   <dd>Same as no content property declared.</dd>
377 |   <dt><span title="&lt;string&gt;"><strong>string</strong></a></span></dt>
378 |   <dd>A string of text. Can be combined with URL, counter, attr(x), quotes, etc.</dd>
379 |   <dt><span title="&lt;uri&gt;"><strong>image</strong></span></dt>
380 |   <dd>URL of  a resource, usual an image</dd>
381 |   <dt><span title="&lt;counter&gt;"><strong>counter</strong></a></span></dt>
382 |   <dd>'counter(name), counter(name, style), 'counters(name, string)' or 'counters(name, string, style)'.  'name' is a string, but not  'none', 'inherit' or 'initial'. </dd>
383 |   <dt><span title="open-quote"><strong>open-quote</strong></a></span> / <span title="close-quote"><strong>close-quote</strong></a></span><a href="http://www.w3.org/TR/CSS2/generate.html" target="resource">⎘</a></dt>
384 |   <dd>The appropriate string set in the  <strong>'quotes'</strong></a> property.</dd>
385 |   <dt><span title="no-open-quote"><strong>no-open-quote</strong></a></span> / <span title="no-close-quote"><strong>no-close-quote</strong></a></span></dt>
386 |   <dd>Does not include quotes,  but increments  the level of nesting for quotes.</dd>
387 |   <dt><span title="attr()"><strong>attr(X)</strong></span></a></dt>
388 |   <dd>Displays the value of the attribute 'X'</dd>
389 | </dl>
390 | <pre contenteditable>body {counter-reset: sections;}
391 | header h1.sectiontitle:before{
392 | 	content: "Part " counter(sections) ": ";
393 | 	counter-increment: sections;
394 | }</pre>
395 | <a href="http://www.standardista.com/css3/creating-counters-with-generated-content/" target="resource" class="objectlink">Tutorial</a>
396 |      </section>
397 |  </div>
398 | 
399 | <div class="slide">
400 |   <header><h1>attr() - FUTURE</h1></header>
401 |     <section class="content">
402 |       <p>CSS 2.1</pre>
403 |       <pre contenteditable>attr( attrName )</pre>
404 |       <p>CSS3</p>
405 |       <pre contenteditable>attr( attrName unit? [ , fallback ]? )</pre>
406 |       <dl class="deprecated">
407 |         <dt>string</dt>
408 | <dd>contents of a CSS string. Default is the empty string.</dd>
409 | <dt>color</dt>
410 | <dd>Must parse as a readable color. Default is ‘currentColor’.</dd>
411 | <dt>url</dt>
412 | <dd>Default is ‘about:invalid’. Relative URLs will be made absolute, not relative to the style sheet.</dd>
413 | <dt>integer</dt>
414 | <dd>Default is ‘0’</dd>
415 | <dt>number</dt>
416 | <dd>Default is ‘0’</dd>
417 | <dt>length, angle, time or frequency</dt>
418 | <dd>Default is ‘0’ in the relevant units. If the unit is a relative length, it will be computed to an absolute length.</dd>
419 | <dt>length or unit token </dt>
420 | <dd>'em’ ‘ex’ ‘px’ ‘rem’ ‘vw’ ‘vh’ ‘vmin’ ‘vmax’ ‘mm’ ‘cm’ ‘in’ ‘pt’ ‘pc’ ‘deg’ ‘grad’ ‘rad’ ‘ms’ ‘s’ ‘Hz’ ‘kHz’ or ‘%'. If the unit is a relative length, it will be computed to an absolute length.</dd>
421 |       </dl>
422 | <pre contenteditable>&lt;p data-count="5">Hi&lt;/p>
423 | 
424 | width: attr(data-count em, auto);</pre>
425 |     </section>
426 | </div>
427 | 
428 | <div class="slide object">
429 | <header><h1>Try it out</h1>
430 | <object data="files/31_generatetext.html"></object>
431 | <a href="files/31_generatetext.html" target="play" class="objectlink">Try it out</a>
432 | </div>
433 | 
434 | 
435 | <!-- Generated Content: links icons -->
436 | <div class="slide normal">
437 |      <header><h1>Simple Use Cases</h1></header>
438 |      <section class="content ba">
439 | 
440 |      <pre contenteditable style="float: left; margin-right: 30px;">a:before {
441 |   color: #ffffff;
442 |   background: #000000;
443 |   font-size: 120%;
444 |   padding: 2px 5px;
445 |   display: inline-block;
446 |   width: 1.2em;
447 |   margin-right: 10px;
448 |   text-align: center;
449 | }
450 | a[href^="mailto:"]:before {
451 |   content: "\2709 ";
452 | }
453 | a[href^="tel:"]:before {
454 |   content: "\2706";
455 | }
456 | a[href$="vcs"]:before {
457 |   content: "\231A";
458 | }</pre>
459 | 
460 | <ul>
461 | 	<li><a href="mailto:spam@yahoo.com">spam@yahoo.com</a></li>
462 | 	<li><a href="tel:18005551212">1.800.555.1212</a></li>
463 | 	<li><a href="ical.vcs">Add to Calendar</a></li>
464 | </ul>
465 |      </section>
466 |  </div>
467 | 
468 |  <!-- attribute example -->
469 |  <div class="slide normal">
470 |      <header><h1>Attribute Values as content</h1></header>
471 |      <section class="content attribute">
472 |      <p>There are <a href="files/32_generatetext.html">exercises</a>, or you can search <a href="http://lmgtfy.com/?q=css+generated+content+attributes">Google</a>.</p>
473 |      <pre contenteditable>a[href^=http]:hover {
474 |    position: relative;
475 | }
476 | a[href^=http]:hover:after {
477 |    <b>content: attr(href);</b>
478 |    position: absolute;
479 |    top: 1em;
480 |    left: 0;
481 |    background-color: black;
482 |    color: white;
483 |    padding: 3px 5px;
484 |    line-height:1;
485 | } </pre>
486 |      </section>
487 |  </div>
488 | 
489 | 
490 | <!-- quotes example -->
491 | <div class="slide normal">
492 |      <header><h1>More uses</h1></header>
493 |      <section class="content">
494 | <pre contenteditable>&lt;blockquote&gt;
495 |   &lt;p&gt;With generated content you can create text effects.&lt;/p&gt;
496 |   &lt;p&gt;We'll cover other uses next.&lt;/p&gt;
497 | &lt;/blockquote&gt;</pre>
498 | <pre contenteditable style="float: left; position:relative; margin-right: 50px;">
499 | blockquote p:before,
500 | blockquote p:after {
501 |   font-size: 2em;
502 |   color: #C7573A;
503 |   line-height: 0;
504 |   vertical-align: middle;
505 | }
506 | blockquote p:first-child:before {
507 |   content: "\275D";
508 |   margin: 0 5px 0 -40px;
509 | }
510 | blockquote p:last-child:after {
511 |   content: "\275E";
512 |   margin: 0 -40px 0 5px;
513 | }</pre>
514 | <blockquote class="gc"><p>With generated content you can created text effects.</p><p>We'll cover other uses next.</p></blockquote>
515 |      </section>
516 |  </div>
517 | 
518 | <!-- quote bubble -->
519 |  <div class="slide normal">
520 |      <header><h1>Quotes</h1></header>
521 |      <section class="content">
522 | 
523 |      <p class="quote">This is a quote<a href="files/33_bubbles.html" target="play" style="color: inherit">✍</a> </p>
524 | 
525 | <pre contenteditable>.quote {
526 |     border-radius: 10px;
527 |     position:relative;
528 |     padding: 20px;
529 |     background-color: red;
530 |     color: white;
531 | }
532 | .quote:after {
533 |     position:absolute;
534 |     content: '';
535 |     width: 0; height:0;
536 |     border: 20px solid tran&hellip;
537 |     border-top-color: red;
538 |     bottom:-39px; left:20px;
539 | }</pre>
540 |      </section>
541 |  </div>
542 | 
543 | 
544 | 
545 | 
546 |  <!-- quote bubble -->
547 |  <div class="slide normal">
548 |      <header><h1>Thought bubbles</h1></header>
549 |      <section class="content">
550 | 
551 |      <p class="thought">This is a thought bubble <a href="files/34_bubbles.html" target="play" style="color: inherit">✍</a></p>
552 | 
553 | <pre contenteditable style="font-size: 75%; padding:0">.thought,.thought:before,
554 | .thought:after  {
555 |   border-radius: 50%;
556 |   border: 5px solid blue;
557 |   background-color: white;
558 |   position:relative;
559 | }
560 | .thought:before,
561 | .thought:after {
562 |   content: '';
563 |   position:absolute;
564 |   left: 20%; bottom: -30px;
565 |   height: 40px; width: 40px;
566 | }
567 | .thought:after {
568 |   left: 12%; bottom: -50px;
569 |   height: 20px; width: 20px;
570 | }</pre>
571 |      </section>
572 |  </div>
573 | 
574 | <!-- CSS-Tricks shapes -->
575 | <div class="slide object">
576 |      <object data="http://css-tricks.com/examples/ShapesOfCSS/" style="width:100%; height: 100%;"></object>
577 |      <header style="position:absolute; top: 10px; width: 100%; text-align:center; background-color: rgba(255,255,255,0.9);"><h1><a href="http://css-tricks.com/examples/ShapesOfCSS/" target="play">Shapes</a></h1></header>
578 |      <a class="objectlink" href="http://css-tricks.com/examples/ShapesOfCSS/" target="resource">Visit Site</a>
579 |  </div>
580 | 
581 | <!-- CSS-Tricks -->
582 | <div class="slide object">
583 |      <object data="http://css-tricks.com/pseudo-element-roundup/" style="width:100%; height: 100%;"></object>
584 |       <header style="position:absolute; top: 10px; width: 100%; text-align:center; background-color: rgba(255,255,255,0.9);"><h1><a href="http://css-tricks.com/pseudo-element-roundup/" target="play">Other ideas</a></h1></header>
585 |       <a class="objectlink" href="http://css-tricks.com/pseudo-element-roundup/" target="resource">Visit Site</a>
586 |  </div>
587 | 
588 | <!-- Tool Tip Example -->
589 | <div class="slide normal">
590 |      <header><h1>Try it: Tool Tip</h1></header>
591 |      <section class="content">
592 |      <p>In this section you have learned the general idea of using generated content to create effects and / or to provide additional information.  Try hovering over me to find out how awesome <i title="Generated Content Rocks my world" data-tooltip="true">generated content</i> can be.</p>
593 |      <p>Open up a text editor and try creating a <i title="'Cause tool tips are awesome" data-tooltip="true">tooltip</i> without looking at the code. But, if you must, the code is attached, or you can check out your web inspector.</p>
594 |      <p style="margin-bottom: 50px;">Here is <a title="Don't cheat" data-tooltip="true" href="files/35_tooltip.html" target="play">one solution</a></p>
595 |      </section>
596 | </div>
597 | 
598 | <!--NEXT-->
599 | <div class="slide intro">
600 |      <header><h1>Part 4:<br>Media Queries</h1></header>
601 |      <section class="content">(briefly)</section>
602 |     <h1><a href="part_04_media.html#slide3">Next ➹</a></h1>
603 | </div>
604 | 
605 |   </div>
606 |   <script src="slides.js"></script>
607 |   </body>
608 | </html>
609 | 


--------------------------------------------------------------------------------
/part_07_fonts.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <!--[if gte IE 9]>
  5 |       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <![endif]-->
  7 |     <!--[if lt IE 9]>
  8 |       <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
  9 |     <![endif]-->
 10 |     <meta charset="utf-8" />
 11 |     <title>CSS3: From Knowledgable to Ninja</title>
 12 |      <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
 13 |    <link rel="stylesheet" href="css/screen.css" media="projection, screen"/>
 14 |    <link rel="stylesheet" href="css/print.css" media="print"/>
 15 |    <style>
 16 | 
 17 | 
 18 | /* text -shadow */
 19 | .textshadow {
 20 |     text-shadow:
 21 |     0 1px #cccccc,
 22 |     0 2px #c9c9c9,
 23 |     0 3px #bbbbbb,
 24 |     0 4px #b9b9b9,
 25 |     0 5px #aaaaaa,
 26 |     0 6px  1px  rgba(0, 0, 0, 0.1),
 27 |     0 0    5px  rgba(0, 0, 0, 0.1),
 28 |     0 1px  3px  rgba(0, 0, 0, 0.3),
 29 |     0 3px  5px  rgba(0, 0, 0, 0.2),
 30 |     0 5px  10px rgba(0, 0, 0, 0.25),
 31 |     0 10px 10px rgba(0, 0, 0, 0.2),
 32 |     0 20px 20px rgba(0, 0, 0, 0.15);
 33 | 	font-size: 60px;
 34 | 	font-weight: bold;
 35 | }
 36 | 
 37 | .boxshadow b {
 38 | 
 39 | border: 2px solid hsl(328, 100%, 44%);
 40 | float: right;
 41 | height: 80px;
 42 | width: 80px;
 43 | background-color: hsla(0, 100%, 100%, 0.8);
 44 | border-image: initial;
 45 | border-color: black;
 46 | box-shadow:
 47 | 	inset 3px 3px 0 3px yellow,
 48 | 	inset -3px -3px 0 5px blue,
 49 | 	3px 3px 0 5px #666,
 50 | 	-3px -3px 0 3px red;
 51 | margin: 20px;
 52 | }
 53 | 
 54 | .fontfamily td {text-align:center;}
 55 | th span {background-repeat:no-repeat;}
 56 | 
 57 | pre.borders {
 58 | 	border-radius: 0;
 59 | 	box-shadow:
 60 |     0 0 0 10px red,
 61 |     0 0 0 20px orange,
 62 |     0 0 0 30px yellow,
 63 |     0 0 0 40px green,
 64 |     0 0 0 50px blue,
 65 |     0 0 0 60px purple;
 66 | 	width: 80%;	margin: 60px auto;
 67 | }
 68 | /*
 69 |    brown: C7573A;
 70 |    blue:  BDD9D5;
 71 | */
 72 |    </style>
 73 | 
 74 |   </head>
 75 |   <body>
 76 | 
 77 |   <header>
 78 |     <nav>
 79 |         <ul>
 80 |             <li class="button cancel" id="back">Back</li>
 81 |             <li class="button done" id="next">Next</li>
 82 |         </ul>
 83 |     </nav>
 84 | </header>
 85 | 
 86 |   <div id="info">
 87 |     <p>
 88 |     <span class="key">&rarr;</span> and <span class="key">&rarr;</span> to change slides.
 89 |     <span class="key">2</span> for comments. <a href="http://estelle.github.com/CSS-Workshop">estelle.github.com/CSS-Workshop</a>
 90 |     </p>
 91 |   </div>
 92 | 
 93 |   <div id="presentation">
 94 | 
 95 |    <div id="presentation-counter"></div>
 96 | 
 97 |    <div id="slides">
 98 | 
 99 | 
100 | <div class="slide intro">
101 |     <header>
102 |     	<h1>CSS: from Knowledgable to Ninja</h1>
103 |     </header>
104 | </div>
105 | 
106 | 
107 | <div class="slide normal">
108 |     <header>
109 |     	<h1 style="font-size:200%;">CSS: from Knowledgable to Ninja</h1>
110 |     </header>
111 |      <section class="content">
112 |      <p> ◈ Estelle Weyl</p>
113 |   <p> ◈ <a href="http://www.twitter.com/estellevw">@estellevw</a></p><p> ◈ <a href="http://www.standardista.com">www.standardista.com</a></p>
114 |      </section>
115 |     </div>
116 | 
117 | <!-- OUTLINE -->
118 | <div class="slide normal">
119 |  <header><h1>Course Outline</h1></header>
120 |  <section class="content">
121 |   <ol><li><a href="../selectors/">Selectors</a></li>
122 |     <li><a href="part_02_specificity.html">Specificity</a></li>
123 |     <li><a href="part_03_generated.html">Generated Content</a></li>
124 |     <li><a href="part_04_media.html">Media Queries</a></li>
125 |     <li><a href="part_04_media.html#slide10">Debugging</a></li>
126 |     <li><a href="part_06_colors.html">Colors &amp; Transparency </a></li>
127 |     <li><a href="part_07_fonts.html">Fonts / Typography </a></li>
128 |     <li><a href="part_08_backgrounds.html">Backgrounds &amp; Borders </a></li>
129 |     <li><a href="../gradients/">Gradients</a></li>
130 |     <li><a href="part_10_transforms.html">Transforms</a></li>
131 |     <li><a href="../animation/">Transitions &amp; Animation</a></li>
132 | <li><a href="part_12_features.html">Other Features</a></li>
133 | </ol>
134 |  </section>
135 | </div>
136 | 
137 | 
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 
144 | <div class="slide intro">
145 |      <header><h1>Part 7: Fonts, Shadows &amp; Text Effects</h1></header>
146 |     </div>
147 | 
148 | 
149 | <!-- @font-face -->
150 | <div class="slide">
151 | <header><h1>@font-face</h1></header>
152 | <section class="content">
153 | <pre contenteditable style="font-size: 100%">
154 | @font-face {
155 |   font-family: 'blah';
156 |   src: url('blah.eot');
157 |   src: url('blah.eot?#iefix')
158 |          format('embedded-opentype'),
159 |      url('blah.woff') format('woff'),
160 |      url('blah.ttf') format('truetype'),
161 |      url('blah.svg#blahRegular') format('svg');
162 |   font-weight: normal;
163 |   font-style: normal;
164 | }
165 | </pre>
166 | <pre contenteditable style="font-size: 100%">body {
167 |   font-family: 'blah', arial, sans-serif;
168 | }</pre>
169 | 
170 | </section>
171 | </div>
172 | 
173 | <!-- @font-face support-->
174 | <div class="slide">
175 | <header><h1>@font-face</h1></header>
176 | <section class="content">
177 | <pre contenteditable>@font-face {
178 |   font-family: yourFontName;
179 |   src: url(fontfile) [, url(fontfile)]*;
180 |   [font-weight: bold|normal];
181 |   [font-style: italic|normal];
182 |   [charset: characterSet;]
183 | }</pre>
184 | 
185 | <table class="fontfamily" cellspacing="0"><thead class="icons">
186 | 	<tr>
187 |     <th>File</th>
188 |     <th><span class="chrome browser">Chrome</span></th>
189 |     <th><span  class="firefox browser">Firefox</span></th>
190 |     <th><span  class="opera browser">Opera</span></th>
191 |     <th><span  class="safari browser">Safari</span></th>
192 |     <th><span  class="ie browser">Internet Explorer</span></th>
193 |     <th><span  class="safari browser">iOS mobile</span></th>
194 |     <th><span  class="chrome browser">Android</span></th>
195 |     </tr>
196 |     </thead>
197 |     <tbody>
198 |     <tr>
199 |     	<th>EOT</th>
200 |         <td></td>
201 |         <td></td>
202 |         <td></td>
203 |         <td></td>
204 |         <td>✓</td>
205 |         <td></td>
206 |         <td></td>
207 |     </tr>
208 |     <tr>
209 |     	<th>TTF/OTF</th>
210 |         <td>✓</td>
211 |         <td>✓</td>
212 |         <td>✓</td>
213 |         <td>✓</td>
214 |         <td>9</td>
215 |         <td>✓ 4.2</td>
216 |         <td>✓ 2.2</td>
217 |     </tr>
218 |     <tr>
219 |     	<th>SVG</th>
220 |         <td>✓</td>
221 |         <td></td>
222 |         <td>✓</td>
223 |         <td>✓</td>
224 |         <td></td>
225 |         <td>✓</td>
226 |         <td>✓ 3</td>
227 |     </tr>
228 |     <tr>
229 |     	<th>WOFF</th>
230 |         <td>✓</td>
231 |         <td>✓</td>
232 |         <td>✓ 11.1+</td>
233 |         <td>✓ 5.1</td>
234 |         <td>✓ 9</td>
235 |         <td>✓ 5</td>
236 |         <td>✓ 4.4</td>
237 |     </tr>
238 | 
239 |     </tbody>
240 |     </table>
241 |   </section>
242 |   </div>
243 | 
244 | <!-- font tips -->
245 | <div class="slide normal">
246 |      <header><h1>Issues</h1></header>
247 |      <section class="content">
248 | <dl>
249 | 	<dt>Who owns the font?</dt>
250 |     <dd>Do you have the legal right to distribute your chosen font?</dd>
251 |     <dd>No? There are services!</dd>
252 |     <dt>FOUT</dt>
253 |     <dd>Flicker of Unstyled Content</dd>
254 |     <dt>File Size</dt>
255 |     <dd>Character sets can be huge, so file sizes can be huge</dd>
256 |     <dd>Need a different file for each font style</dd>
257 |     <dd>Font services</dd>
258 | </dl>
259 |      </section>
260 |  </div>
261 | 
262 | <!-- Google Fonts -->
263 | <div class="slide object">
264 | 		<object data="http://www.google.com/webfonts"  style="height:100%; width: 100%; background:url(img/googlefonts.gif); background-position: top center">
265 |         </object><header><h1>Google Fonts</h1></header>
266 |         <a href="http://www.google.com/webfonts" class="objectlink" target="resource">Google Fonts</a>
267 | </div>
268 | 
269 | <!--Font resources -->
270 | <div class="slide object">
271 | 	<object data="http://www.fontsquirrel.com/fontface/generator"></object>
272 |     <header><h1>font-squirrel</h1></header>
273 |     <a href="http://www.fontsquirrel.com/fontface/generator" class="objectlink" target="resource">FontSquirrel @font-face generator</a>
274 | </div>
275 | 
276 | <div class="slide intro">
277 |      <header><h1>Shadows</h1></header>
278 |     </div>
279 | 
280 | <!-- Text shadows -->
281 | <div class="slide normal">
282 | <header><h1>Text Shadows</h1></header>
283 | <section class="content">
284 | <ul class="opacity" style="padding: 10px 0 30px;">
285 | <li>
286 | <pre contenteditable>
287 | text-shadow: left top blur color;
288 | </pre>
289 | </li>
290 | <li class="angled" style="padding-right: 10px;"><span style="text-shadow: 0 5px 1px  rgba(0,0,0,0.2);">Transparent Shadows</span>
291 | <pre contenteditable style="text-shadow: 0 5px 1px  rgba(0,0,0,0.2); margin-left: 20px;">
292 | .trans { text-shadow: 0 5px 1px rgba(0,0,0,0.2);}</pre></li>
293 | <li class="angled" style="padding-right: 10px;"><span style="text-shadow: 0 5px 1px  #666">Solid Shadows</span>
294 | 
295 | <pre contenteditable style="margin-left: 20px;text-shadow: 0 5px 1px  #666">
296 | .solid { text-shadow: 0 5px 1px #999;}</pre></li>
297 | </ul>
298 | </section>
299 | </div>
300 | 
301 | <!-- Text Shadow -->
302 | <div class="slide">
303 | <section class="content">
304 | <h1 class="textshadow" contenteditable style="margin: -10px 0">Text Shadow</h1>
305 | <pre contenteditable style="text-shadow:  0 2px 5px hsla(0, 0%, 0%, 0.2)">text-shadow:  0 2px 5px hsla(0, 0%, 0%, 0.2);
306 | text-shadow: [horiz] [vert] [blur] [color];</pre> <pre contenteditable>.textshadow { text-shadow:
307 |     0 1px #cccccc,
308 |     0 2px #c9c9c9,
309 |     0 3px #bbbbbb,
310 |     0 4px #b9b9b9,
311 |     0 5px #aaaaaa,
312 |     0 6px  1px  rgba(0, 0, 0, 0.1),
313 |     0 0    5px  rgba(0, 0, 0, 0.1),
314 |     0 1px  3px  rgba(0, 0, 0, 0.3),
315 |     0 3px  5px  rgba(0, 0, 0, 0.2),
316 |     0 5px  10px rgba(0, 0, 0, 0.25),
317 |     0 10px 10px rgba(0, 0, 0, 0.2),
318 |     0 20px 20px rgba(0, 0, 0, 0.15);
319 | }</pre>
320 |  <ul class="icons">
321 |          <li class="chrome">Chrome</li>
322 |          <li class="safari">Safari</li>
323 |          <li class="firefox">Firefox 3.5</li>
324 |          <li class="opera">Opera 9.5</li>
325 |          <li class="ie new">IE 10</li>
326 |      </ul>
327 | </section>
328 | </div>
329 | 
330 | <!-- text-shadow Westcit-->
331 | <div class="slide object">
332 | 	<object data="http://westciv.com/tools/shadows/"></object>
333 |   <a href="http://westciv.com/tools/shadows" class="objectlink" target="resource">Visit Site</a>
334 |   <header><h1>Text-Shadow</h1></header>
335 | </div>
336 | 
337 | <!-- MotherEffing -->
338 | <div class="slide object">
339 | 	<object data="http://mothereffingtextshadow.com/"></object>
340 |   <a href="http://mothereffingtextshadow.com/" class="objectlink" target="resource">Visit Site</a>
341 | </div>
342 | 
343 | <!-- box-shadow< -->
344 | <div class="slide">
345 | <header><h1>box-shadow</h1></header>
346 | <section class="content boxshadow">
347 | <b style="float:right; position:relative; top: 20px; right: 20px;"></b><pre contenteditable>
348 | box-shadow:
349 | 	inset 3px 3px 0 3px yellow,
350 | 	inset -3px -3px 0 5px blue,
351 | 	3px 3px 0 5px #666,
352 | 	-3px -3px 0 3px red;
353 | box-shadow:
354 |     inset? [horiz] [vert] [blur] [spread] [color];
355 | </pre>
356 | <ul class="notes">
357 | <li>Last shadow drawn 'first', under previous shadow</li>
358 | <li>Should still be -webkit- and -moz- prefixed for best support</li>
359 | </ul>
360 | <ul class="icons" style="clear: both;">
361 |          <li class="chrome">Chrome / Chrome 10</li>
362 |          <li class="safari">Safari 3 / Safari 5.1</li>
363 |          <li class="firefox">Firefox 3.5 / Firefox 4.0</li>
364 |          <li class="opera">Opera 9 / Opera 10.5</li>
365 |          <li class="ie"> <br/>IE 9</li>
366 |      </ul>
367 | </section>
368 | </div>
369 | 
370 | 
371 | <div class="slide object">
372 | <header><h1>Multiple Borders with Box Shadow</h1>
373 | <object data="files/72a_boxshadow.html"></object>
374 | <a href="files/72a_boxshadow.html" target="play" class="objectlink">Try it out</a>
375 | </div>
376 | 
377 | 
378 | <!-- Text Stroke -->
379 | <div class="slide object">
380 | <object data="http://westciv.com/tools/textStroke/index.html"></object>
381 |      <header><h1>Text-Stroke (not in spec)</h1></header>
382 |      <a href="http://westciv.com/tools/textStroke/index.html" class="objectlink" target="resource">Visit Site</a>
383 |  </div>
384 | 
385 | <!-- All CSS Properties -->
386 | <div class="slide object">
387 |   <object data="http://meiert.com/en/indices/css-properties/"></object>
388 |   <a href="http://meiert.com/en/indices/css-properties/" class="objectlink" target="resource">Visit Site</a>
389 |  </div>
390 | 
391 |  <!-- W3C-->
392 |  <div class="slide normal">
393 |      <header><h1>Specifications</h1></header>
394 |      <section class="content">
395 |      <a href="http://www.w3.org/TR/css3-text/" class="objectlink">W3C Text Module</a>
396 | 
397 |      <dl class="deprecated appearance">
398 | 
399 |       <dt><a href="http://www.w3.org/TR/css3-text/#hanging-punctuation0"><del>hanging-punctuation</del></a></dt>
400 |       <dd>none | [ first || [ force-end | allow-end ] || last ]</dd>
401 |       <dt><a href="http://www.w3.org/TR/css3-text/#hyphens0">hyphens</a></dt>
402 |       <dd>none | manual | auto</dd>
403 |       <dt><a href="http://www.w3.org/TR/css3-text/#letter-spacing0">letter-spacing</a></dt>
404 |       <dd>&lt;spacing-limit&gt;</dd>
405 |       <dt><a href="http://www.w3.org/TR/css3-text/#line-break0">line-break</a></dt>
406 |       <dd>auto | loose | normal | strict</dd>
407 |       <dt><a href="http://www.w3.org/TR/css3-text/#overflow-wrap0">overflow-wrap</a></dt>
408 |       <dd>normal | break-word</dd>
409 |       <dt><a href="http://www.w3.org/TR/css3-text/#tab-size0">tab-size</a></dt>
410 |       <dd>&lt;integer&gt; | <del>&lt;length&gt;</del></dd>
411 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-align0">text-align</a></dt>
412 |       <dd>[ [ start | end | left | right | center ] || &lt;string&gt; ] | justify | match-parent | <del>start end</del></dd>
413 |       <dt><a href="https://developer.mozilla.org/en/CSS/text-align-last">text-align-last</a></dt>
414 |       <dd>auto | start | end | left | right | center | justify</dd>
415 |       <dt><a href="https://developer.mozilla.org/en/CSS/text-decoration">text-decoration</a></dt>
416 |       <dd>&lt;text-decoration-line&gt; || &lt;text-decoration-style&gt; || &lt;text-decoration-color&gt; || blink</dd>
417 |       <dt><a href="https://developer.mozilla.org/en/CSS/text-decoration-color">text-decoration-color</a></dt>
418 |       <dd>&lt;color&gt;</dd>
419 |       <dt><a href="https://developer.mozilla.org/en/CSS/text-decoration-line">text-decoration-line</a></dt>
420 |       <dd>none | [ underline || overline || line-through ]</dd>
421 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-decoration-skip0">text-decoration-skip</a></dt>
422 |       <dd>none | [ objects || spaces || ink || edges ]</dd>
423 |       <dt><a href="https://developer.mozilla.org/en/CSS/text-decoration-style">text-decoration-style</a></dt>
424 |       <dd>solid | double | dotted | dashed | wavy</dd>
425 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-emphasis0">text-emphasis</a></dt>
426 |       <dd>&lsquo;&lt;text-emphasis-style&gt;&rsquo; || &lsquo;&lt;text-emphasis-color&gt;&rsquo;</dd>
427 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-emphasis-color0">text-emphasis-color</a></dt>
428 |       <dd>&lt;color&gt;</dd>
429 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-emphasis-position0">text-emphasis-position</a></dt>
430 |       <dd>[ above | below ] &amp;&amp; [ right | left ]</dd>
431 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-emphasis-style0">text-emphasis-style</a></dt>
432 |       <dd>none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | &lt;string&gt;</dd>
433 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-indent0">text-indent</a></dt>
434 |       <dd>[ &lt;length&gt; | &lt;percentage&gt; ] &amp;&amp; [ hanging || each-line ]?</dd>
435 |       <dt><del><a href="http://www.w3.org/TR/css3-text/#text-justify0">text-justify</a></del></dt>
436 |       <dd>auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida</dd>
437 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-shadow0">text-shadow</a></dt>
438 |       <dd>none | [ &lt;length&gt;{2,3} &amp;&amp; &lt;color&gt;? ]#</dd>
439 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-space-collapse">text-space-collapse</a></dt>
440 |       <dd>collapse | preserve | preserve-breaks</dd>
441 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-transform0">text-transform</a></dt>
442 |       <dd>none | [ [ capitalize | uppercase | lowercase ] || <del>full-width</del> || full-size-kana ]</dd>
443 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-underline-position0">text-underline-position</a></dt>
444 |       <dd>auto | alphabetic | [ below || [ left | right ] ]</dd>
445 |       <dt><a href="http://www.w3.org/TR/css3-text/#text-wrap0">text-wrap</a></dt>
446 |       <dd>normal | none | avoid</dd>
447 |       <dt><a href="http://www.w3.org/TR/css3-text/#white-space0">white-space</a></dt>
448 |       <dd>normal | pre | nowrap | pre-wrap | pre-line</dd>
449 |       <dt><a href="http://www.w3.org/TR/css3-text/#word-break0">word-break</a></dt>
450 |       <dd>normal | keep-all | break-all</dd>
451 |       <dt><a href="http://www.w3.org/TR/css3-text/#word-spacing0">word-spacing</a></dt>
452 |       <dd>&lt;spacing-limit&gt; (<del>%</del>)</dd>
453 |       <dt><a href="http://www.w3.org/TR/css3-text/#overflow-wrap-property">word-wrap</a> / <a href="http://www.w3.org/TR/css3-text/#overflow-wrap-property">overflow-wrap</a></dt>
454 |       <dd>normal | break-word</dd>
455 | </dl>
456 |      </section>
457 |  </div>
458 | 
459 | <!-- Prefixed properties -->
460 | <div class="slide  object">
461 |      <object data="http://peter.sh/experiments/vendor-prefixed-css-property-overview/"></object>
462 |      <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/" class="objectlink" target="_new">Visit Site</a>
463 |  </div>
464 | 
465 | <!-- Next -->
466 | <div class="slide intro">
467 |      <header><h1>Borders &amp; Backgrounds</h1></header>
468 |      <section class="content">
469 |   <h1><a href="part_08_backgrounds.html#slide3">Next ➹</a></h1>
470 |      </section>
471 |     </div>
472 | 
473 | 
474 | 
475 | 
476 | 
477 | 
478 | 
479 | 
480 | 
481 | 
482 |   </div>
483 |   <script src="slides.js"></script>
484 |   </div></body>
485 | </html>
486 | 


--------------------------------------------------------------------------------
/slides.js:
--------------------------------------------------------------------------------
  1 | // JavaScript Document
  2 | // Makes the slidedeck work
  3 | 
  4 | (function() {
  5 | 	var doc = document,
  6 | 	    disableBuilds = true,
  7 | 		ctr = 0,
  8 | 		spaces = /\s+/,
  9 | 		a1 = [''],
 10 | 	    toArray = function(list) {
 11 |   		return Array.prototype.slice.call(list || [], 0);
 12 | 	},
 13 | 		byId = function(id) {
 14 | 		if (typeof id == 'string') { return doc.getElementById(id); }
 15 | 		return id;
 16 | 	},
 17 | 
 18 | 	query = function(query, root) {
 19 | 	  if (!query) { return []; }
 20 | 		if (typeof query != 'string') { return toArray(query); }
 21 | 		if (typeof root == 'string') {
 22 | 		  root = byId(root);
 23 | 		  if(!root){ return []; }
 24 |     	}
 25 |         root = root || document;
 26 |   		var rootIsDoc = (root.nodeType == 9);
 27 |   		var doc = rootIsDoc ? root : (root.ownerDocument || document);
 28 | 
 29 | 		// rewrite the query to be ID rooted
 30 | 		if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
 31 | 			root.id = root.id || ('qUnique' + (ctr++));
 32 | 			query = '#' + root.id + ' ' + query;
 33 | 		}
 34 | 
 35 | 		// don't choke on something like ".yada.yada >"
 36 | 		if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }
 37 | 		return toArray(doc.querySelectorAll(query));
 38 | 	},
 39 | 
 40 | 	strToArray = function(s) {
 41 | 		if (typeof s == 'string' || s instanceof String) {
 42 | 			if (s.indexOf(' ') < 0) {
 43 | 				a1[0] = s;
 44 | 				return a1;
 45 | 			}
 46 | 			else {
 47 | 					return s.split(spaces);
 48 | 			}
 49 | 		}
 50 | 		return s;
 51 | 	  },
 52 | 
 53 |     addClass = function(node, classStr) {
 54 | 	  classStr = strToArray(classStr);
 55 | 	  var cls = ' ' + node.className + ' ';
 56 | 	  for (var i = 0, len = classStr.length, c; i < len; ++i) {
 57 | 		c = classStr[i];
 58 | 		if (c && cls.indexOf(' ' + c + ' ') < 0) {
 59 | 		  cls += c + ' ';
 60 | 		}
 61 | 	  }
 62 | 	  node.className = cls.trim();
 63 | 	},
 64 | 
 65 | 	removeClass = function(node, classStr) {
 66 | 		  var cls;
 67 | 		  if (classStr !== undefined) {
 68 | 			classStr = strToArray(classStr);
 69 | 			cls = ' ' + node.className + ' ';
 70 | 			for (var i = 0, len = classStr.length; i < len; ++i) {
 71 | 			  cls = cls.replace(' ' + classStr[i] + ' ', ' ');
 72 | 			}
 73 | 			  cls = cls.trim();
 74 | 		  } else {
 75 | 			cls = '';
 76 | 		  }
 77 | 
 78 | 		  if (node.className != cls) {
 79 | 			node.className = cls;
 80 | 		  }
 81 | 
 82 | 	  },
 83 | 
 84 | 	  toggleClass = function(node, classStr) {
 85 | 		  var cls = ' ' + node.className + ' ';
 86 | 		  if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
 87 | 			removeClass(node, classStr);
 88 | 		  } else {
 89 | 			addClass(node, classStr);
 90 | 		  }
 91 | 	  },
 92 | 
 93 | 
 94 | 
 95 |   		ua = navigator.userAgent,
 96 | 		isFF = parseFloat(ua.split('Firefox/')[1]) || undefined,
 97 | 		isWK = parseFloat(ua.split('WebKit/')[1]) || undefined,
 98 | 		isOpera = parseFloat(ua.split('Opera/')[1]) || undefined,
 99 | 
100 | 
101 | 
102 |   	 	canTransition = (function() {
103 | 		  var ver = parseFloat(ua.split('Version/')[1]) || undefined;
104 | 		  // test to determine if this browser can handle CSS transitions.
105 | 		  var cachedCanTransition =
106 | 
107 | 			(isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
108 | 		  return function() { return cachedCanTransition; }
109 | 
110 |   		}
111 |   )();
112 | 
113 | 
114 | //-----------------------------------------------------------------//
115 | 
116 | var Slide = function(node, idx) {
117 |   this._node = node;
118 |   if (idx >= 0) {
119 |     this._count = idx + 1;
120 |   }
121 |   if (this._node) {
122 |     addClass(this._node, 'slide distant-slide');
123 |   }
124 |   this._makeCounter();
125 |   this._makeBuildList();
126 | };
127 | 
128 | 
129 | 
130 | Slide.prototype = {
131 |     _node: null,
132 |     _count: 0,
133 |     _buildList: [],
134 |     _visited: false,
135 |     _currentState: '',
136 |     _states: [ 'distant-slide', 'far-past',
137 |                'past', 'current', 'future',
138 |                'far-future', 'distant-slide' ],
139 |     setState: function(state) {
140 |     if (typeof state != 'string') {
141 |       state = this._states[state];
142 |     }
143 | 
144 |     if (state == 'current' && !this._visited) {
145 |       this._visited = true;
146 |       this._makeBuildList();
147 |     }
148 | 
149 |     removeClass(this._node, this._states);
150 |     addClass(this._node, state);
151 |     this._currentState = state;
152 | 
153 | 
154 | 
155 |   var _t = this;
156 |     setTimeout(function(){ _t._runAutos(); } , 400);
157 |   },
158 | 
159 |     _makeCounter: function() {
160 |     if(!this._count || !this._node) { return; }
161 | 
162 |       var c = doc.createElement('span');
163 |     c.innerHTML = this._count;
164 |     c.className = 'counter';
165 |     this._node.appendChild(c);
166 |   },
167 | 
168 |     _makeBuildList: function() {
169 |     this._buildList = [];
170 |     if (disableBuilds) { return; }
171 | 
172 |       if (this._node) {
173 |       this._buildList = query('[data-build] > *', this._node);
174 |     }
175 | 
176 |       this._buildList.forEach(function(el) {
177 |       addClass(el, 'to-build');
178 |     });
179 |   },
180 | 
181 |     _runAutos: function() {
182 |     if (this._currentState != 'current') {
183 |       return;
184 |     }
185 | 
186 |       // find the next auto, slice it out of the list, and run it
187 | 
188 |       var idx = -1;
189 |     this._buildList.some(function(n, i) {
190 |       if (n.hasAttribute('data-auto')) {
191 |         idx = i;
192 |         return true;
193 |       }
194 | 
195 |         return false;
196 |     });
197 |     if (idx >= 0) {
198 |       var elem = this._buildList.splice(idx, 1)[0];
199 |       var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
200 |       var _t = this;
201 |       if (canTransition()) {
202 |         var l = function(evt) {
203 |           elem.parentNode.removeEventListener(transitionEnd, l, false);
204 |           _t._runAutos();
205 |         };
206 |         elem.parentNode.addEventListener(transitionEnd, l, false);
207 |         removeClass(elem, 'to-build');
208 |       } else {
209 |         setTimeout(function() {
210 |           removeClass(elem, 'to-build');
211 |           _t._runAutos();
212 |         }, 400);
213 |       }
214 | 
215 |       }
216 | 
217 |     },
218 | 
219 |     buildNext: function() {
220 |     if (!this._buildList.length) {
221 |       return false;
222 |     }
223 | 
224 |       removeClass(this._buildList.shift(), 'to-build');
225 |     return true;
226 |   },
227 | 
228 |   };
229 | 
230 | 
231 | 
232 |   //
233 |   // SlideShow class
234 |   //
235 | 
236 |   var SlideShow = function(slides) {
237 |   this._slides = (slides || []).map(function(el, idx) {
238 |     return new Slide(el, idx);
239 |   });
240 | 
241 | 
242 | 
243 |   var h = window.location.hash;
244 |   try {
245 |     this.current = parseInt(h.split('#slide')[1], 10);
246 |   } catch (e) { /* squeltch */ }
247 | 
248 |   this.current = isNaN(this.current) ? 1 : this.current;
249 |   var _t = this;
250 |   doc.addEventListener('keydown', function(e) { _t.handleKeys(e); }, false);
251 |   doc.addEventListener('mousewheel', function(e) { _t.handleWheel(e); }, false);
252 |   doc.addEventListener('DOMMouseScroll', function(e) { _t.handleWheel(e); }, false);
253 |   doc.addEventListener('touchstart',  function(e) { _t.handleTouchStart(e); }, false);
254 |   doc.addEventListener('touchend', function(e) { _t.handleTouchEnd(e); }, false);
255 |   window.addEventListener('popstate', function(e) { _t.go(e.state); }, false);
256 |   doc.getElementById('back').addEventListener('click', function(e) {_t.prev();}, false);
257 |   doc.getElementById('next').addEventListener('click', function(e) {_t.next();}, false);
258 |   this._update();
259 | };
260 | 
261 | 
262 | 
263 | SlideShow.prototype = {
264 |   _slides: [],
265 | 
266 |     _update: function(dontPush) {
267 | 		document.querySelector('#presentation-counter').innerText = this.current;
268 | 		if (history.pushState) {
269 | 		  if (!dontPush) {
270 | 			history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
271 | 		    }
272 | 		} else {
273 | 		  window.location.hash = 'flopslide' + this.current;
274 | 		}
275 | 	    for (var x = this.current-1; x < this.current + 7; x++) {
276 | 		    if (this._slides[x-4]) {
277 | 				this._slides[x-4].setState(Math.max(0, x-this.current));
278 | 		    }
279 | 		  }
280 |     },
281 | 
282 |     current: 0,
283 | 
284 |     next: function() {
285 | 		if (!this._slides[this.current-1].buildNext()) {
286 | 		  this.current = Math.min(this.current + 1, this._slides.length);
287 | 		  this._update();
288 | 		}
289 | 	 },
290 | 	prev: function() {
291 | 	this.current = Math.max(this.current-1, 1);
292 | 	this._update();
293 |   },
294 | 
295 |    go: function(num) {
296 | 	  if (!num) return;
297 | 	  if (history.pushState && this.current != num) {
298 | 	    history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
299 | 	  }
300 | 	  this.current = num;
301 | 	  this._update(true);
302 |     },
303 | 
304 | 
305 | 
306 |   _notesOn: false,
307 | 
308 |  showNotes: function() {
309 |     var isOn = this._notesOn = !this._notesOn;
310 |     query('.notes').forEach(function(el) {
311 |       el.style.display = (isOn) ? '' : 'none';
312 |     });
313 |   },
314 | 
315 | 
316 |     handleWheel: function(e) {
317 |     var delta = 0;
318 |     if (e.wheelDelta) {
319 |       delta = e.wheelDelta/120;
320 |       if (isOpera) {
321 | 			delta = -delta;
322 | 		  }
323 |       }
324 | 	  else if (e.detail) {
325 |         delta = -e.detail/3;
326 |       }
327 | 
328 |       if (delta > 0 ) {
329 | 		  this.prev();
330 | 		  return;
331 | 		}
332 |       if (delta < 0 ) {
333 | 		  this.next();
334 | 		  return;
335 | 		}
336 |     },
337 | 
338 | 	addNotes: function(){
339 | 		if(document.querySelector('.current textarea.mynotes')) {
340 | 			document.querySelector('.current textarea.mynotes').classList.toggle('temphidden');
341 | 			return;
342 | 		}
343 | 		var ta = document.createElement('textarea'),
344 | 		     currentSlide = document.querySelector('.current section'),
345 | 			 path = window.location.pathname,
346 | 			 A = path.lastIndexOf('/') + 1,
347 | 			 B = path.lastIndexOf('.'),
348 | 			 firstPartOfKey, key;
349 | 		if(B && B > A){
350 | 		    firstPartOfKey = path.substring(A, B);
351 | 		} else {
352 | 		    firstPartOfKey = path.substring(1, path.length-1) || 'home';
353 | 		}
354 | 		//console.log(firstPartOfKey);
355 | 		key = firstPartOfKey +  window.location.hash;
356 | 		ta.value = window.localStorage.getItem(key) || '';
357 | 		ta.className = 'mynotes';
358 | 
359 | 		ta.addEventListener('keyup', function(){
360 | 			//console.log(key + ' ' + ta.value)
361 | 		    window.localStorage.setItem(key,ta.value);
362 | 		});
363 | 		currentSlide.appendChild(ta);
364 | 	},
365 | 
366 | 
367 | 	removeHidingClass: function(){
368 | 		var paragraphToShow = document.querySelector('.current .temphidden');
369 | 		if(paragraphToShow) {paragraphToShow.classList.remove('temphidden');}
370 | 
371 | 	},
372 | 
373 |     handleKeys: function(e) {
374 |       // disable keys for these elements
375 |       if (/^(input|textarea|pre|object)$/i.test(e.target.nodeName)) return;
376 | 
377 | 
378 |       switch (e.keyCode) {
379 | 		  case 37: // left arrow
380 | 		  case 33: // left clicker
381 | 			 this.prev(); break;
382 | 		  case 39: // right arrow
383 | 		  case 32: // space
384 | 		  case 34: // clicker right
385 | 			 this.next(); break;
386 | 		  case 50: // 2
387 | 		  case 190: // 2
388 | 			 this.showNotes();
389 | 			 this.removeHidingClass();
390 | 			 break;
391 | 	      case 52: // 4 (for taking notes with local storage (students)
392 | 		     this.addNotes(); break;
393 | 		     break;
394 |     	}
395 |     },
396 | 
397 |     _touchStartX: 0,
398 |     handleTouchStart: function(e) {
399 |     this._touchStartX = e.touches[0].pageX;
400 |   },
401 | 
402 |     handleTouchEnd: function(e) {
403 |     var delta = this._touchStartX - e.changedTouches[0].pageX;
404 |     var SWIPE_SIZE = 150;
405 |     if (delta > SWIPE_SIZE) {
406 |       this.next();
407 |     } else if (delta< -SWIPE_SIZE) {
408 |        this.prev();
409 |      }
410 |     },
411 |   };
412 | 
413 |   // Initialize
414 |   var slideshow = new SlideShow(query('.slide'));
415 |   //this.next();
416 | })();


--------------------------------------------------------------------------------