First commit

Apress · Oct 16, 2016 · 2e30f41 · 2e30f41
commit 2e30f41
Show file tree

Hide file tree

Showing 456 changed files with 2,042 additions and 0 deletions.
diff --git a/9781430247227.jpg b/9781430247227.jpg
diff --git a/Chapter 10/10-1.scss b/Chapter 10/10-1.scss
@@ -0,0 +1,7 @@
+#element {
+@include transition-property(width);
+@include transition-duration(2s);
+@include transition-timing-function(ease-in); }
+#element:hover {
+  width: 180%
+}
diff --git a/Chapter 10/10-2.css b/Chapter 10/10-2.css
@@ -0,0 +1,8 @@
+#shaded-element {
+filter: custom(url(‘wobble.vs’)
+      40 40,
+      amplitude 60,
+      amount 0.0);
+)
+transition: filter ease-in-out 2s;
+}
diff --git a/Chapter 10/10-3.vs b/Chapter 10/10-3.vs
@@ -0,0 +1,21 @@
+precision mediump float;
+attribute vec3 a_position;
+attribute vec2 a_texCoord;
+uniform mat4 u_projectionMatrix;
+uniform float amplitude;
+uniform float amount; varying vec2 v_texCoord; const float rotate = 20.0; const float PI = 3.1415926; mat4 rotateX(float a) {...} mat4 rotateY(float a) {...} mat4 rotateZ(float a) {...} void main() {
+    v_texCoord = a_texCoord.xy;
+    vec4 pos = vec4(a_position, 1.0);
+    float r = 1.0 - abs((amount - 0.5) / 0.5);
+    float a = r * rotate * PI / 180.0;
+    mat4 rotX = rotateX(a);
+    mat4 rotY = rotateY(a / 4.0);
+    mat4 rotZ = rotateZ(a / 8.0);
+    float dx = 0.01 * cos(3.0 * PI * (pos.x + amount)) * r;
+    float dy = 0.01 * cos(3.0 * PI * (pos.y + amount)) * r;
+    float dz = 0.1 * cos(3.0 * PI * (pos.x + pos.y + amount)) * r;
+    pos.x += dx;
+    pos.y += dy;
+    pos.z += dz;
+    gl_Position = u_projectionMatrix * rotZ * rotY * rotX * pos;
+}
diff --git a/Chapter 10/10-4.css b/Chapter 10/10-4.css
@@ -0,0 +1,6 @@
+#shaded-element:hover {
+    filter: custom(url(‘wobble.vs’)
+    40 40,
+    amplitude 60,
+    amount 1.0);
+}
diff --git a/Chapter 2/Listing_2-1.html b/Chapter 2/Listing_2-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html> 
+<html> 
+<head> 
+<title>Simple CSS3 Transformation</title> 
+</head> 
+<body> 
+<p><img src=dudley-storey-statuette.jpg alt="Student-made statuette of Dudley Storey" 
+style = "width: 300px; height: 300px; float: left; margin: 0 2em 1.4em 0;" > Lorem ipsum dolor sit 
+amet, consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat, facilisis 
+in auctor semper, pharetra quis mi...</p> 
+</body> 
+</html>
diff --git a/Chapter 2/Listing_2-10.css b/Chapter 2/Listing_2-10.css
@@ -0,0 +1,5 @@
+img.tilt:hover { 
+-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); 
+-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); 
+transform: rotate(7.5deg); 
+}
diff --git a/Chapter 2/Listing_2-11.css b/Chapter 2/Listing_2-11.css
@@ -0,0 +1,7 @@
+img.tilt:hover { 
+-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); 
+-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); 
+transform: rotate(7.5deg); 
+-moz-transition: 2s all; -webkit-transition: 2s all; 
+-o-transition: 2s all; transition: 2s all; 
+} 
diff --git a/Chapter 2/Listing_2-12.css b/Chapter 2/Listing_2-12.css
@@ -0,0 +1,7 @@
+img.tilt:hover { 
+-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); 
+-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); 
+transform: rotate(7.5deg); 
+-moz-transition: 2.35s all; -webkit-transition: 2.35s all; 
+-o-transition: 2.35s all; transition: 2.35s all; 
+} 
diff --git a/Chapter 2/Listing_2-13.css b/Chapter 2/Listing_2-13.css
@@ -0,0 +1,8 @@
+img.tilt:hover { 
+-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); 
+-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); 
+transform: rotate(7.5deg); 
+-moz-transition: 2350ms all; 
+-webkit-transition: 2350ms all; -o-transition: 2350ms all; 
+transition: 2350ms all; 
+}
diff --git a/Chapter 2/Listing_2-14.css b/Chapter 2/Listing_2-14.css
@@ -0,0 +1,10 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transition: 2s all; -webkit-transition: 2s all; 
+-o-transition: 2s all; transition: 2s all; 
+} 
+img.tilt:hover { 
+-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); 
+-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); 
+transform: rotate(7.5deg); 
+} 
diff --git a/Chapter 2/Listing_2-15.css b/Chapter 2/Listing_2-15.css
@@ -0,0 +1,10 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transition: 2s; 
+-webkit-transition: 2s; -o-transition: 2s; 
+transition: 2s; } 
+img.tilt:hover { 
+-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); 
+-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); 
+transform: rotate(7.5deg); 
+} 
diff --git a/Chapter 2/Listing_2-16.css b/Chapter 2/Listing_2-16.css
@@ -0,0 +1,14 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transition: 2s; 
+-ms-transition: 2s; 
+-o-transition: 2s; 
+-webkit-transition: 2s; 
+transition: 2s; 
+} 
+img.tilt:hover { 
+-moz-transform: rotate(15deg); 
+-o-transform: rotate(15deg); -ms-transform: rotate(15deg); 
+-webkit-transform: rotate(15deg); transform: rotate(15deg); 
+opacity: .3; 
+} 
diff --git a/Chapter 2/Listing_2-17.css b/Chapter 2/Listing_2-17.css
@@ -0,0 +1,11 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; position: relative; 
+-moz-transition-property: opacity, left; 
+-o-transition-property: opacity, left; 
+-webkit-transition-property: opacity, left; 
+transition-property: opacity, left; 
+-moz-transition-duration: 2s, 4s; 
+-o-transition-duration: 2s, 4s; 
+-webkit-transition-duration: 2s, 4s; 
+transition-duration: 2s, 4s; 
+} 
diff --git a/Chapter 2/Listing_2-18.css b/Chapter 2/Listing_2-18.css
@@ -0,0 +1,16 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transition-property: opacity, translateX;-o-transition-property: opacity, translateX; 
+-webkit-transition-property: opacity, translateX; 
+transition-property: opacity, translateX; 
+-moz-transition-duration: 2s, 4s; 
+-o-transition-duration: 2s, 4s; 
+-webkit-transition-duration: 2s, 4s; 
+transition-duration: 2s, 4s; 
+} 
+img.tilt:hover { 
+opacity: .2; 
+-webkit-transform: translateX(60px); 
+-moz-transform: translateX(60px); -ms-transform: translateX(60px); 
+-o-transform: translateX(60px); transform: translateX(60px); 
+}
diff --git a/Chapter 2/Listing_2-19.css b/Chapter 2/Listing_2-19.css
@@ -0,0 +1,9 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); 
+-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); 
+transform: rotate(7.5deg); 
+-moz-transition: 2s transform linear; 
+webkit-transition: 2s transform linear; -o-transition: 2s transform linear; 
+transition: 2s transform linear; 
+} 
diff --git a/Chapter 2/Listing_2-2.html b/Chapter 2/Listing_2-2.html
@@ -0,0 +1,3 @@
+<img src="dudley-storey-statuette.jpg" alt="Statuette of Dudley Storey" style="width: 300px; 
+height: 300px; float: left; margin: 0 2em 1.4em 0; -moz-transform: rotate(7.5deg); -mstransform: rotate(7.5deg); -o-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); 
+transform: rotate(7.5deg); "> 
diff --git a/Chapter 2/Listing_2-20.css b/Chapter 2/Listing_2-20.css
@@ -0,0 +1,12 @@
+h1 { 
+   font-family: Futura; "Arial Black", Arial, sans-serif; 
+text-align: center; 
+} 
+h1:hover { 
+   -moz-transition: 4s all steps(3, end); 
+-webkit-transition: 4s all steps(3, end); 
+transition: 4s all steps(3, end); 
+-moz-transform: translateX(400px); 
+-webkit-transform: translateX(400px); 
+transform: translateX(400px); 
+}
diff --git a/Chapter 2/Listing_2-3.html b/Chapter 2/Listing_2-3.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html> 
+<html> 
+<head> 
+<title > Simple CSS3 Transformation</title> 
+<style> 
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transform: rotate(7.5deg); -o-transform: rotate(7.5deg); 
+-ms-transform: rotate(7.5deg); -webkit-transform: rotate(7.5deg); 
+transform: rotate(7.5deg); 
+} 
+</style> 
+</head> 
+<body> 
+<p> <img src="dudley-storey-statuette.jpg" alt="Statuette of Dudley Storey" 
+style="margin: 0 2em 1.4em 0;" class="tilt"> Lorem ipsum dolor sit amet, 
+consectetur adipiscing elit. Suspendisse eu mi tellus. Vestibulum tortor erat, 
+facilisis in auctor semper, pharetra quis mi...</p> 
+</body> 
+</html> 
diff --git a/Chapter 2/Listing_2-4.css b/Chapter 2/Listing_2-4.css
@@ -0,0 +1,9 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transform-origin: right top; 
+-o-transform-origin: right top; -ms-transform-origin: right top; 
+-webkit-transform-origin: right top; transform-origin: right top; 
+-moz-transform: rotate(−10deg); -o-transform: rotate(−10deg); 
+-ms-transform: rotate(−10deg); -webkit-transform: rotate(−10deg); 
+transform: rotate(−10deg); 
+} 
diff --git a/Chapter 2/Listing_2-5.html b/Chapter 2/Listing_2-5.html
@@ -0,0 +1,3 @@
+<img src="lincoln.jpg" alt="Abraham Lincoln, 1863" style="width: 389px; height: 480px; 
+-moz-transform: scaleX(−1); -o-transform: scaleX(−1);  -ms-transform: scaleX(−1); 
+-webkit-transform: scaleX(−1); transform: scaleX(−1);"> 
diff --git a/Chapter 2/Listing_2-6.css b/Chapter 2/Listing_2-6.css
@@ -0,0 +1,6 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transform: translate(50px, -4em); -o-transform: translate(50px, -4em); 
+-ms-transform: translate(50px, -4em); -webkit-transform: translate(50px, -4em); 
+transform: translate(50px, -4em); 
+} 
diff --git a/Chapter 2/Listing_2-7.css b/Chapter 2/Listing_2-7.css
@@ -0,0 +1,6 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transform: skewX(21deg); -o-transform: skewX(21deg); 
+-ms-transform: skewX(21deg); -webkit-transform: skewX(21deg); 
+transform: skewX(21deg); 
+} 
diff --git a/Chapter 2/Listing_2-8.css b/Chapter 2/Listing_2-8.css
@@ -0,0 +1,6 @@
+img.tilt { 
+width: 300px; height: 300px; float: left; 
+-moz-transform: skewY(30deg); -o-transform: skewY(30deg); 
+-ms-transform: skewY(30deg);  -webkit-transform skewY(30deg); 
+transform: skewY(30deg); 
+}
diff --git a/Chapter 2/Listing_2-9.css b/Chapter 2/Listing_2-9.css
@@ -0,0 +1,6 @@
+img.tilt { width: 300px; height: 300px; float: left; 
+-moz-transform: translate(50px, -4em) rotate(15deg); 
+-webkit-transform: translate(50px, -4em) rotate(15deg); 
+-o-transform: translate(50px, -4em) rotate(15deg); 
+-ms-transform: translate(50px, -4em) rotate(15deg); 
+transform: translate(50px, -4em) rotate(15deg); } 
diff --git a/Chapter 3/Listing_3-1.html b/Chapter 3/Listing_3-1.html
@@ -0,0 +1,3 @@
+<div class=crossfade> 
+         <img src=jatropha-hybrid.jpg alt="Jatropha hybrid leaf"> 
+</div> 
diff --git a/Chapter 3/Listing_3-10.html b/Chapter 3/Listing_3-10.html
@@ -0,0 +1,2 @@
+<dt><img src=jatropha_thumb.jpg alt="Jatropha Leaf Thumbnail"> 
+<dd><img src=jatropha.jpg alt="Jatropha Leaf Large">A closeup photograph of a Jatropha Hybrid
diff --git a/Chapter 3/Listing_3-11.css b/Chapter 3/Listing_3-11.css
@@ -0,0 +1,4 @@
+dl#gallery dd { position: absolute; left: 200px; top: 2.2em; opacity: 0; 
+text-align: center; font-family: Futura, Arial, sans-serif; color: white; 
+transition: .85s opacity linear; } 
+dl#gallery dd img { display: block; margin: auto; padding-bottom: 1.2em; }
diff --git a/Chapter 3/Listing_3-12.css b/Chapter 3/Listing_3-12.css
@@ -0,0 +1 @@
+dl#gallery dt:active  +  dd { opacity: 1; } 
diff --git a/Chapter 3/Listing_3-13.html b/Chapter 3/Listing_3-13.html
@@ -0,0 +1,11 @@
+<dl id=gallery> 
+<dt><a href=#jatropha><img src=jatropha_thumb.jpg alt="Jatropha Leaf Thumbnail">< /a> 
+<dd id=jatropha><img src=jatropha.jpg alt="Jatropha Leaf Large"> 
+A closeup photograph of a Jatropha Hybrid leaf 
+<dt><a href=#veins><img src=leaf-veins_thumb.jpg alt="Leaf Veins Thumbnail">< /a> 
+<dd id=veins><img src=leaf-veins.jpg alt="Leaf Veins"> 
+Closeup photgraph of leaf veins 
+<dt><a href=#cascada><img src=cascada_thumb.jpg alt="Cascada Thumbnail">< /a> 
+<dd id=cascada><img src=cascada.jpg alt="Cascada Large"> 
+Falls in Dundas Peak, Ontario, Canada 
+</dl> 
diff --git a/Chapter 3/Listing_3-14.css b/Chapter 3/Listing_3-14.css
@@ -0,0 +1 @@
+dd#jatropha:target, dd#veins:target, dd#cascada:target { opacity: 1; } 
diff --git a/Chapter 3/Listing_3-15.html b/Chapter 3/Listing_3-15.html
@@ -0,0 +1,9 @@
+<figure> 
+         <img src=devils-tower.jpg alt="A photo of Devil's Tower, inWyoming, USA"> 
+         <figcaption> Devil's Tower, Wyoming, USA</figcaption> 
+</figure> 
+<figure style=left:550px> 
+         <img src=sunrise-point.jpg alt="A photo of Sunrise Point, Bryce National 
+Park, Utah, USA"> 
+         <figcaption> Bryce National Park, Utah, USA</figcaption> 
+</figure>
diff --git a/Chapter 3/Listing_3-16.css b/Chapter 3/Listing_3-16.css
@@ -0,0 +1,3 @@
+html { font-size: 62.5% } 
+body { font-size: 1.4rem; } 
+h1 { font-size: 2.4rem; }
diff --git a/Chapter 3/Listing_3-17.css b/Chapter 3/Listing_3-17.css
@@ -0,0 +1,6 @@
+figure { float: left; } 
+figure, figure img { width: 500px; height: 333px; } 
+figcaption { 
+font-family: Baskerville, "Baskerville Old Face", Garamond, "Times New Roman", serif; 
+font-style: italic; background: rgba(0,0,0,0.4); 
+font-size: 2rem; padding: 0.8rem; color: #fff; } 
diff --git a/Chapter 3/Listing_3-18.css b/Chapter 3/Listing_3-18.css
@@ -0,0 +1,8 @@
+figure { float: left; } 
+figure, figure img { width: 500px; height: 333px; overflow: hidden; } 
+figcaption { 
+font-family: Baskerville, Garamond, "Times New Roman", serif; 
+font-style: italic; background: rgba(0,0,0,0.4); font-size: 2rem; 
+padding: 0.8rem; color: #fff;  position: relative;  bottom: 400px; 
+} 
+figure:hover figcaption { bottom: 340px; } 
diff --git a/Chapter 3/Listing_3-19.css b/Chapter 3/Listing_3-19.css
@@ -0,0 +1,6 @@
+figcaption { 
+font-family: Baskerville, Garamond, "Times New Roman", serif; 
+font-style: italic; background: rgba(0,0,0,0.4); 
+font-size: 2rem; padding: 0.8 rem; color: #fff; 
+position: relative;  bottom: 400px; 
+transition: 2s all; } 
diff --git a/Chapter 3/Listing_3-2.css b/Chapter 3/Listing_3-2.css
@@ -0,0 +1,4 @@
+div.crossfade { background: url(leaf-veins.jpg); background-size: cover; } 
+div.crossfade, div.crossfade img  { width: 418px; height: 500px;  } 
+div.crossfade img { transition: 3s opacity ease-out; } 
+div.crossfade img:hover { opacity: 0; }
diff --git a/Chapter 3/Listing_3-20.html b/Chapter 3/Listing_3-20.html
@@ -0,0 +1,5 @@
+<div id=cardfan> 
+         <img src=bike.jpg alt="A photograph of a bicycle parked on Italian street"> 
+         <img src=florence.jpg alt="A photograph of bridge in Florence, Italy"> 
+         <img src=roma.jpg alt="A photograph of a ruined aqueduct outside Rome"> 
+</div> 
diff --git a/Chapter 3/Listing_3-21.css b/Chapter 3/Listing_3-21.css
@@ -0,0 +1,5 @@
+#cardfan, #cardfan img { width: 640px; height: 480px; } 
+#cardfan { margin: 0 auto; } 
+#cardfan img { border: 32px solid #ffe; 
+box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2); 
+position: absolute; } 
diff --git a/Chapter 3/Listing_3-22.css b/Chapter 3/Listing_3-22.css
@@ -0,0 +1,6 @@
+#cardfan:hover img:first-child { 
+     transform: rotate(12deg); 
+} 
+#cardfan:hover img:last-child { 
+     transform: rotate(−12deg);
+}
diff --git a/Chapter 3/Listing_3-23.css b/Chapter 3/Listing_3-23.css
@@ -0,0 +1,5 @@
+#cardfan img { border: 32px solid #ffe; 
+     box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2); 
+position: absolute; 
+transform-origin: center 600px; 
+} 
diff --git a/Chapter 3/Listing_3-24.css b/Chapter 3/Listing_3-24.css
@@ -0,0 +1,15 @@
+#cardfan, #cardfan img { width: 640px; height: 480px; 
+transition: .6s transform ease-out; 
+} 
+#cardfan { margin: 0 auto; } 
+#cardfan img { border: 32px solid #ffe; 
+box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2); 
+position: absolute; 
+transform-origin: center 1200px; 
+} 
+div#cardfan:hover img:first-child { 
+     transform: rotate(24deg); 
+} 
+div#cardfan:hover img:last-child { 
+     transform: rotate(−24deg); 
+}