├── 01-selectors
    ├── adjacent-sibling-combinator.html
    ├── attribute-hyphenated.html
    ├── attribute-selectors-substring.html
    ├── attribute-space-separated.html
    ├── child-combinator.html
    ├── descendant-combinator.html
    ├── general-sibling-combinator.html
    ├── index.html
    ├── input-pseudo-class.html
    ├── pseudo-class-first-last-type.html
    ├── pseudo-class-first-last.html
    ├── pseudo-class-first-of-type-first-letter.html
    ├── pseudo-class-not.html
    ├── pseudo-class-nth-child-AnB.html
    ├── pseudo-class-nth-child.html
    ├── pseudo-class-nth-last-child-AnB.html
    ├── pseudo-class-nth-last-of-type.html
    ├── pseudo-class-nth-of-type.html
    ├── pseudo-class-only-child.html
    ├── pseudo-class-target.html
    ├── pseudo-el-first-letter-drop.html
    ├── pseudo-el-first-letter-init.html
    ├── pseudo-el-first-line.html
    └── pseudo-el-selection.html
├── 04-layouts
    ├── box-sizing-border-box.html
    ├── column-span.html
    ├── flexbox.html
    ├── index.html
    ├── multi-column.html
    ├── stacking-context-menu.html
    ├── stacking-context-opacity.html
    └── stacking-context.html
├── 05-animation
    ├── animation
    │   ├── animation-direction.html
    │   ├── animation-events.html
    │   ├── animation-fill-mode.html
    │   ├── animation-play-state.html
    │   ├── percent-keyframes.html
    │   └── simple.html
    ├── index.html
    └── transitions
    │   ├── multiple-transitions.html
    │   ├── negative-delay.html
    │   ├── simple-withjs.html
    │   ├── simple.html
    │   ├── steps.html
    │   ├── timing-functions.html
    │   └── transition-end.html
├── 06-transforms
    ├── backface-visibility-card.html
    ├── backface-visibility.html
    ├── containing-block.html
    ├── index.html
    ├── perspective-function.html
    ├── perspective-origin.html
    ├── perspective.html
    ├── stacking-context.html
    ├── transform-origin-1.html
    ├── transform-perspective.html
    ├── transform-rotate3d-cube.html
    ├── transform-rotate3d.html
    ├── transform-rotate540.html
    ├── transform-rotateX.html
    ├── transform-rotateY.html
    ├── transform-rotateZ.html
    ├── transform-scale.html
    ├── transform-scale3d.html
    ├── transform-scaleX.html
    ├── transform-scaleY.html
    ├── transform-scaleZ.html
    ├── transform-skew.html
    ├── transform-skewX.html
    ├── transform-skewY.html
    ├── transform-style.html
    ├── transform-translate.html
    ├── transform-translate3d-cube.html
    └── transform-translateZ.html
├── 07-conditionalcss
    ├── index.html
    ├── media-query-discrete.html
    ├── media-query-events.html
    ├── media-query-nested.html
    ├── media-query-simple.html
    ├── supports-flexbox.html
    └── supports-simple.html
├── 08-svg
    ├── index.html
    ├── respond.src.js
    ├── svg-fragments.html
    ├── svg-media-queries-bg.html
    ├── svg-media-queries.html
    ├── svg-wipe-in.html
    └── twinkling-star.html
├── css
    ├── base.css
    ├── chapter1
    │   ├── selectors-firstlast.css
    │   ├── selectors-input.css
    │   ├── selectors-not.css
    │   ├── selectors-nth-child.css
    │   └── selectors-target.css
    ├── chapter4
    │   ├── box-sizing.css
    │   ├── flex.css
    │   ├── floats.css
    │   ├── menu.css
    │   ├── multi-col.css
    │   └── stacking.css
    ├── chapter5
    │   ├── anim-play-state.css
    │   ├── animpctkeyframes.css
    │   ├── animsimple.css
    │   ├── multi-trans.css
    │   ├── negative-delay.css
    │   ├── simple-withjs.css
    │   ├── simple.css
    │   ├── steps.css
    │   ├── timing-functions.css
    │   └── trans-end.css
    ├── chapter6
    │   ├── backface-vis.css
    │   ├── carousel.css
    │   ├── dice.css
    │   ├── persp-origin.css
    │   ├── perspective-func.css
    │   ├── rotate.css
    │   ├── scale.css
    │   ├── skew.css
    │   ├── stacking.css
    │   ├── transform-origin.css
    │   ├── transform-style.css
    │   ├── transform.css
    │   └── translate.css
    ├── chapter7
    │   ├── mq.css
    │   └── supports.css
    └── chapter8
    │   └── svg.css
├── images
    ├── Buteo_magnirostris_by_Dario_Sanches.jpg
    ├── awesomenews.svg
    ├── csscircle-blue.svg
    ├── csscircle-pink.svg
    ├── csscircle-yellow.svg
    ├── csscircle.svg
    ├── diamond.png
    ├── menu.svg
    ├── phone-icon.svg
    ├── portrait.png
    ├── svg-icons.svg
    ├── svgmq.svg
    ├── svgmqbg.svg
    └── tomato.png
├── index.html
├── js
    ├── chapter1
    │   └── selectors.js
    ├── chapter4
    │   ├── box-sizing.js
    │   ├── flexbox.js
    │   ├── muticol.js
    │   └── stacking.js
    ├── chapter5
    │   ├── anim-events.js
    │   ├── fill-mode.js
    │   ├── play-pause.js
    │   └── stop-anim.js
    ├── chapter6
    │   ├── backface-vis-card.js
    │   ├── backface-vis.js
    │   ├── persp-origin.js
    │   ├── perspective-func.js
    │   ├── perspective.js
    │   ├── rotate3d.js
    │   ├── rotations.js
    │   ├── scale.js
    │   ├── scale3d.js
    │   ├── scaleZ.js
    │   ├── transform-style.js
    │   ├── translate.js
    │   ├── translate3d.js
    │   └── translateZ.js
    ├── chapter8
    │   └── svg.js
    ├── convertangles.min.js
    ├── css.js
    ├── escapereset.js
    └── html5shiv.min.js
└── scss
    ├── base.scss
    ├── chapter1
        ├── selectors-firstlast.scss
        ├── selectors-input.scss
        ├── selectors-not.scss
        ├── selectors-nth-child.scss
        └── selectors-target.scss
    ├── chapter4
        ├── box-sizing.scss
        ├── flex.scss
        ├── floats.scss
        ├── menu.scss
        ├── multi-col.scss
        └── stacking.scss
    ├── chapter5
        ├── anim-play-state.scss
        ├── animpctkeyframes.scss
        ├── animsimple.scss
        ├── multi-trans.scss
        ├── negative-delay.scss
        ├── simple-withjs.scss
        ├── simple.scss
        ├── steps.scss
        ├── timing-functions.scss
        └── trans-end.scss
    ├── chapter6
        ├── backface-vis.scss
        ├── carousel.scss
        ├── dice.scss
        ├── persp-origin.scss
        ├── perspective-func.scss
        ├── rotate.scss
        ├── scale.scss
        ├── skew.scss
        ├── stacking.scss
        ├── transform-origin.scss
        ├── transform-style.scss
        ├── transform.scss
        └── translate.scss
    ├── chapter7
        ├── mq.scss
        └── supports.scss
    ├── chapter8
        └── svg.scss
    └── includes
        ├── _config.scss
        ├── _dice.scss
        ├── _layout.scss
        ├── _mixins.scss
        ├── _normalize.scss
        ├── _resets.scss
        └── _typography.scss


/01-selectors/attribute-selectors-substring.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Attribute Selectors - Matching attribute value substrings (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <style type="text/css">
11 | 		[href^="tel:"] {
12 | 			background: #2196f3 url(../images/phone-icon.svg) 10px center / 20px auto no-repeat;
13 | 			border-radius: 100px;
14 | 			line-height: 1;
15 | 			padding: .6em 1em .6em 2em;	
16 | 		}
17 | 		[href^="tel:"]:link,
18 | 		[href^="tel:"]:visited {
19 | 			color: #fff;
20 | 			text-decoration: none;
21 | 		}
22 | 		[href^="tel:"]:hover {
23 | 			background-color: #00bcd4
24 | 		}
25 |         </style> 
26 |        
27 |     </head>
28 |     <body>
29 |      	<header>
30 |             <h1><i>CSS Master</i> Code Examples: Attribute Selectors - Matching value substrings
31 |             </h1>
32 |             <a href="./index.html">Back to listing</a>
33 |        	</header>
34 | 		<main>
35 | 
36 | 			<p><a href="tel:+14045555555">Call this business</a></p>
37 | 			
38 | 		</main>
39 | 		<footer>
40 |             <p>
41 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
42 |             </p>
43 |         </footer>
44 | 
45 |     </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/01-selectors/attribute-space-separated.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Attribute Selectors - Space Separated Values (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <style type="text/css">
11 | 		[rel~=external] {
12 | 			font-size: 2em;
13 | 			padding: 4px;
14 | 			text-decoration: none;
15 | 			border-bottom: 3px solid #000;
16 | 		}
17 | 		[rel~=friend] {
18 | 			background: #C5D0D5;
19 | 			border-color: #607D8B;
20 | 		}
21 | 
22 | 		[rel~=friend]:link,
23 | 		[rel~=friend]:visited {
24 | 			color: #34444C;
25 | 		}
26 | 		[rel~=friend]:hover{
27 | 			background: #ffeb3b;
28 | 			border-color: #ffc107;
29 | 		}
30 | 
31 | 		[rel~=acquaintance] {
32 | 			background: #eee;
33 | 			border-color: #ccc;
34 | 		}
35 | 
36 | 		[rel~=acquaintance]:link,
37 | 		[rel~=acquaintance]:visited {
38 | 			color: #333;
39 | 		}
40 | 
41 | 		[rel~=acquaintance]:hover{
42 | 			background: #cddc39;
43 | 			border-color: #8bc34a;
44 | 		}
45 | 		
46 | 		
47 |         </style> 
48 |        
49 |     </head>
50 |     <body>
51 |      	<header>
52 |             <h1><i>CSS Master</i> Code Examples: Attribute Selectors - Space Separated Values</h1>
53 |             <a href="./index.html">Back to listing</a>
54 |        	</header>
55 | 		<main>
56 | 
57 | 			<p>The links below use a space-separated <code>rel</code> attribute. We're using <code>[rel~=external]</code> to match them.</p>
58 | 			<p><a href="http://example.com/" rel="external friend">Bob</a></p>
59 | 			<p><a href="http://example.com/" rel="external acquaintance">Mar&iacute;a</a></p>
60 | 			
61 | 		</main>
62 | 		<footer>
63 |             <p>
64 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
65 |             </p>
66 |         </footer>
67 | 
68 |     </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/01-selectors/pseudo-class-first-last-type.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>:first-of-type / :last-of-type (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <link rel="stylesheet" href="../css/chapter1/selectors-nth-child.css">
11 |     </head>
12 |     <body>
13 |      	<header>
14 |             <h1><i>CSS Master</i> Code Examples: <code>:first-of-type</code> / <code>:last-of-type</code></h1>
15 |             <a href="./index.html">Back to listing</a>
16 |        	</header>
17 | 
18 | 		<main>
19 |             <p>The <code>:first-of-type</code> / <code>:last-of-type</code> pseudo-classes are intended to be used with element or type selectors.</p>
20 |             <article class="nth-wrap first-last">
21 | 
22 |                 <div class="nth-item">1</div><p class="nth-item">2</p><div class="nth-item">3</div><p class="nth-item">4</div><p class="nth-item">5</p><div class="nth-item">6</div><p class="nth-item">7</p><p class="nth-item">8</p><div class="nth-item">9</div><p class="nth-item">10</p><div class="nth-item">11</div><p class="nth-item">12</p><p class="nth-item">13</p><div class="nth-item">14</div><p class="nth-item">15</p><div class="nth-item">16</div><p class="nth-item">17</p><p class="nth-item">18</p><div class="nth-item">19</div><div class="nth-item">20</div>
23 | 
24 |             </article>
25 | 		</main>
26 |        <footer>
27 |             <p>
28 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
29 |             </p>
30 |         </footer>
31 |     </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/01-selectors/pseudo-class-first-last.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>:first-child and :last-child (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <link rel="stylesheet" href="../css/chapter1/selectors-firstlast.css">
11 |     </head>
12 |     <body>
13 |      	<header>
14 |             <h1><i>CSS Master</i> Code Examples: Using <code>:first-child</code> and <code>:last-child</code></h1>
15 |             <a href="./index.html">Back to listing</a>
16 |        	</header>
17 | 
18 | 		<main>
19 |             <h2>List of fruits</h2>
20 |             <p>The first <code>li</code> element is <b class="apple">bold and green</b> and the last  <code>li</code> element is <i class="strawberry">italicized and hot pink</i>. They are both children of <code>ul</code>. Elements that match <code>*:first-child</code> have a gray background. </p>
21 |             <ul>
22 |                 <li>Apples</li>
23 |                 <li>Bananas</li>
24 |                 <li>Blueberries</li>
25 |                 <li>Oranges</li>
26 |                 <li>Strawberries</li>
27 |             </ul>
28 | 
29 |             <h2>List of auto makers</h2>
30 |              <ul>
31 |                 <li>Honda</li>
32 |                 <li>Toyota</li>
33 |                 <li>Chevrolet</li>
34 |                 <li>Daihatsu</li>
35 |                 <li>Ford</li>
36 |             </ul>
37 | 		</main>
38 |        <footer>
39 |             <p>
40 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
41 |             </p>
42 |         </footer>
43 |     </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/01-selectors/pseudo-class-first-of-type-first-letter.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Using :first-of-type with ::first-letter (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <style type="text/css">
11 | 		p{
12 | 			margin-bottom: 2em;
13 | 		}
14 | 
15 | 		main p:first-of-type::first-letter {
16 | 			font: bold italic 2em / .5 'Iowan',serif;
17 | 			font-style: italic;
18 | 			color: #3f51b5;
19 | 		}
20 |         </style>
21 | 
22 |     </head>
23 |     <body>
24 |      	<header>
25 |             <h1><i>CSS Master</i> Code Examples: Using <code>:first-of-type</code> with <code>::first-letter</code></h1>
26 |             <a href="./index.html">Back to listing</a>
27 |        	</header>
28 | 
29 | 		<main>
30 |                 <h2 style="color: #222C63;font-size:3em; line-height: 1.2; font-family: 'Iowan', serif; font-style: oblique;letter-spacing:-.02em"> Consectetur adipiscing elit headlinium</code></h2>
31 | 
32 |     			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo, sollicitudin vel mattis eget, iaculis sit amet turpis. Quisque porta suscipit erat. Nulla sit amet neque eleifend diam aliquam rhoncus. Donec id congue est. Aliquam sagittis euismod tristique. Nunc aliquet iaculis ex, rutrum interdum nulla ultricies at. Curabitur turpis est, feugiat sit amet risus quis, mollis elementum libero. Cras vitae aliquet felis. Nam efficitur semper arcu a blandit. Aliquam id turpis fringilla libero gravida malesuada. Fusce auctor tincidunt vulputate.</p>
33 | 
34 | 				<p>Proin condimentum elit sapien, ut tempor nisl porta quis. Pellentesque vel quam efficitur, pharetra urna in, suscipit tortor. Pellentesque vel nisl sed tellus eleifend efficitur. Sed imperdiet diam sem, nec sodales libero lobortis non. Nunc semper felis sem, id pharetra lacus pellentesque tempor. Ut vitae scelerisque mauris. Nunc interdum ultricies laoreet. Nam a dui luctus, egestas enim sit amet, blandit quam. Phasellus lorem libero, sollicitudin id hendrerit a, faucibus eget nisi. Nulla et suscipit felis. Phasellus auctor nisi leo, a bibendum turpis convallis nec.</p>
35 | 
36 | 		</main>
37 | 
38 |        <footer>
39 |             <p>
40 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
41 |             </p>
42 |         </footer>
43 |     </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/01-selectors/pseudo-class-not.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>:not() selector (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <link rel="stylesheet" href="../css/chapter1/selectors-not.css">
11 |     </head>
12 |     <body>
13 |      	<header>
14 |             <h1><i>CSS Master</i> Code Examples: <code>:not()</code> selector</h1>
15 |             <a href="./index.html">Back to listing</a>
16 |        	</header>
17 | 
18 | 		<main>
19 | 
20 |     		<form method="post" action="#">
21 |     			<h1>Join the Cool Kids Club</h1>
22 | 
23 |     			<p>
24 |                     <label for="name">Name:</label>
25 |     			    <input type="text" id="name" name="name" required>
26 |     			</p>
27 |     			<p>
28 |                     <label for="email">Email:</label>
29 |     			    <input type="email" id="email" name="email" required>
30 |     			</p>
31 | 
32 |     			<fieldset>
33 |     			<legend>Receive a digest?</legend>
34 |     			<p>
35 |                     <input type="radio" id="daily" name="digest">
36 |                     <label for="daily" class="label-radio">Daily</label>
37 | 
38 |     			    <input type="radio" id="weekly" name="digest">
39 |     			    <label for="weekly" class="label-radio">Weekly</label>
40 |     			</p>
41 | 				</fieldset>
42 | 				<button type="submit">Buy Tickets!</button>
43 |     		</form>
44 | 		</main>
45 |        <footer>
46 |             <p>
47 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
48 |             </p>
49 |         </footer>
50 |     </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/01-selectors/pseudo-class-only-child.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>:only-child (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <link rel="stylesheet" href="../css/chapter1/selectors-nth-child.css">
11 |     </head>
12 |     <body>
13 |      	<header>
14 |             <h1><i>CSS Master</i> Code Examples: <code>:only-child</code></h1>
15 |             <a href="./index.html">Back to listing</a>
16 |        	</header>
17 | 
18 | 		<main>
19 |             <h2>Using <code>:only-child</code></h2>
20 |             <p>Elements that match <code>li:only-type</code> are marked with <span class="only-child">purple</span> text.</p>
21 |             <ul>
22 |                 <li>Apple</li>
23 |             </ul>
24 | 
25 |             <ul>
26 |                 <li>Orange</li>
27 |                 <li>Banana</li>
28 |                 <li>Raspberry</li>
29 |             </ul>
30 | 
31 |             <ul>
32 |                 <li>Mangosteen</li>
33 |             </ul>
34 | 
35 |             <ul>
36 |                 <li>Kiwi</li>
37 |                 <li>Dragonfruit</li>
38 |             </ul>
39 | 		</main>
40 |        <footer>
41 |             <p>
42 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
43 |             </p>
44 |         </footer>
45 |     </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/01-selectors/pseudo-el-first-letter-drop.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Initial Capital with ::first-letter (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <style type="text/css">
11 | 
12 | 		main p::first-letter {
13 | 			font: bold italic 3rem / 2rem serif;
14 | 			font-style: italic;
15 | 			color: #607d8b;
16 | 			float: left;
17 | 			margin: 0.25rem 0.25rem .25rem 0;
18 | 		}
19 | 
20 |         </style>
21 | 
22 |     </head>
23 |     <body>
24 |      	<header>
25 |             <h1><i>CSS Master</i> Code Examples: <code>::first-letter</code></h1>
26 |             <a href="./index.html">Back to listing</a>
27 |        	</header>
28 | 
29 | 		<main>
30 | 
31 |     			<h2>Using <code>::first-letter</code> to create a drop capital</h2>
32 | 
33 |     			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo, sollicitudin vel mattis eget, iaculis sit amet turpis. Quisque porta suscipit erat. Nulla sit amet neque eleifend diam aliquam rhoncus. Donec id congue est. Aliquam sagittis euismod tristique. Nunc aliquet iaculis ex, rutrum interdum nulla ultricies at. Curabitur turpis est, feugiat sit amet risus quis, mollis elementum libero. Cras vitae aliquet felis. Nam efficitur semper arcu a blandit. Aliquam id turpis fringilla libero gravida malesuada. Fusce auctor tincidunt vulputate.</p>
34 | 
35 | 				<p>Proin condimentum elit sapien, ut tempor nisl porta quis. Pellentesque vel quam efficitur, pharetra urna in, suscipit tortor. Pellentesque vel nisl sed tellus eleifend efficitur. Sed imperdiet diam sem, nec sodales libero lobortis non. Nunc semper felis sem, id pharetra lacus pellentesque tempor. Ut vitae scelerisque mauris. Nunc interdum ultricies laoreet. Nam a dui luctus, egestas enim sit amet, blandit quam. Phasellus lorem libero, sollicitudin id hendrerit a, faucibus eget nisi. Nulla et suscipit felis. Phasellus auctor nisi leo, a bibendum turpis convallis nec.</p>
36 | 
37 | 		</main>
38 |        <footer>
39 |             <p>
40 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
41 |             </p>
42 |         </footer>
43 |     </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/01-selectors/pseudo-el-first-letter-init.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Initial Capital with ::first-letter (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <style type="text/css">
11 | 		main p{
12 | 			margin-bottom: 2em;
13 | 		}
14 | 
15 | 		main p::first-letter {
16 | 			font: bold italic 3em / .5 serif;
17 | 			font-style: italic;
18 | 			color: #3f51b5;
19 | 		}
20 | 
21 | 
22 | 
23 |         </style>
24 | 
25 |     </head>
26 |     <body>
27 |      	<header>
28 |             <h1><i>CSS Master</i> Code Examples: <code>::first-letter</code></h1>
29 |             <a href="./index.html">Back to listing</a>
30 |        	</header>
31 | 
32 | 		<main>
33 | 
34 |     			<h2>Using <code>::first-letter</code> to create an initial capital</h2>
35 | 
36 | 
37 |     			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo, sollicitudin vel mattis eget, iaculis sit amet turpis. Quisque porta suscipit erat. Nulla sit amet neque eleifend diam aliquam rhoncus. Donec id congue est. Aliquam sagittis euismod tristique. Nunc aliquet iaculis ex, rutrum interdum nulla ultricies at. Curabitur turpis est, feugiat sit amet risus quis, mollis elementum libero. Cras vitae aliquet felis. Nam efficitur semper arcu a blandit. Aliquam id turpis fringilla libero gravida malesuada. Fusce auctor tincidunt vulputate.</p>
38 | 
39 | 				<p>Proin condimentum elit sapien, ut tempor nisl porta quis. Pellentesque vel quam efficitur, pharetra urna in, suscipit tortor. Pellentesque vel nisl sed tellus eleifend efficitur. Sed imperdiet diam sem, nec sodales libero lobortis non. Nunc semper felis sem, id pharetra lacus pellentesque tempor. Ut vitae scelerisque mauris. Nunc interdum ultricies laoreet. Nam a dui luctus, egestas enim sit amet, blandit quam. Phasellus lorem libero, sollicitudin id hendrerit a, faucibus eget nisi. Nulla et suscipit felis. Phasellus auctor nisi leo, a bibendum turpis convallis nec.</p>
40 | 
41 | 		</main>
42 |        <footer>
43 |             <p>
44 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
45 |             </p>
46 |         </footer>
47 |     </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/01-selectors/pseudo-el-first-line.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Using ::first-line (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <style type="text/css">
11 | 
12 | 		main p::first-line {
13 | 			font: bold 1.5em serif;
14 | 			font-style: italic;
15 | 			color: #673ab7;
16 | 		}
17 | 
18 |         </style>
19 | 
20 |     </head>
21 |     <body>
22 |         <header>
23 |             <h1><i>CSS Master</i> Code Examples: <code>::first-line</code></h1>
24 |             <a href="./index.html">Back to listing</a>
25 |        	</header>
26 | 
27 | 		<main>
28 | 
29 |     			<h2>Using <code>::first-line</code></h2>
30 | 
31 |     			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;Fusceodio leo, sollicitudin vel mattis eget, iaculis sit amet turpis. Quisque porta suscipit erat. Nulla sit amet neque eleifend diam aliquam rhoncus. Donec id congue est. Aliquam sagittis euismod tristique. Nunc aliquet iaculis ex, rutrum interdum nulla ultricies at. Curabitur turpis est, feugiat sit amet risus quis, mollis elementum libero. Cras vitae aliquet felis. Nam efficitur semper arcu a blandit. Aliquam id turpis fringilla libero gravida malesuada. Fusce auctor tincidunt vulputate.</p>
32 | 
33 | 				<p>Proin condimentum elit sapien, ut tempor nisl porta quis. Pellentesque vel quam efficitur, pharetra urna in, suscipit tortor. Pellentesque vel nisl sed tellus eleifend efficitur. Sed imperdiet diam sem, nec sodales libero lobortis non. Nunc semper felis sem, id pharetra lacus pellentesque tempor. Ut vitae scelerisque mauris. Nunc interdum ultricies laoreet. Nam a dui luctus, egestas enim sit amet, blandit quam. Phasellus lorem libero, sollicitudin id hendrerit a, faucibus eget nisi. Nulla et suscipit felis. Phasellus auctor nisi leo, a bibendum turpis convallis nec.</p>
34 | 		</main>
35 |        <footer>
36 |             <p>
37 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
38 |             </p>
39 |         </footer>
40 |     </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/01-selectors/pseudo-el-selection.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Using ::selection pseudo-element (CSS Master)</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <style type="text/css">
11 | 		::selection {
12 | 			background: #9f0;
13 | 			color: #600;
14 | 		}
15 |         ::-moz-selection {
16 |             background: #9f0;
17 | 			color: #600;
18 |         }
19 | 
20 | 
21 |         </style>
22 | 
23 |     </head>
24 |     <body>
25 |      	<header>
26 |             <h1><i>CSS Master</i> Code Examples: <code>::selection</code></h1>
27 |             <a href="./index.html">Back to listing</a>
28 |        	</header>
29 | 
30 | 		<main>
31 | 
32 |     			<h2>Using <code>::selection</code></h2>
33 | 				<p>Select some page text using your mouse.</p>
34 | 
35 |     			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;Fusceodio leo, sollicitudin vel mattis eget, iaculis sit amet turpis. Quisque porta suscipit erat.
36 |     			<em>Nulla sit amet neque eleifend diam aliquam rhoncus.</em> Donec id congue est. Aliquam sagittis euismod tristique. Nunc aliquet iaculis ex, rutrum interdum nulla ultricies at. Curabitur turpis est, feugiat sit amet risus quis, mollis elementum libero. Cras vitae aliquet felis. Nam efficitur semper arcu a blandit. Aliquam id turpis fringilla libero gravida malesuada. Fusce auctor tincidunt vulputate.</p>
37 | 
38 | 				<p>Proin condimentum elit sapien, ut tempor nisl porta quis. Pellentesque vel quam efficitur, pharetra urna in, suscipit tortor. Pellentesque vel nisl sed tellus eleifend efficitur. Sed imperdiet diam sem, nec sodales libero lobortis non. Nunc semper felis sem, id pharetra lacus pellentesque tempor. Ut vitae scelerisque mauris. Nunc interdum ultricies laoreet. Nam a dui luctus, egestas enim sit amet, blandit quam. Phasellus lorem libero, sollicitudin id hendrerit a, faucibus eget nisi. Nulla et suscipit felis. Phasellus auctor nisi leo, a bibendum turpis convallis nec.</p>
39 | 		</main>
40 |        <footer>
41 |             <p>
42 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
43 |             </p>
44 |         </footer>
45 |     </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/04-layouts/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 4 Complex Layouts</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter7/mq.css">
12 |     </head>
13 | 
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 4</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <nav class="content">
21 |             <h2>Complex Layouts</h2>
22 |             <ul>
23 |                 <li><a href="box-sizing-border-box.html"><code>box-sizing</code> property</a>
24 |                 <li><a href="stacking-context.html">Understanding Stacking Context</a>
25 |                 <li><a href="stacking-context-opacity.html">How <code>opacity</code> affects Stacking Context</a>
26 |                 <li><a href="stacking-context-menu.html">Managing Stacking Contexts with A Menu</a>
27 |                 <li><a href="flexbox.html">Understanding Flexbox</a>
28 |                 <li><a href="multi-column.html">Understanding Multiple Column layout</a>
29 |                 <li><a href="column-span.html"><code>column-span</code> property</a> (Not supported in Firefox)
30 |             </ul>
31 |         </nav>
32 | 
33 |         <footer>
34 |             <p>
35 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
36 |             </p>
37 |         </footer>
38 |     </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/04-layouts/stacking-context-opacity.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Stacking context and opacity (CSS Master)</title>
 7 | 
 8 |         <meta name="description" content="">
 9 |         <meta name="viewport" content="width=device-width, initial-scale=1">
10 |         <script src="../js/html5shiv.min.js"></script>
11 |         <link rel="stylesheet" href="../css/base.css">
12 |         <link rel="stylesheet" href="../css/chapter4/stacking.css">
13 |         <script src="../js/chapter4/stacking.js" defer></script>
14 |         <style>
15 |         #output {font-size: inherit;}
16 |         </style>
17 |     </head>
18 | 
19 |     <body>
20 |         <header>
21 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
22 |             <a href="./index.html">Back to listing</a>
23 |         </header>
24 | 
25 |         <main class="content">
26 | 
27 |                 <h2>Opacity and stacking context</h2>
28 |                 <p>Toggle the control above to switch the opacity of <code>div#f</code> between 0.99 and 1. The black backgrounded paragraph is a child of <code>div#f</code> with <code>z-index: 1</code> applied.</p>
29 | 
30 |                      <form>
31 |                          <p class="mono"><label for="opacity">opacity: </label><b id="output">1</b><br>
32 |                          <input type="range" min=".99" max="1" step=".01" id="opacity" name="opacity" class="toggle"></p>
33 |                      </form>
34 | 
35 |                    <div class="rel">
36 |                     <div id="f">
37 |                         <p><b>div#f</b></p>
38 |                     </div>
39 | 
40 |                     <div id="g">
41 |                         <p><b>div#g</b></p>
42 |                     </div>
43 |                     </div>
44 | 
45 |                 <p><code>opacity</code> values less than <code>1</code> create a local stacking context. Child elements are stacked within their parent. Elements in other stacking contexts can't (and won't) be stacked in between a child layer and its parent layer. <code>opacity</code> is not the only property that can <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">trigger</a> a local stacking context. Other properties include <code>transform</code> and <code>filter</code> when the value is something besides <code>none</code></p>
46 | 
47 | 
48 | 
49 |         </main>
50 | 
51 | 
52 |         <footer>
53 |             <p>
54 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
55 |             </p>
56 |         </footer>
57 |     </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/04-layouts/stacking-context.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - transform and stacking context</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter4/stacking.css">
12 |     </head>
13 | 
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
17 |             <a href="./index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">
21 | 
22 |                 <h2>Stacking context</h2>
23 | 
24 |                    <div class="wrapper rel">
25 |                     <div id="a">
26 |                         <p><b>div#a</b></p>
27 |                     </div>
28 | 
29 |                     <div id="b">
30 |                         <p><b>div#b</b></p>
31 |                     </div>
32 |                     <div id="c">
33 |                         <p><b>div#c</b></p>
34 |                     </div>
35 |                     <div id="d">
36 |                         <p><b>div#d</b></p>
37 |                     </div>
38 |                      <div id="e">
39 |                         <p><b>div#e</b></p>
40 |                     </div>
41 |                 </div>
42 |         </main>
43 | 
44 |         <footer>
45 |             <p>
46 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
47 |             </p>
48 |         </footer>
49 |     </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/05-animation/animation/animation-events.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 5 - Animation events</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../../css/base.css">
11 |         <link rel="stylesheet" href="../../css/chapter5/anim-play-state.css">
12 | 	</head>
13 |         
14 |     <body>
15 |        <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 5</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2>Detecting animation events</h2> 
22 |             <p>Click the button below to start the animation. The animation will run 5 times. Whenever an event fires, the <em>Event list</em> panel will update with the name of the animation that ended (wobble), and the event type.</p>
23 |             
24 |             <div class="flex">
25 |                 <section class="animate half">
26 |                     <form>
27 |                         <p>
28 |                             <button type="button" class="trigger">Start animation</button>
29 |                             <button type="reset" class="trigger">Stop / Reset</button>
30 |                         </p>
31 |                     </form>
32 |                     <div class="svgwrap finite wobble running">
33 |                         <img src="../../images/csscircle.svg">
34 |                     </div>         
35 |                 </section>
36 | 
37 |                 <section id="event-output" class="half">
38 |                     <h2>Event list</h2>
39 |                     <pre id="output"></pre>
40 |                 </section>
41 |             </div>
42 |         </main>
43 | 
44 | 
45 |         <footer>
46 |             <p>
47 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
48 |             </p>
49 |         </footer>
50 | 
51 |    
52 | 
53 |         <script type="text/javascript" src="../../js/chapter5/anim-events.js"></script>
54 | 
55 |     </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/05-animation/animation/animation-play-state.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 5 - animation-play-state</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../../css/base.css">
11 |         <link rel="stylesheet" href="../../css/chapter5/anim-play-state.css">
12 | 	</head>
13 |         
14 |     <body>
15 |        <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 5</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2>The <code>animation-play-state</code> property</h2> 
22 |             <p>Click the button below to toggle between the <code>running</code> and <code>paused</code> states.</p>
23 |             <section class="animate">
24 |                 <p>
25 |                     <button type="button" class="trigger">Toggle play state</button>
26 |                 </p>
27 | 
28 |                 <div class="svgwrap wobble">
29 |                     <img src="../../images/csscircle.svg">
30 |                 </div>         
31 |             </section>
32 | 
33 |         </main>
34 | 
35 | 
36 |         <footer>
37 |             <p>
38 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
39 |             </p>
40 |         </footer>
41 | 
42 |    
43 | 
44 |         <script type="text/javascript" src="../../js/chapter5/play-pause.js"></script>
45 | 
46 |     </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/05-animation/animation/percent-keyframes.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 5 - Percentage keyframes</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../../css/base.css">
11 |         <link rel="stylesheet" href="../../css/chapter5/animpctkeyframes.css">
12 | 	</head>
13 |         
14 |     <body>
15 |        <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 5</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2>Using percentage keyframes </h2>
22 |             
23 |             <section class="animate">
24 |                 <p>
25 |                     <button type="button" class="trigger" data-classname="wiggle">Toggle animation</button>
26 |                 </p>
27 | 
28 |                 <div class="svgwrap">
29 |                     <img src="../../images/csscircle.svg">
30 |                 </div>
31 |                
32 |             </section>
33 | 
34 |         </main>
35 | 
36 | 
37 |         <footer>
38 |             <p>
39 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
40 |             </p>
41 |         </footer>
42 | 
43 |    
44 | 
45 |         <script type="text/javascript" src="../../js/chapter5/stop-anim.js"></script>
46 | 
47 |     </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/05-animation/animation/simple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 5 - Simple Transition</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../../css/base.css">
11 |         <link rel="stylesheet" href="../../css/chapter5/animsimple.css">
12 | 	</head>
13 |         
14 |     <body>
15 |        <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 5</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2>Simple animation</h2>
22 |             
23 |             <div>
24 | 
25 |             <section class="animate">
26 |                <div class="svgwrap"><svg version="1.1"
27 |      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
28 |      x="0px" y="0px" width="138.3px" height="118.6px" viewBox="0 0 138.3 118.6" enable-background="new 0 0 138.3 118.6"
29 |      xml:space="preserve"><defs></defs><g>
30 |     <path fill="#EE1C4E" d="M65.8,117.2L17.6,70.7C17,70.2,0,54.7,0,36.1C0,13.5,13.8,0,36.9,0c13.5,0,26.2,10.7,32.3,16.7
31 |         C75.3,10.7,87.9,0,101.4,0c23.1,0,36.9,13.5,36.9,36.1c0,18.5-17,34-17.7,34.7l-48.1,46.3c-0.9,0.9-2.2,1.4-3.4,1.4
32 |         S66.7,118.1,65.8,117.2z"/></g></svg></div>
33 |                 <p>
34 |                     <button type="button" class="trigger" data-classname="pulse">Toggle animation</button>
35 |                 </p>
36 |             </section>
37 | 
38 |             
39 | 
40 |         </main>
41 | 
42 | 
43 |         <footer>
44 |             <p>
45 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
46 |             </p>
47 |         </footer>
48 | 
49 |    
50 | 
51 |         <script type="text/javascript" src="../../js/chapter5/stop-anim.js"></script>
52 | 
53 |     </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/05-animation/transitions/multiple-transitions.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 5 - Multiple Transitions</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../../css/base.css">
11 |         <link rel="stylesheet" href="../../css/chapter5/multi-trans.css">
12 | 	</head>
13 |         
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 5</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2>Multiple Transitions</code></h2>
22 |             <p>Click to <button type="button" class="all">trigger</button> the transition. </p>
23 |             <div></div>   
24 |         </main>
25 | 
26 |         <footer>
27 |             <p>
28 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
29 |             </p>
30 |         </footer>
31 | 
32 | 
33 |         <script type="text/javascript">
34 |             var triggerall = document.getElementsByClassName('all');
35 | 
36 |             Array.prototype.map.call(triggerall, function(b){
37 |                 b.onclick = function(evt) {
38 |                     var movethese = document.querySelector('div');
39 |                     movethese.classList.toggle('transthem');
40 |                     
41 |                     /* Open your console to see the transition end events */
42 |                     movethese.addEventListener('transitionend', function(e){
43 |                         console.log(e);
44 |                     });
45 |                 }
46 |             });
47 | 
48 | 
49 |         </script>
50 |     </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/05-animation/transitions/negative-delay.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 5 - Negative delay</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../../css/base.css">
11 |         <link rel="stylesheet" href="../../css/chapter5/negative-delay.css">
12 | 	</head>
13 |         
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 5</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |            <h2>Negative <code>transition-delay</code></h2>
22 |            <p>Click to <button type="button" class="all">trigger all</button> transitions. </p>
23 | 
24 |             <section>
25 |                 <h3><code>transition-delay: 0s</code></h3>
26 |                 <div></div>
27 |             </section>
28 | 
29 |             <section>
30 |                 <h3><code>transition-delay: -1s</code></h3>
31 |                 <div class="delay1s"></div>
32 |             </section>
33 | 
34 |             <p>Click to <button type="button" class="all">trigger all</button> transitions. </p>
35 |         </main>
36 | 
37 | 
38 |         <footer>
39 |             <p>
40 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
41 |             </p>
42 |         </footer>
43 | 
44 | 
45 |         <script type="text/javascript">
46 |             var triggerall = document.getElementsByClassName('all');
47 | 
48 |             Array.prototype.map.call(triggerall, function(b){
49 |                 b.onclick = function(evt) {
50 |                     var movethese = document.querySelectorAll('section > div');
51 |                     Array.prototype.map.call(movethese, function(o) {
52 |                         o.classList.toggle('moved');
53 |                     });
54 |                 }
55 |             });
56 |         </script>
57 |     </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/05-animation/transitions/simple-withjs.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 5 - Simple Transition</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../../css/base.css">
11 |         <link rel="stylesheet" href="../../css/chapter5/simple-withjs.css">
12 |     </head>
13 |         
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 5</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2>Transition example with a JavaScript Trigger</h2>
22 |             <p><button type="button">Trigger transition</button></p>
23 |             <p>This transition effect will take five seconds to complete after the button is clicked.</p>
24 |         </main>
25 | 
26 | 
27 |         <footer>
28 |             <p>
29 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
30 |             </p>
31 |         </footer>
32 | 
33 |    
34 | 
35 |         <script type="text/javascript">
36 |             var btn = document.querySelector('button');
37 |             btn.onclick = function(){
38 |                 document.body.classList.toggle('change');
39 |             }
40 |         </script>
41 |         
42 |     </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/05-animation/transitions/simple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 5 - Simple Transition</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../../css/base.css">
11 |         <link rel="stylesheet" href="../../css/chapter5/simple.css">
12 | 	</head>
13 |         
14 |     <body>
15 |        <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 5</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <p class="larger">Mouse over <a href="http://sitepoint.com/">this link</a> to see the transition effect.</p>
22 |         </main>
23 | 
24 | 
25 |         <footer>
26 |             <p>
27 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
28 |             </p>
29 |         </footer>
30 |     </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/05-animation/transitions/steps.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 5 - Simple Transition</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../../css/base.css">
11 |         <link rel="stylesheet" href="../../css/chapter5/steps.css">
12 | 	</head>
13 |         
14 |     <body>
15 |        <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 5</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2>Step transition example</h2><button type="button">Trigger transition</button>
22 |             <p class="larger">This transition effect will take five seconds to complete after the button is clicked.</p>
23 |         </main>
24 | 
25 | 
26 |        <footer>
27 |             <p>
28 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
29 |             </p>
30 |         </footer>
31 | 
32 |    
33 | 
34 |         <script type="text/javascript">
35 |             var btn = document.querySelector('button');
36 |             btn.onclick = function(){
37 |                 document.body.classList.toggle('change');
38 |             }
39 |         </script>
40 |         
41 |     </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/06-transforms/backface-visibility-card.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - perspective property</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/backface-vis.css">
12 |    </head>
13 |         
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
17 |             <a href="./index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2>How the <code>backface-visibility</code> property works</h2>
22 |             
23 |             <p>Click the button below flip the cards. The card on the left has <code>backface-visibility: none</code> applied.</p>
24 | 
25 |             <p>
26 |                 <button type="button" data-classname="flipped">Flip</button>
27 |             </p>
28 | 
29 | 
30 |             <div id="perspective" class="flex">
31 |             
32 |             <section class="demo backface"> 
33 |             
34 |                 <div class="card">
35 |                     <div class="side front">
36 |                         <p class="suit">&clubs;</p>
37 |                     </div> 
38 |                     <div class="side back"></div>  
39 |                 </div>
40 |             </section>
41 | 
42 |             <section>
43 |             <div class="card">
44 |                 <div class="side front">
45 |                    <p class="suit">&clubs;</p>
46 |                  </div> 
47 | 
48 |                  <div class="side back"></div>  
49 |             </div>
50 |             </section>
51 | 
52 |            
53 |         </main>
54 | 
55 |         <footer>
56 |             <p>
57 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
58 |             </p>
59 |         </footer>
60 | 
61 |         <script type="text/javascript">    
62 |             var rulestr = '#perspective{perspective: %s}';         
63 |         </script>
64 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
65 |         <script type="text/javascript" src="../js/chapter6/backface-vis-card.js"></script>
66 |     </body>
67 | </html>


--------------------------------------------------------------------------------
/06-transforms/containing-block.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - transform-origin</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/transform.css">
12 |     </head>
13 |         
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
17 |             <a href="./index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2><code>transform</code> property: Containing block</h2>
22 |             <p>When the <code>transform</code> property has a value other than <code>none</code>, positioned children are offset relative to transformed parent rather than the root element.</p>
23 | 
24 |             <p><button type="button">Toggle transform</button></p>
25 |             <div id="transform">
26 |                 <p>This is an absolutely positioned child element.</p>
27 |             </div>
28 | 
29 |         </main>
30 | 
31 | 
32 |         <footer>
33 |             <p>
34 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
35 |             </p>
36 |         </footer>
37 | 
38 | 
39 |         <script type="text/javascript">
40 |             var transform = document.getElementById('transform'),
41 |                 btn = document.querySelector('button'),
42 |                 clickHandler = function(evt) {
43 |                     transform.classList.toggle('transformed');
44 |                 }
45 | 
46 |             btn.addEventListener('click', clickHandler);
47 |         </script>
48 |     </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/06-transforms/perspective-function.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - perspective function</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/perspective-func.css">
12 |         <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 | 
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">
23 |             <h2>Perspective function demo</h2>
24 |             <p>This function controls the amount of foreshortening that occurs when an object is tilted towards the viewer. The lower the value, the more severe the foreshortening. The ends of objects that are closer to the viewer will appear larger than those further away from the viewer.</p>
25 | 
26 |             <form>
27 |                 <h2 id="output">
28 |                     <label for="perp" class="mono">perspective(<span>0</span>) rotateY(35deg)</label>
29 |                 </h2>
30 |                 <p class="flex">
31 |                     <input type="range" id="perp" name="perp" min="0" max="1000" value="0" step="1">
32 |                     <button type="reset">Reset</button>
33 |                 </p>
34 | 
35 |             </form>
36 | 
37 | 
38 |             <div>
39 |                 <div class="perpfunc"></div>
40 |             </div>
41 | 
42 |         </main>
43 | 
44 |         <footer>
45 |             <p>
46 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
47 |             </p>
48 |         </footer>
49 | 
50 |         <script type="text/javascript">
51 |             var rulestr = '.perpfunc{ -webkit-transform: perspective(%p) rotateX(35deg); transform: perspective(%p) rotateX(35deg) translateZ(-20px); position: relative; z-index: -1}';
52 |         </script>
53 |         <script type="text/javascript" src="../js/escapereset.js"></script>
54 |         <script type="text/javascript" src="../js/chapter6/perspective-func.js"></script>
55 | 
56 |     </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/06-transforms/perspective.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - perspective property</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/carousel.css">
12 |         <!-- deliberately empty-->
13 |         <style></style>
14 |    </head>
15 | 
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">
23 |             <h2>
24 |                 <code id="output">perspective: <span>none</span></code>
25 |             </h2>
26 | 
27 |             <p>Adjust the slider to adjust the perspective of the stage.</p>
28 | 
29 |             <form>
30 |             <div class="flex">
31 |                 <b>0</b>
32 |                 <input type="range" id="psp" name="psp" min="0" max="2000" value="0">
33 |                 <b>2000px</b>
34 |                 <button type="reset">Reset</button>
35 |             </div>
36 | 
37 |             </form>
38 |             <div id="perspective" class="carousel">
39 |                 <div class="wrapper p3d">
40 |                     <figure class="perp">a</figure>
41 |                     <figure class="perp">b</figure>
42 |                     <figure class="perp">c</figure>
43 |                     <figure class="perp">d</figure>
44 |                     <figure class="perp">e</figure>
45 |                     <figure class="perp">f</figure>
46 |                 </div>
47 |             </div>
48 |         </main>
49 | 
50 |         <footer>
51 |             <p>
52 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
53 |             </p>
54 |         </footer>
55 | 
56 |         <script type="text/javascript">
57 |             var rulestr = '#perspective{-webkit-perspective: %s; perspective: %s}';
58 |         </script>
59 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
60 |         <script type="text/javascript" src="../js/chapter6/perspective.js"></script>
61 |     </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/06-transforms/transform-rotate540.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - rotate transition</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/rotate.css">
12 |    </head>
13 |         
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
17 |             <a href="./index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2><code>transform: rotate(540deg)</code></h2>
22 |             
23 |             <p><button type="button">Trigger</button>&nbsp;a 540 degree rotation</p> 
24 |             
25 |             <object id="rotate" class="animate" data="../images/csscircle.svg" type="image/svg+xml"></object>      
26 |             
27 |         </main>
28 | 
29 | 
30 |         <footer>
31 |             <p>
32 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
33 |             </p>
34 |         </footer>
35 | 
36 | 
37 |         <script type="text/javascript">    
38 |             document.querySelector('button').addEventListener('click', function(e){
39 |                 document.getElementById('rotate').classList.toggle('r540')
40 |             })        
41 |         </script>
42 |     </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/06-transforms/transform-rotateX.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - rotateX</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/rotate.css">
12 |         <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 | 
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">
23 |             <h2><code id="output">transform: rotateX(<span>0</span>deg)</code></h2>
24 | 
25 |             <form>
26 |                 <p>Adjust the slider to rotate the object below. (
27 |                     <input type="checkbox" id="addpersp" name="addpersp">
28 |                     <label for="addpersp">Add <code>perspective: 200px</code> to container</label>)
29 |                 </p>
30 | 
31 |                 <div class="flex">
32 |                     <b>-360</b>
33 |                     <input type="range" id="angle" name="angle" min="-360" max="360" value="0" step="5">
34 |                     <b>360</b>
35 |                 </div>
36 |             </form>
37 |             <object id="rotate" data="../images/csscircle.svg" type="image/svg+xml"></object>
38 |              <div class="flexl conversion">
39 |                 <div>Unit conversions:</div>
40 |                 <div class="mono"><b class="unit">0</b>rad</div>
41 |                 <div class="mono"><b class="unit">0</b>grad</div>
42 |                 <div class="mono"><b class="unit">0</b>turn</div>
43 |             </div>
44 |         </main>
45 | 
46 | 
47 |         <footer>
48 |             <p>
49 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
50 |             </p>
51 |         </footer>
52 | 
53 | 
54 |         <script type="text/javascript">
55 |             var rulestr = '#rotate{transform: rotateX(%s)';
56 |         </script>
57 | 		 <script type="text/javascript" src="../js/convertangles.min.js"></script>
58 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
59 |         <script type="text/javascript" src="../js/chapter6/rotations.js"></script>
60 |     </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/06-transforms/transform-rotateY.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - rotateY</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/rotate.css">
12 |         <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 | 
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">
23 |             <h2><code id="output">transform: rotateY(<span>0</span>deg)</code></h2>
24 | 
25 |             <form>
26 |                 <p>Adjust the slider to rotate the object below. (
27 |                     <input type="checkbox" id="addpersp" name="addpersp">
28 |                     <label for="addpersp">Add <code>perspective: 200px</code> to container</label>)
29 |                 </p>
30 | 
31 |                 <div class="flex">
32 |                     <b>-360</b>
33 |                     <input type="range" id="angle" name="angle" min="-360" max="360" value="0" step="5">
34 |                     <b>360</b>
35 |                 </div>
36 |             </form>
37 |             <object id="rotate" data="../images/csscircle.svg" type="image/svg+xml"></object>
38 | 
39 | 
40 |             <div class="flexl conversion">
41 |                 <div>Unit conversions:</div>
42 |                 <div class="mono"><b class="unit">0</b>rad</div>
43 |                 <div class="mono"><b class="unit">0</b>grad</div>
44 |                 <div class="mono"><b class="unit">0</b>turn</div>
45 |             </div>
46 |         </main>
47 | 
48 | 
49 |         <footer>
50 |             <p>
51 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
52 |             </p>
53 |         </footer>
54 | 
55 |         <script type="text/javascript">
56 |             var rulestr = '#rotate{transform: rotateY(%s)';
57 |         </script>
58 | 		<script type="text/javascript" src="../js/convertangles.min.js"></script>
59 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
60 |         <script type="text/javascript" src="../js/chapter6/rotations.js"></script>
61 |     </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/06-transforms/transform-rotateZ.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - transform-origin</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/rotate.css">
12 |         <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 | 
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">
23 |             <h2><code id="output">transform: rotate(<span>0</span>deg)</code></h2>
24 |             <p class="note"><code>rotate</code> and <code>rotateZ</code> work the same way.</p>
25 |             <p>Adjust the slider to rotate the object below.</p>
26 | 
27 | 
28 |             <div class="flex">
29 |                 <b>-360</b>
30 |                 <input type="range" id="angle" name="angle" min="-360" max="360" value="0" step="5">
31 |                 <b>360</b>
32 |             </div>
33 |             <object id="rotate" data="../images/csscircle.svg" type="image/svg+xml"></object>
34 | 
35 | 
36 |             <div class="flexl conversion">
37 |                 <div>Unit conversions:</div>
38 |                 <div class="mono"><b class="unit">0</b>rad</div>
39 |                 <div class="mono"><b class="unit">0</b>grad</div>
40 |                 <div class="mono"><b class="unit">0</b>turn</div>
41 |             </div>
42 |         </main>
43 | 
44 | 
45 |         <footer>
46 |             <p>
47 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
48 |             </p>
49 |         </footer>
50 | 
51 | 
52 |         <script type="text/javascript">
53 |             var rulestr = '#rotate{transform: rotate(%s)';
54 |         </script>
55 | 	    <script type="text/javascript" src="../js/convertangles.min.js"></script>
56 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
57 |         <script type="text/javascript" src="../js/chapter6/rotations.js"></script>
58 |     </body>
59 | </html>
60 | 


--------------------------------------------------------------------------------
/06-transforms/transform-scale.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - transforms</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/scale.css">
12 |         <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 | 
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">
23 |             <h2><code id="output">transform: scale(<span>1</span>, <span>1</span>)</code></h2>
24 | 
25 |             <p>Adjust the slider to scale the object below. Although values here are the same, we can adjust each independently. Also, <code>scale(2,2)</code> is the same as <code>scale(2)</code>.</p>
26 | 
27 |             <div class="flex">
28 |                 <b>0</b>
29 |                 <input type="range" id="factor" name="factor" min="-2" max="2" value="1" step=".1">
30 |                 <b>2</b>
31 |             </div>
32 | 
33 |             <object id="scale" data="../images/csscircle.svg" type="image/svg+xml"></object>
34 |         </main>
35 | 
36 | 
37 |         <footer>
38 |             <p>
39 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
40 |             </p>
41 |         </footer>
42 | 
43 | 
44 |         <script type="text/javascript">
45 |             var rulestr = '#scale{transform: scale(%s, %s)';
46 |         </script>
47 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
48 |         <script type="text/javascript" src="../js/chapter6/scale.js"></script>
49 |     </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/06-transforms/transform-scaleX.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - scaleX</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/scale.css">
12 |         <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 | 
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">
23 |             <h2><code id="output">transform: scaleX(<span>1</span>)</code></h2>
24 | 
25 |             <p>Adjust the slider to scale the object below.</p>
26 | 
27 |             <div class="flex">
28 |                 <b>0</b>
29 |                 <input type="range" id="factor" name="factor" min="-2" max="2" value="1" step=".1">
30 |                 <b>2</b>
31 |             </div>
32 |             <object id="scale" data="../images/csscircle.svg" type="image/svg+xml"></object>
33 |         </main>
34 | 
35 | 
36 |         <footer>
37 |             <p>
38 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
39 |             </p>
40 |         </footer>
41 | 
42 | 
43 |         <script type="text/javascript">
44 |             var rulestr = '#scale{transform: scaleX(%s)';
45 |         </script>
46 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
47 |         <script type="text/javascript" src="../js/chapter6/scale.js"></script>
48 |     </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/06-transforms/transform-scaleY.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - scaleY</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/scale.css">
12 |         <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 | 
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">
23 |             <h2><code id="output" >transform: scaleY(<span>1</span>)</code></h2>
24 | 
25 |             <p>Adjust the slider to scale the object below.</p>
26 | 
27 |             <div class="flex">
28 |                 <b>0</b>
29 |                 <input type="range" id="factor" name="factor" min="-2" max="2" value="1" step=".1">
30 |                 <b>2</b>
31 |             </div>
32 |             <object id="scale" data="../images/csscircle.svg" type="image/svg+xml"></object>
33 |         </main>
34 | 
35 | 
36 |         <footer>
37 |             <p>
38 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
39 |             </p>
40 |         </footer>
41 | 
42 | 
43 |         <script type="text/javascript">
44 |             var rulestr = '#scale{transform: scaleY(%s)';
45 |         </script>
46 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
47 |         <script type="text/javascript" src="../js/chapter6/scale.js"></script>
48 |     </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/06-transforms/transform-skew.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - skew</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/skew.css">
12 |          <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 |         
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">  
23 |             <h2><code id="output">transform: skew(<span>0</span>deg, <span>0</span>deg)</code></h2>
24 |             
25 |             <p>Adjust the slider to skew the object below. Though values are linked for this demo, it's perfectly okay to have different values for the <code>x</code> and <code>y</code> arguments</p> 
26 |             
27 |             <div class="flex">
28 |                 <b>-360</b>
29 |                 <input type="range" id="angle" name="angle" min="-360" max="360" value="0" step="5">
30 |                 <b>360</b>
31 |             </div>
32 |            
33 |             <object id="skew" data="../images/csscircle.svg" type="image/svg+xml"></object>
34 |            
35 |             <div class="flexl mono">
36 |                 <p><b class="unit">0</b>rad</p>
37 |                 <p><b class="unit">0</b>grad</p>
38 |             </div>
39 |         </main>
40 | 
41 | 
42 |         <footer>
43 |             <p>
44 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
45 |             </p>
46 |         </footer>
47 | 
48 | 
49 |         <script type="text/javascript">    
50 |             var rulestr = '#skew{transform: skew(%s, %s)';         
51 |         </script>
52 | 	    <script type="text/javascript" src="../js/convertangles.min.js"></script>
53 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
54 |         <script type="text/javascript" src="../js/chapter6/rotations.js"></script>
55 |     </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/06-transforms/transform-skewX.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - skewX</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/skew.css">
12 |          <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 |         
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">  
23 |             <h2><code id="output">transform: skewX(<span>0</span>deg)</code></h2>
24 |             
25 |             <p>Adjust the slider to skew the object below.</p> 
26 |             
27 |             <div class="flex">
28 |                 <b>-360</b>
29 |                 <input type="range" id="angle" name="angle" min="-360" max="360" value="0" step="5">
30 |                 <b>360</b>
31 |             </div>
32 |            
33 |             <object id="skew" data="../images/csscircle.svg" type="image/svg+xml"></object>
34 |            
35 |             <div class="flexl mono">
36 |                 <p><b class="unit">0</b>rad</p>
37 |                 <p><b class="unit">0</b>grad</p>
38 |             </div>
39 |         </main>
40 | 
41 | 
42 |         <footer>
43 |             <p>
44 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
45 |             </p>
46 |         </footer>
47 | 
48 | 
49 |         <script type="text/javascript">    
50 |             var rulestr = '#skew{transform: skewX(%s)';         
51 |         </script>
52 | 		
53 |         <script type="text/javascript" src="../js/convertangles.min.js"></script>
54 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
55 |         <script type="text/javascript" src="../js/chapter6/rotations.js"></script>
56 |     </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/06-transforms/transform-skewY.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - skewX</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/skew.css">
12 |          <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 |         
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">  
23 |             <h2><code id="output">transform: skewY(<span>0</span>deg)</code></h2>
24 |             
25 |             <p>Adjust the slider to skew the object below.</p> 
26 |             
27 |             <div class="flex">
28 |                 <b>-360</b>
29 |                 <input type="range" id="angle" name="angle" min="-360" max="360" value="0" step="5">
30 |                 <b>360</b>
31 |             </div>
32 |            
33 |             <object id="skew" data="../images/csscircle.svg" type="image/svg+xml"></object>
34 |            
35 |             <div class="flexl mono">
36 |                 <p><b class="unit">0</b>rad</p>
37 |                 <p><b class="unit">0</b>grad</p>
38 |             </div>
39 |         </main>
40 | 
41 | 
42 |         <footer>
43 |             <p>
44 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
45 |             </p>
46 |         </footer>
47 | 
48 | 
49 |         <script type="text/javascript">    
50 |             var rulestr = '#skew{transform: skewY(%s)';         
51 |         </script>
52 | 		<script type="text/javascript" src="../js/escapereset.js"></script>
53 |         <script type="text/javascript" src="../js/convertangles.min.js"></script>
54 | 		<script type="text/javascript" src="../js/chapter6/rotations.js"></script>
55 |     </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/06-transforms/transform-translate.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 6 - translate</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter6/translate.css">
12 |         <!-- deliberately empty -->
13 |         <style></style>
14 |    </head>
15 |         
16 |     <body>
17 |         <header>
18 |             <h1><i>CSS Master</i> Code Examples: Chapter 6</h1>
19 |             <a href="./index.html">Back to listing</a>
20 |         </header>
21 | 
22 |         <main class="content">  
23 |             <h2>
24 |                 <code>transform: <span id="output">translate(<span>0, 0</span>)</code>
25 |             </h2>
26 |         
27 |             <p>Adjust the slider to translate the object below. Translations are relative to the element's starting position.</p> 
28 |             
29 |             <form>
30 |             <div class="flex">
31 |                 <label for="xdim">X direction</label>
32 |                 <b>-500px</b>
33 |                 <input type="range" id="xdim" name="x" min="-500" max="500" value="0" step="5">
34 |                 <b>500px</b> 
35 |             </div>
36 | 
37 |             <div class="flex">   
38 |                 <label for="ydim">Y direction</label>
39 |                 <b>-500px</b>
40 |                 <input type="range" id="ydim" name="y" min="-500" max="500" value="0" step="5">
41 |                 <b>500px</b>       
42 |             </div>
43 |             <p> <button type="reset">Reset</button></p>   
44 |             </form>
45 |             <object id="translate" data="../images/csscircle.svg" type="image/svg+xml"></object>
46 |            
47 |         </main>
48 | 
49 | 
50 |         <footer>
51 |             <p>
52 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
53 |             </p>
54 |         </footer>
55 | 
56 | 
57 |         <script type="text/javascript">    
58 |             var rulestr = '#translate{transform: translate(%x, %y)';         
59 |         </script>
60 |         <script type="text/javascript" src="../js/escapereset.js"></script>
61 |         <script type="text/javascript" src="../js/chapter6/translate.js"></script>
62 |     </body>
63 | </html>


--------------------------------------------------------------------------------
/07-conditionalcss/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 7 - Media Query Events</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter7/mq.css">
12 |     </head>
13 |         
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 7</h1>
17 |             <a href="../index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <nav class="content"> 
21 |             <h2><code>@media</code> demos</h2>
22 |             <ul>
23 |                 <li><a href="media-query-simple.html">Simple demo</a> (resize this window)</li>
24 |                 <li><a href="media-query-events.html">Media Query Events</a></li>
25 |                 <li><a href="media-query-discrete.html">Media Query (Discrete feature)</a></li>
26 |                 <li><a href="media-query-nested.html">Nested Media Queries</a></li>
27 |             </ul>
28 |             <h3><code>@supports</code> demos</h3>
29 |             <ul>
30 |                 <li><a href="supports-simple.html"><code>@supports</code> simple</a></li>
31 |                 <li><a href="supports-flexbox.html"><code>@supports</code> with <code>display: flex</code></a></li>
32 |             </ul>
33 |         </main>
34 | 
35 | 
36 |         <footer>
37 |             <p>
38 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
39 |             </p>
40 |         </footer>
41 | 
42 |    
43 | 
44 |         
45 |         
46 |     </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/07-conditionalcss/media-query-discrete.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Using Discreet Media Feature Queries | CSS Master: Chapter 7</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter7/mq.css">
12 |         <style>
13 |         @media (hover: hover) {
14 |             input[type=checkbox] ~ label {
15 |                 background: #fcf;
16 |                 border: 5px double #f0f;
17 |                 padding: 3px;
18 |             }
19 |         }
20 | 
21 |         @media (hover: on-demand) {
22 |             input[type=checkbox] ~ label {
23 |                 padding: 1em;
24 |                 background: #B9F1B9;
25 |                 border: 3px dashed #390;
26 |             }
27 | 
28 |             form {
29 |                 margin-bottom: 2em;
30 |             }
31 |         }
32 |         </style>
33 |     </head>
34 | 
35 |     <body>
36 |         <header>
37 |             <h1><i>CSS Master</i> Code Examples: Chapter 7</h1>
38 |             <a href="./index.html">Back to listing</a>
39 |         </header>
40 | 
41 |         <main class="content">
42 |             <h2>Media query using a discrete type feature</h2>
43 | 
44 |             <form>
45 |                 <p>
46 |                     <input type="checkbox" id="chkbx" name="chkbx">
47 |                     <label for="chkbx">This is a checkbox label</label>
48 |                 </p>
49 |             </form>
50 | 
51 | 
52 |             <p>If <code>matchMedia('(hover: hover)').matches</code> is <em>true</em>, you will see a pink background behind the label, and a double border around it. </p>
53 | 
54 |             <p>If (<code>matchMedia('(hover: on-demand)').matches</code> is <em>true</em>, you will see a green background behind the label, and a dashed border around it.</p>
55 | 
56 |             <p>If you do not see a background color <em>at all</em>, your browser doesn't yet support this feature query.</p>
57 | 
58 |         </main>
59 | 
60 |         <footer>
61 |             <p>
62 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
63 |             </p>
64 |         </footer>
65 | 
66 |     </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/07-conditionalcss/media-query-events.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Media Query Events | CSS Master: Chapter 7</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter7/mq.css">
12 |     </head>
13 | 
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 7</h1>
17 |             <a href="./index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">
21 |             <h2>Media query events</h2>
22 |             <p>Change the <b>browser window's orientation</b> <em>OR</em> <b>resize the browser window</b> so that its aspect ratio (<em>width</em> &div; <em>height</em>) is at least 1.</p>
23 | 
24 |             <p>This will trigger a media query event. That event will, in turn, toggle a class name for the <code>body</code> element, and cause the background color to change.</p>
25 |             <p>View source to learn how it works.</p>
26 |         </main>
27 | 
28 | 
29 |         <footer>
30 |             <p>
31 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
32 |             </p>
33 |         </footer>
34 | 
35 | 
36 | 
37 |         <script type="text/javascript">
38 |             var mq25em = matchMedia('(min-aspect-ratio: 1/1)');
39 |             mq25em.addListener(function(mq){
40 |                 /*
41 |                 If the browser condition changes, and the media
42 |                 query matches, mq.matches return true
43 |                 */
44 |                 if (mq.matches) {
45 |                     document.body.classList.add('mqmatches');
46 |                 } else {
47 |                     document.body.classList.remove('mqmatches');
48 |                 }
49 | 
50 |                 if (console && mq.media) {
51 |                     console.log(mq.media + ': '+mq.matches);
52 |                 }
53 |             });
54 |         </script>
55 | 
56 |     </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/07-conditionalcss/media-query-nested.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>Nested Media Queries | CSS Master: Chapter 7</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter7/mq.css">
12 |         <style>
13 |         /* Nested media queries */
14 |         @media (any-pointer) {
15 |             @media (any-pointer: fine) {
16 |                 input[type=checkbox] ~ label {
17 |                     padding: 1em;
18 |                     background: #E3DBF2;
19 |                     border: 4px inset #673ab7;
20 |                     padding: .5em;
21 |                 }
22 |             }
23 | 
24 |             @media (any-pointer: coarse) {
25 |                 input[type=checkbox] ~ label {
26 |                     padding: 1em;
27 |                     background: #cddc39;
28 |                     border: 4px inset #4caf50;
29 |                     padding: .5em;
30 |                 }
31 |             }
32 |         }
33 |         </style>
34 |     </head>
35 | 
36 |     <body class="nested">
37 |         <header>
38 |             <h1><i>CSS Master</i> Code Examples: Chapter 7</h1>
39 |             <a href="./index.html">Back to listing</a>
40 |         </header>
41 | 
42 |         <main class="content">
43 |             <h2>Nested media queries</h2>
44 | 
45 |             <p>In order for this to work as intended, the browser must support the <code>any-pointer</code>/<code>pointer</code> feature query.</p>
46 | 
47 |             <form>
48 |                 <p>
49 |                     <input type="checkbox" id="chkbx" name="chkbx">
50 |                     <label for="chkbx">This is a checkbox label</label>
51 |                 </p>
52 |             </form>
53 |         </main>
54 | 
55 |         <footer>
56 |             <p>
57 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
58 |             </p>
59 |         </footer>
60 | 
61 |     </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/07-conditionalcss/media-query-simple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Chapter 7 - Media Query Events</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter7/mq.css">
12 |     </head>
13 | 
14 |     <body>
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 7</h1>
17 |             <a href="./index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">
21 |             <p>Resize this window to see the <a href="../css/chapter7/mq.css">media queries</a> in effect.</p>
22 |             <nav id="demo">
23 |                 <ul>
24 |                     <li><a href="media-query-simple.html">Simple demo</a> (resize this window)</li>
25 |                     <li><a href="media-query-events.html">Media Query Events</a></li>
26 |                     <li><a href="media-query-discrete.html">Media Query (Discrete feature)</a></li>
27 |                 </ul>
28 |             </nav>
29 |         </main>
30 | 
31 | 
32 |         <footer>
33 |             <p>
34 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
35 |             </p>
36 |         </footer>
37 | 
38 |     </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/07-conditionalcss/supports-flexbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>@supports Flexbox | CSS Master: Chapter 7</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter7/supports.css">
12 |     </head>
13 | 
14 |     <body class="nested">
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 7</h1>
17 |             <a href="./index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">
21 |             <h2><code>@supports</code> flexbox demo</h2>
22 | 
23 |             <p>If the browser supports <code>display: flex</code>, it will use <a href="http://dev.w3.org/csswg/css-flexbox/">FlexBox</a> for layout. Otherwise, it will use CSS table layout.</p>
24 | 
25 |             <ul class="supports-flex">
26 |                 <li><a href="http://www.sitepoint.com/html-css/">HTML &amp; CSS</a></li>
27 |                 <li><a href="http://www.sitepoint.com/javascript/">JavaScript</a></li>
28 |                 <li><a href="http://www.sitepoint.com/php/">PHP</a></li>
29 |                 <li><a href="http://www.sitepoint.com/ruby/">Ruby</a></li>
30 |                 <li><a href="http://www.sitepoint.com/mobile/">Mobile</a></li>
31 |             </ul>
32 | 
33 |         </main>
34 | 
35 |         <footer>
36 |             <p>
37 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
38 |             </p>
39 |         </footer>
40 |     </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/07-conditionalcss/supports-simple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>@supports Simple Demo | CSS Master: Chapter 7</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <script src="../js/html5shiv.min.js"></script>
10 |         <link rel="stylesheet" href="../css/base.css">
11 |         <link rel="stylesheet" href="../css/chapter7/supports.css">
12 |     </head>
13 |         
14 |     <body class="nested">
15 |         <header>
16 |             <h1><i>CSS Master</i> Code Examples: Chapter 7</h1>
17 |             <a href="./index.html">Back to listing</a>
18 |         </header>
19 | 
20 |         <main class="content">  
21 |             <h2><code>@supports</code> simple demo</h2>
22 |             
23 |             <p>If the browser supports <code>@supports</code> <em>and</em> <code>text-decoration: underline wavy #c09</code>, the title <q>CSS Master</q> below will have a pink squiggly line below it. Otherwise, it will be italicized. If the browser does not support <code>text-decoration-style: double</code>, the link below will have a bottom border value of <code>4px double #0c0</code>. Otherwise it will use <code>text-decoration: underline double #0c0</code>.</p>
24 | 
25 |             <section id="demo">
26 |                 <p>The title of the book associated with this demo is <span class="title">CSS Master</span>. It is published by <a href="http://sitepoint.com/">Sitepoint</a>.</p>
27 |             </section>
28 | 
29 |         </main>
30 | 
31 |         <footer>
32 |             <p>
33 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint Pty. Ltd. &copy; 2015.
34 |             </p>
35 |         </footer> 
36 |     </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/08-svg/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master Code Examples</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <script src="../js/html5shiv.min.js"></script>
11 |     </head>
12 |     <body>
13 |         <header>
14 |             <h1><i>CSS Master</i> Code Examples</h1>
15 |         </header>
16 | 
17 |         <nav class="content">  
18 |             <h2>CSS and SVG demos</h2>
19 |             <ul>
20 |                <li><a href="twinkling-star.html">Twinkling star</a></li>
21 |                <li><a href="svg-wipe-in.html">Animating <code>stroke-dasharray</code></a></li>
22 |                <li><a href="svg-media-queries.html">Media queries and <code>matchMedia</code></a>
23 |                    <ul>
24 |                        <li><a href="../images/svgmq.svg">See the SVG file</a></li>
25 |                    </ul>
26 |                </li>
27 |                <li><a href="svg-media-queries-bg.html">Media queries and <code>background-size</code></a>
28 |                    <ul>
29 |                        <li><a href="../images/svgmqbg.svg">See the SVG file</a></li>
30 |                    </ul>
31 |                </li>
32 |                <li>
33 |                    <a href="svg-fragments.html">Using SVG document fragments</a>
34 |                </li>
35 |                
36 |             </ul>
37 |         </nav>
38 |   
39 |         <footer>
40 |             <p>
41 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
42 |             </p>
43 |         </footer>
44 |     </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/08-svg/svg-fragments.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master Code Examples</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <link rel="stylesheet" href="../css/chapter8/svg.css">
11 |         <script src="../js/html5shiv.min.js"></script>
12 |     </head>
13 |     <body>
14 |         <header>
15 |             <h1><i>CSS Master</i> Code Examples</h1>
16 |             <a href="../index.html">Back to listing</a>
17 |         </header>
18 | 
19 |         <main class="content">
20 |           <section>
21 |                 <h2>Using fragment identifiers as a foreground image</h2>
22 |                 <p class="fg-frag"><object type="image/svg+xml" data="../images/svg-icons.svg#star"></object>
23 |                 <p class="fg-frag"><object type="image/svg+xml" data="../images/svg-icons.svg#hexagon"></object>
24 |                 <p class="fg-frag"><object type="image/svg+xml" data="../images/svg-icons.svg#triangle"></object>
25 |           </section>
26 |           
27 |           
28 |           <section>
29 |                 <h2>Using fragment identifiers as a background image</h2>
30 |                 <p>Only Internet Explorer and Firefox properly support this.</p>
31 | 
32 |                 <p class="star-bg"></p>
33 |                 <p class="hex-bg"></p>
34 |                 <p class="tri-bg"></p>
35 |           </section>
36 |           
37 | 
38 |         
39 |         </main>
40 | 
41 |         <footer>
42 |             <p>
43 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
44 |             </p>
45 |         </footer>
46 | 
47 | 
48 |     </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/08-svg/svg-media-queries.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master: Using Media Queries with SVG</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <link rel="stylesheet" href="../css/chapter8/svg.css">
11 |         <script src="../js/html5shiv.min.js"></script>
12 |     </head>
13 |     <body class="hexlogodemo">
14 |         <header>
15 |             <h1><i>CSS Master</i> Code Examples: Chapter 8</h1>
16 |             <a href="./index.html">Back to listing</a>
17 |         </header>
18 | 
19 |         <main class="content"> 
20 |             <object data="../images/svgmq.svg" type="image/svg+xml" id="hexlogocontainer"></object>
21 |             
22 |             <object data="../images/svgmq.svg" type="image/svg+xml" id="hexlogocontainer-large"></object>
23 |             
24 |         </main>
25 | 
26 |         <footer>
27 |             <p>
28 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
29 |             </p>
30 |         </footer>
31 | 
32 | 
33 |     </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/08-svg/twinkling-star.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master Code Examples</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="../css/base.css">
10 |         <link rel="stylesheet" href="../css/chapter8/svg.css">
11 |         <script src="../js/html5shiv.min.js"></script>
12 |     </head>
13 |     <body>
14 |         <header>
15 |             <h1><i>CSS Master</i> Code Examples: Chapter 8</h1>
16 |             <a href="./index.html">Back to listing</a>
17 |         </header>
18 | 
19 |         <main class="content"> 
20 |             <h1>Twinkling star</h1> 
21 |             <div><button type="button">Toggle animation</button></div>
22 |  
23 |             <svg version="1.1" id="twinkler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300" xml:space="preserve">
24 |             
25 |             <g>
26 |                <polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,106.9 
27 |                 119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,66.6 "/>
28 |                 <polygon class="star pulse-and-fade" points="77,23.7 98.2,66.6 145.5,66.5 111.2,106.9 
29 |                 119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,66.6 "/>
30 |             </g>
31 |         </svg>
32 |             <a href="http://codepen.io/webinista/pen/bdYXrO">A slightly more complex example</a>
33 |         </main>
34 | 
35 |         <footer>
36 |             <p>
37 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
38 |             </p>
39 |         </footer>
40 | 
41 |     <script>
42 |         document.querySelector('button').addEventListener('click', function(e) {
43 |             var star = document.querySelector('.star:last-child');
44 |             
45 |             if (star.classList.contains('twinkle')) {
46 |                 star.classList.toggle('pause');   
47 |             } else {
48 |                 star.classList.toggle('twinkle');
49 |             }                 
50 |         })
51 |     </script>
52 |     </body>
53 | </html>
54 | 


--------------------------------------------------------------------------------
/css/chapter1/selectors-firstlast.css:
--------------------------------------------------------------------------------
 1 | :first-child {
 2 |   background: #ddd; }
 3 | 
 4 | li:first-child {
 5 |   color: #4caf50;
 6 |   font-weight: bold; }
 7 | li:last-child {
 8 |   color: #e91e63;
 9 |   font-style: italic; }
10 | 
11 | .apple {
12 |   color: #4caf50;
13 |   font-weight: bold; }
14 | 
15 | .strawberry {
16 |   color: #e91e63;
17 |   font-style: italic; }
18 | 


--------------------------------------------------------------------------------
/css/chapter1/selectors-not.css:
--------------------------------------------------------------------------------
 1 | ::selection {
 2 |   background: #4caf50; }
 3 | 
 4 | body {
 5 |   background-color: rgba(96, 125, 139, 0.25); }
 6 | 
 7 | fieldset {
 8 |   border: 0;
 9 |   padding: 0; }
10 | 
11 | fieldset + * {
12 |   margin: 1em 0; }
13 | 
14 | legend {
15 |   color: #34444c;
16 |   font-size: 1.2em;
17 |   font-weight: bold; }
18 | 
19 | input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]):not([type=image]) {
20 |   border: 1px solid rgba(96, 125, 139, 0.5);
21 |   border-radius: 3px;
22 |   padding: .25em;
23 |   width: 100%; }
24 | 
25 | input:focus {
26 |   background: #f1f5c9; }
27 | 
28 | input:focus, button:focus {
29 |   border: 1px solid #4caf50;
30 |   box-shadow: 0 0 3px 2px #4caf50;
31 |   outline: none; }
32 | 
33 | button {
34 |   border: 0;
35 |   border-radius: 3px;
36 |   background: #607d8b;
37 |   color: #fff;
38 |   font-weight: bold;
39 |   padding: .5em 1em; }
40 | 
41 | button:hover {
42 |   background: #4caf50;
43 |   border-color: #4caf50; }
44 | 
45 | label:not(.label-radio) {
46 |   display: block;
47 |   font-weight: bold; }
48 | 
49 | .label-radio {
50 |   margin-left: .25em;
51 |   margin-right: 1em; }
52 | 
53 | li {
54 |   margin-left: -40px;
55 |   list-style-type: none; }
56 | 


--------------------------------------------------------------------------------
/css/chapter1/selectors-nth-child.css:
--------------------------------------------------------------------------------
  1 | table {
  2 |   border: 1px solid rgba(96, 125, 139, 0.5);
  3 |   margin: 1em auto;
  4 |   width: 80%;
  5 | }
  6 | 
  7 | thead {
  8 |   background: rgba(96, 125, 139, 0.7);
  9 |   color: #fff;
 10 | }
 11 | 
 12 | th:first-child {
 13 |   text-align: left;
 14 | }
 15 | 
 16 | th:last-child {
 17 |   text-align: right;
 18 |   text-align: decimal;
 19 | }
 20 | 
 21 | th, td {
 22 |   padding: .2rem 1rem;
 23 | }
 24 | 
 25 | tbody tr {
 26 |   border-bottom: 1px solid rgba(96, 125, 139, 0.2);
 27 | }
 28 | 
 29 | tr:nth-child(even) {
 30 |   background: rgba(96, 125, 139, 0.1);
 31 | }
 32 | 
 33 | td:first-child {
 34 |   width: 40%;
 35 | }
 36 | 
 37 | td:nth-child(2),
 38 | td:nth-child(3) {
 39 |   text-align: center;
 40 |   width: 20%;
 41 | }
 42 | 
 43 | td:last-child {
 44 |   text-align: right;
 45 |   width: 20%;
 46 | }
 47 | 
 48 | .nth-wrap {
 49 |   clear: both;
 50 |   margin-bottom: 2em;
 51 | }
 52 | .nth-wrap::after, .nth-wrap::before {
 53 |   content: ' ';
 54 |   display: block;
 55 |   clear: both;
 56 | }
 57 | 
 58 | .nth-item {
 59 |   -webkit-transition: 250ms background-color;
 60 |   transition: 250ms background-color;
 61 |   background: #673ab7;
 62 |   color: #fff;
 63 |   font-size: 20px;
 64 |   float: left;
 65 |   margin: 0 1em 1em 0;
 66 |   padding: 5px;
 67 |   text-align: center;
 68 |   width: 10vw;
 69 | }
 70 | 
 71 | p.nth-item {
 72 |   border-radius: 1000px;
 73 | }
 74 | 
 75 | .matched, .first-last :first-of-type, .first-last :last-of-type {
 76 |   background: #cddc39;
 77 |   color: #121212;
 78 |   font-weight: bold;
 79 | }
 80 | 
 81 | #nth-form {
 82 |   margin: 1em 0 2em;
 83 |   border-radius: 2px;
 84 |   background: rgba(96, 125, 139, 0.1);
 85 |   border: 1px solid rgba(96, 125, 139, 0.3);
 86 | }
 87 | #nth-form div {
 88 |   border-radius: 2px;
 89 |   text-align: center;
 90 |   margin: .5rem;
 91 | }
 92 | #nth-form div:first-child {
 93 |   background: rgba(96, 125, 139, 0.1);
 94 |   border: 1px solid rgba(96, 125, 139, 0.3);
 95 |   font-size: 2.5em;
 96 | }
 97 | #nth-form input {
 98 |   border: 1px solid #aaa;
 99 |   border-radius: 2px;
100 |   padding: .7em 1em;
101 | }
102 | #nth-form button {
103 |   margin-left: .5em;
104 | }
105 | 
106 | li:only-child, .only-child {
107 |   color: #9c27b0;
108 |   font-size: 1.5em;
109 |   list-style-type: circle;
110 |   list-style-type: "\00A0\2660\00A0";
111 | }
112 | 


--------------------------------------------------------------------------------
/css/chapter1/selectors-target.css:
--------------------------------------------------------------------------------
 1 | .tabbed-widget {
 2 |   position: relative;
 3 |   list-style-type: none;
 4 |   padding-left: 0;
 5 | }
 6 | 
 7 | .tab-body {
 8 |   padding: 0;
 9 |   list-style: none;
10 |   margin: 0;
11 | }
12 | 
13 | .tab-wrap {
14 |   display: -webkit-flex;
15 |   display: -ms-flexbox;
16 |   display: flex;
17 |   text-align: center;
18 |   margin: 0;
19 | }
20 | .tab-wrap a {
21 |   background: #333;
22 |   border-radius: 5px 5px 0 0;
23 |   flex: 0 1 33%;
24 |   font-weight: bold;
25 |   text-decoration: none;
26 |   -webkit-justify-content: space-around;
27 |   justify-content: space-around;
28 |   padding: .5em 0;
29 |   margin-right: 1%;
30 |   background: #bc37d3;
31 | }
32 | .tab-wrap a:nth-child(2) {
33 |   background: #08e3ff;
34 | }
35 | .tab-wrap a:last-child {
36 |   background: #ffeb3b;
37 | }
38 | 
39 | [id^=tab] {
40 |   font-weight: normal;
41 |   margin-left: 0;
42 |   padding: 1em;
43 |   position: absolute;
44 |   background: #bc37d3;
45 | }
46 | [id^=tab] p {
47 |   margin: 0 0 1em;
48 | }
49 | [id^=tab]:first-child {
50 |   z-index: 1;
51 | }
52 | [id^=tab]:nth-child(2) {
53 |   background: #08e3ff;
54 | }
55 | [id^=tab]:last-child {
56 |   background: #ffeb3b;
57 | }
58 | [id^=tab]:target {
59 |   z-index: 2;
60 | }
61 | 


--------------------------------------------------------------------------------
/css/chapter4/box-sizing.css:
--------------------------------------------------------------------------------
 1 | [id=change-box-sizing] {
 2 |   margin: 1em 0;
 3 | }
 4 | [id=change-box-sizing] p {
 5 |   -webkit-flex: 0 1 50%;
 6 |   -ms-flex: 0 1 50%;
 7 |   flex: 0 1 50%;
 8 |   width: 50%;
 9 |   padding: .5em 0;
10 | }
11 | 
12 | .box-sizing-wrapper {
13 |   background: #9e9e9e;
14 |   margin: auto;
15 | }
16 | .box-sizing-wrapper article,
17 | .box-sizing-wrapper aside {
18 |   background: #FFEB3B;
19 |   box-sizing: content-box;
20 |   border: 10px solid #9C27B0;
21 |   float: left;
22 |   padding: 10px;
23 | }
24 | .box-sizing-wrapper::after {
25 |   content: ' ';
26 |   display: table;
27 |   clear: both;
28 | }
29 | .box-sizing-wrapper p {
30 |   margin: auto;
31 | }
32 | 
33 | .primary {
34 |   width: 60%;
35 | }
36 | 
37 | .secondary {
38 |   width: 40%;
39 | }
40 | 
41 | [disabled] {
42 |   opacity: .5;
43 | }
44 | 


--------------------------------------------------------------------------------
/css/chapter4/floats.css:
--------------------------------------------------------------------------------
 1 | .fullheight {
 2 |   height: 100%;
 3 | }
 4 | 
 5 | img {
 6 |   box-shadow: 0 0 4px 4px #ccc;
 7 |   float: left;
 8 |   display: block;
 9 |   margin: 0 2rem 2rem 0;
10 |   padding: 1rem;
11 |   width: 30%;
12 | }
13 | 
14 | h1 {
15 |   margin-bottom: 1rem;
16 | }
17 | 
18 | p {
19 |   padding: 0;
20 |   margin-top: 0;
21 | }
22 | 
23 | .content {
24 |   position: relative;
25 |   height: inherit;
26 | }
27 | .content::after {
28 |   content: ' ';
29 |   display: block;
30 | }
31 | 
32 | .content > .col {
33 |   float: left;
34 |   border: 12px solid #fffffe;
35 |   text-align: justify;
36 |   width: 50%;
37 | }
38 | 
39 | .alpha {
40 |   background: #ffeb3b;
41 | }
42 | 
43 | .beta {
44 |   background: #03a9f4;
45 | }
46 | 
47 | .gamma {
48 |   background: #8bc34a;
49 | }
50 | 
51 | .gamma.cf {
52 |   width: auto;
53 | }
54 | 
55 | .cf {
56 |   clear: both;
57 | }
58 | 
59 | ._3col {
60 |   width: 33%;
61 |   height: 100%;
62 |   border-right: 12px solid #fffffe;
63 |   padding: 3px;
64 |   float: left;
65 |   overflow-y: scroll;
66 | }
67 | 
68 | .multi-col {
69 |   margin: 1rem;
70 | }
71 | 
72 | [class|=multi-col] > .col {
73 |   border-right: 12px solid #fffffe;
74 |   display: table-cell;
75 |   padding: 3px;
76 |   vertical-align: top;
77 |   width: 33.3%;
78 | }
79 | [class|=multi-col] > .col:last-child {
80 |   border-right: 0;
81 | }
82 | [class|=multi-col] > .col img {
83 |   float: none;
84 |   box-shadow: none;
85 |   padding: 0;
86 |   width: 100%;
87 |   margin: 0 0 1rem;
88 | }
89 | 
90 | .multi-col-b > .col:first-child {
91 |   width: 50%;
92 | }
93 | 
94 | .gamma + div {
95 |   margin-top: 1rem;
96 | }
97 | 


--------------------------------------------------------------------------------
/css/chapter4/multi-col.css:
--------------------------------------------------------------------------------
 1 | img {
 2 |   display: block;
 3 |   width: 100%;
 4 | }
 5 | 
 6 | .content {
 7 |   margin: 2em 0;
 8 | }
 9 | 
10 | p {
11 |   margin-top: 0;
12 | }
13 | 
14 | form {
15 |   border: 1px solid #607d8b;
16 |   background: rgba(96, 125, 139, 0.25);
17 |   padding: 1rem;
18 |   margin: 0 0 1rem;
19 | }
20 | form label {
21 |   display: block;
22 | }
23 | form input, form select {
24 |   display: block;
25 | }
26 | 
27 | form > div {
28 |   display: -webkit-flex;
29 |   display: -ms-flexbox;
30 |   display: flex;
31 |   -webkit-flex-wrap: wrap;
32 |   -ms-flex-wrap: wrap;
33 |   flex-wrap: wrap;
34 | }
35 | 
36 | form > div > p {
37 |   -webkit-flex: 1 1 33.3%;
38 |   -ms-flex: 1 1 33.3%;
39 |   flex: 1 1 33.3%;
40 |   padding: 0 1em;
41 |   text-align: center;
42 | }
43 | 
44 | input:not([type=checkbox]), select {
45 |   border: 1px solid #ccc;
46 |   padding: .5rem;
47 |   margin: auto;
48 | }
49 | 
50 | [type=number] {
51 |   width: 5rem;
52 | }
53 | 
54 | .serif {
55 |   font: normal 18px / 1.2 'Palatino','Cambria','Georgia',serif;
56 | }
57 | 
58 | .multi-col-span {
59 |   -webkit-columns: 2 10em;
60 |   -moz-columns: 2 10em;
61 |   columns: 2 10em;
62 |   margin: 3em 0;
63 |   padding: 0;
64 |   clear: both;
65 | }
66 | .multi-col-span p {
67 |   margin-top: 0;
68 | }
69 | .multi-col-span h1 {
70 |   -webkit-column-span: all;
71 |   -moz-column-span: all;
72 |   column-span: all;
73 |   padding-bottom: .5em;
74 | }
75 | 


--------------------------------------------------------------------------------
/css/chapter4/stacking.css:
--------------------------------------------------------------------------------
  1 | .wrapper {
  2 |   height: 500px;
  3 | }
  4 | 
  5 | .rel {
  6 |   position: relative;
  7 |   min-height: 300px;
  8 | }
  9 | 
 10 | div {
 11 |   min-width: 300px;
 12 |   padding: 10px;
 13 | }
 14 | 
 15 | form {
 16 |   margin: 2em 0;
 17 | }
 18 | 
 19 | [for="opacity"] {
 20 |   font-weight: bold;
 21 | }
 22 | 
 23 | [id=b], [id=c], [id=d], [id=e], [id=f], [id=g] {
 24 |   position: absolute;
 25 | }
 26 | 
 27 | [id=b], [id=c], [id=e] {
 28 |   height: 100px;
 29 |   line-height: 50px;
 30 |   width: 400px;
 31 | }
 32 | 
 33 | [id=a] {
 34 |   background: rgba(233, 30, 99, 0.5);
 35 |   height: 200px;
 36 |   text-align: right;
 37 |   width: 500px;
 38 | }
 39 | 
 40 | [id=b] {
 41 |   background: rgba(103, 58, 183, 0.8);
 42 |   bottom: 120px;
 43 |   width: 410px;
 44 |   z-index: 2;
 45 | }
 46 | 
 47 | [id=c] {
 48 |   background: rgba(255, 235, 59, 0.8);
 49 |   top: 190px;
 50 |   z-index: 1;
 51 | }
 52 | 
 53 | [id=d], [id=f], [id=g] {
 54 |   width: 300px;
 55 | }
 56 | 
 57 | [id=d] {
 58 |   background: #03a9f4;
 59 |   height: 100%;
 60 |   top: 10px;
 61 |   z-index: -1;
 62 | }
 63 | [id=d] p {
 64 |   position: absolute;
 65 |   bottom: 30px;
 66 | }
 67 | 
 68 | [id=e] {
 69 |   background: rgba(255, 87, 34, 0.7);
 70 |   top: 110px;
 71 |   z-index: 1;
 72 | }
 73 | 
 74 | [id=f], [id=g] {
 75 |   height: 200px;
 76 |   line-height: 100px;
 77 |   width: 400px;
 78 | }
 79 | 
 80 | [id=f] {
 81 |   background: rgba(255, 193, 7, 0.9);
 82 | }
 83 | [id=f] p {
 84 |   background: #222222;
 85 |   color: whitesmoke;
 86 |   position: relative;
 87 |   padding-left: 1rem;
 88 |   z-index: 1;
 89 | }
 90 | 
 91 | .opa {
 92 |   opacity: .999;
 93 | }
 94 | 
 95 | [id=g] {
 96 |   background: rgba(3, 169, 244, 0.7);
 97 |   top: 50px;
 98 |   left: 100px;
 99 | }
100 | [id=g] p {
101 |   bottom: 0;
102 |   line-height: 1;
103 |   position: absolute;
104 |   right: 1rem;
105 | }
106 | 


--------------------------------------------------------------------------------
/css/chapter5/anim-play-state.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   height: 100%;
 3 | }
 4 | 
 5 | .square {
 6 |   position: relative;
 7 | }
 8 | 
 9 | .svgwrap {
10 |   height: 300px;
11 |   margin: 100px;
12 |   width: 100%;
13 |   max-width: 300px;
14 | }
15 | .svgwrap img {
16 |   width: 100%;
17 |   display: block;
18 | }
19 | 
20 | @-webkit-keyframes wobble {
21 |   from {
22 |     -webkit-transform: skewY(45deg);
23 |   }
24 |   50% {
25 |     -webkit-transform: scale(0.6);
26 |   }
27 |   to {
28 |     -webkit-transform: skewY(-45deg);
29 |   }
30 | }
31 | @keyframes wobble {
32 |   from {
33 |     transform: skewY(15deg);
34 |   }
35 |   to {
36 |     transform: skewY(-45deg);
37 |   }
38 | }
39 | .wobble {
40 |   -webkit-animation: wobble 3s ease-in infinite forwards alternate;
41 |   animation: wobble 3s ease-in infinite forwards alternate;
42 |   -webkit-animation-play-state: paused;
43 |   animation-play-state: paused;
44 | }
45 | 
46 | .running {
47 |   -webkit-animation-play-state: running;
48 |   animation-play-state: running;
49 | }
50 | 
51 | .half {
52 |   -webkit-align-self: flex-start;
53 |   align-self: flex-start;
54 | }
55 | 
56 | .finite {
57 |   -webkit-animation-iteration-count: 5;
58 |   animation-iteration-count: 5;
59 | }
60 | 


--------------------------------------------------------------------------------
/css/chapter5/animpctkeyframes.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   height: 100%;
 3 | }
 4 | 
 5 | @-webkit-keyframes wiggle {
 6 |   0% {
 7 |     -webkit-transform: skewY(5deg) rotate(5deg) scale(0.25);
 8 |   }
 9 |   25% {
10 |     -webkit-transform: skewX(-5deg) rotate(-5deg);
11 |   }
12 |   50% {
13 |     -webkit-transform: skewY(5deg) rotate(5deg) scale(1.5);
14 |   }
15 |   75% {
16 |     -webkit-transform: skewX(-5deg) rotate(-5deg);
17 |   }
18 |   100% {
19 |     -webkit-transform: scale(1.5);
20 |   }
21 | }
22 | @keyframes wiggle {
23 |   0% {
24 |     transform: skewY(5deg) rotate(5deg) scale(0.25);
25 |   }
26 |   25% {
27 |     transform: skewX(-5deg) rotate(-5deg);
28 |   }
29 |   50% {
30 |     transform: skewY(5deg) rotate(5deg) scale(1.5);
31 |   }
32 |   75% {
33 |     transform: skewX(-5deg) rotate(-5deg);
34 |   }
35 |   100% {
36 |     transform: scale(1.5);
37 |   }
38 | }
39 | .content {
40 |   position: relative;
41 | }
42 | 
43 | .svgwrap {
44 |   height: 200px;
45 |   margin: 100px;
46 |   width: 200px;
47 |   transform: scale(0.25);
48 | }
49 | 
50 | .wiggle {
51 |   -webkit-animation-duration: 1s;
52 |   animation-duration: 1s;
53 |   -webkit-animation-name: wiggle;
54 |   animation-name: wiggle;
55 | }
56 | 
57 | .delay1s {
58 |   -webkit-animation-delay: 500ms;
59 |   animation-delay: 500ms;
60 | }
61 | 
62 | .none {
63 |   -webkit-animation-fill-mode: none;
64 |   animation-fill-mode: none;
65 | }
66 | 
67 | .backwards {
68 |   -webkit-animation-fill-mode: backwards;
69 |   animation-fill-mode: backwards;
70 | }
71 | 
72 | .forwards {
73 |   -webkit-animation-fill-mode: forwards;
74 |   animation-fill-mode: forwards;
75 | }
76 | 
77 | .both {
78 |   -webkit-animation-fill-mode: both;
79 |   animation-fill-mode: both;
80 | }
81 | 


--------------------------------------------------------------------------------
/css/chapter5/animsimple.css:
--------------------------------------------------------------------------------
 1 | @-webkit-keyframes pulse {
 2 |   from {
 3 |     -webkit-transform: scale(0.5);
 4 |     -ms-transform: scale(0.5);
 5 |     transform: scale(0.5);
 6 |     opacity: .8;
 7 |   }
 8 |   to {
 9 |     -webkit-transform: scale(1);
10 |     -ms-transform: scale(1);
11 |     transform: scale(1);
12 |     opacity: 1;
13 |   }
14 | }
15 | @keyframes pulse {
16 |   from {
17 |     -webkit-transform: scale(0.5);
18 |     -ms-transform: scale(0.5);
19 |     transform: scale(0.5);
20 |     opacity: .8;
21 |   }
22 |   to {
23 |     -webkit-transform: scale(1);
24 |     -ms-transform: scale(1);
25 |     transform: scale(1);
26 |     opacity: 1;
27 |   }
28 | }
29 | .svgwrap {
30 |   padding: 1em;
31 | }
32 | 
33 | .pulse svg {
34 |   -webkit-animation: pulse 500ms infinite;
35 |   animation: pulse 500ms infinite;
36 | }
37 | 
38 | .rev svg {
39 |   -webkit-animation-direction: reverse;
40 |   animation-direction: reverse;
41 | }
42 | 
43 | .alt svg {
44 |   -webkit-animation-direction: alternate;
45 |   animation-direction: alternate;
46 | }
47 | 
48 | .alt-rev svg {
49 |   -webkit-animation-direction: alternate-reverse;
50 |   animation-direction: alternate-reverse;
51 | }
52 | 
53 | .flex section {
54 |   width: 25%;
55 |   text-align: center;
56 | }
57 | .flex svg {
58 |   display: block;
59 |   margin: auto;
60 | }
61 | 
62 | button > * {
63 |   pointer-events: none;
64 | }
65 | 


--------------------------------------------------------------------------------
/css/chapter5/multi-trans.css:
--------------------------------------------------------------------------------
 1 | section {
 2 |   background: #FBDAE5;
 3 |   border: 1px solid #E91E63;
 4 |   border-radius: 3px;
 5 |   height: auto;
 6 |   margin: 1em 0;
 7 |   padding: 2em;
 8 |   position: relative;
 9 | }
10 | section:before, section:after {
11 |   display: block;
12 |   clear: both;
13 | }
14 | 
15 | h3 {
16 |   margin: -10px 0 0 0;
17 |   font-size: 18px;
18 | }
19 | 
20 | div {
21 |   -webkit-transform: translateX(0%);
22 |   -ms-transform: translateX(0%);
23 |   transform: translateX(0%);
24 |   background: #E91E63;
25 |   height: 5em;
26 |   height: 10vw;
27 |   margin: 3em 0 10px;
28 |   position: relative;
29 |   transition: -webkit-transform 4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 2s 500ms;
30 |   transition: transform 4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 2s 500ms;
31 |   width: 5em;
32 |   width: 10vw;
33 |   max-height: 200px;
34 |   max-width: 200px;
35 | }
36 | 
37 | .transthem {
38 |   -webkit-transform: translateX(500px);
39 |   -ms-transform: translateX(500px);
40 |   transform: translateX(500px);
41 |   background: #00BCD4;
42 | }
43 | 


--------------------------------------------------------------------------------
/css/chapter5/negative-delay.css:
--------------------------------------------------------------------------------
 1 | section {
 2 |   background: #ececff;
 3 |   border: 1px solid #96f;
 4 |   border-radius: 3px;
 5 |   height: auto;
 6 |   margin: 1em 0;
 7 |   padding: 2em;
 8 |   position: relative;
 9 | }
10 | section:before, section:after {
11 |   display: block;
12 |   clear: both;
13 | }
14 | section h3 {
15 |   margin: -10px 0 0 0;
16 |   font-size: 18px;
17 | }
18 | section div {
19 |   background: #96f;
20 |   height: 5em;
21 |   height: 10vw;
22 |   margin: 10px 0;
23 |   position: relative;
24 |   left: 0;
25 |   top: 0;
26 |   transition: 2s ease-in;
27 |   width: 5em;
28 |   width: 10vw;
29 |   max-height: 200px;
30 |   max-width: 200px;
31 | }
32 | 
33 | .moved {
34 |   left: 90%;
35 | }
36 | 
37 | .delay1s {
38 |   transition-delay: -1s;
39 | }
40 | 


--------------------------------------------------------------------------------
/css/chapter5/simple-withjs.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #fcf;
 3 |   transition: 5s;
 4 | }
 5 | 
 6 | .change {
 7 |   background: #0cf;
 8 | }
 9 | 
10 | .larger {
11 |   font-size: 32px;
12 | }
13 | .larger a {
14 |   transition: 500ms;
15 | }
16 | .larger a:hover {
17 |   color: #f0c;
18 | }
19 | 


--------------------------------------------------------------------------------
/css/chapter5/simple.css:
--------------------------------------------------------------------------------
 1 | .larger {
 2 |   font-size: 32px;
 3 | }
 4 | .larger a {
 5 |   transition: 500ms;
 6 | }
 7 | .larger a:hover {
 8 |   color: #f0c;
 9 | }
10 | 


--------------------------------------------------------------------------------
/css/chapter5/steps.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background: #fcf;
3 |   transition: 5s steps(5);
4 | }
5 | 
6 | .change {
7 |   background: #0cf;
8 | }
9 | 


--------------------------------------------------------------------------------
/css/chapter5/timing-functions.css:
--------------------------------------------------------------------------------
 1 | .ttf {
 2 |   background: #E8FAF6;
 3 |   border: 1px solid #0c9;
 4 |   border-radius: 3px;
 5 |   height: auto;
 6 |   margin: 1em 0;
 7 |   padding: 2em;
 8 |   position: relative;
 9 | }
10 | .ttf:before, .ttf:after {
11 |   display: block;
12 |   clear: both;
13 | }
14 | .ttf h3 {
15 |   margin: -10px 0 0 0;
16 |   font-size: 18px;
17 | }
18 | .ttf div {
19 |   background: #00CC99;
20 |   height: 5em;
21 |   height: 5vw;
22 |   margin: 10px 0;
23 |   position: relative;
24 |   left: 0;
25 |   top: 0;
26 |   transition-duration: 2s;
27 |   width: 5em;
28 |   width: 5vw;
29 |   max-height: 75px;
30 |   max-width: 75px;
31 | }
32 | .ttf .moved {
33 |   left: 70%;
34 | }
35 | .ttf .linear {
36 |   transition-timing-function: linear;
37 | }
38 | .ttf .easein {
39 |   transition-timing-function: ease-in;
40 | }
41 | .ttf .easeout {
42 |   transition-timing-function: ease-out;
43 | }
44 | .ttf .easeinout {
45 |   transition-timing-function: ease-in-out;
46 | }
47 | .ttf .stepstart {
48 |   transition-timing-function: step-start;
49 | }
50 | .ttf .stepend {
51 |   transition-timing-function: step-end;
52 | }
53 | .ttf .step5start {
54 |   transition-timing-function: steps(5, start);
55 | }
56 | .ttf .step5end {
57 |   transition-timing-function: steps(5, end);
58 | }
59 | .ttf button {
60 |   position: absolute;
61 |   right: 5vw;
62 |   bottom: 30%;
63 | }
64 | 


--------------------------------------------------------------------------------
/css/chapter5/trans-end.css:
--------------------------------------------------------------------------------
 1 | [type=radio], label {
 2 |   cursor: pointer;
 3 | }
 4 | 
 5 | label {
 6 |   display: inline-block;
 7 |   padding-left: 1em;
 8 | }
 9 | 
10 | /* For IE <= 10's sake */
11 | [hidden] {
12 |   display: none;
13 | }
14 | 
15 | #thanks {
16 |   font-size: 24px;
17 |   padding: 1em 0;
18 | }
19 | 
20 | /*-- Affected elements --*/
21 | li {
22 |   font-size: 18pt;
23 |   font-weight: bold;
24 |   list-style-type: none;
25 |   margin: .25em 0 .25em -40px;
26 |   padding: 1em;
27 |   /* Set up the transition */
28 |   transition: 500ms;
29 | }
30 | li:nth-child(odd) {
31 |   color: white;
32 | }
33 | li:first-child {
34 |   background: red;
35 | }
36 | li:nth-child(even) {
37 |   background: yellow;
38 | }
39 | li:last-child {
40 |   background: blue;
41 | }
42 | 
43 | .fade {
44 |   opacity: 0;
45 | }
46 | 


--------------------------------------------------------------------------------
/css/chapter6/perspective-func.css:
--------------------------------------------------------------------------------
 1 | form {
 2 |   position: relative;
 3 |   z-index: 3;
 4 | }
 5 | 
 6 | [type=range] {
 7 |   margin-right: 1em;
 8 |   width: 90%;
 9 | }
10 | 
11 | .perpfunc {
12 |   background: #673ab7;
13 |   width: 300px;
14 |   height: 300px;
15 |   margin: auto;
16 | }
17 | 


--------------------------------------------------------------------------------
/css/chapter6/stacking.css:
--------------------------------------------------------------------------------
 1 | #transform {
 2 |   display: block;
 3 |   float: left;
 4 |   height: auto;
 5 |   margin: 0em 1.5em 10em 0em;
 6 |   width: 25vw;
 7 |   max-width: 350px;
 8 | }
 9 | 
10 | .transformed {
11 |   -webkit-transform: translateX(50%);
12 |   -ms-transform: translateX(50%);
13 |   transform: translateX(50%);
14 | }
15 | 
16 | ol {
17 |   margin-left: 2em;
18 | }
19 | 
20 | li {
21 |   margin-left: 25vw;
22 | }
23 | 


--------------------------------------------------------------------------------
/css/chapter6/transform-origin.css:
--------------------------------------------------------------------------------
  1 | .wrap {
  2 |   margin-top: 3em;
  3 | }
  4 | 
  5 | form {
  6 |   margin: auto auto 5em;
  7 |   padding: 1em;
  8 |   background: #eee;
  9 |   position: relative;
 10 |   z-index: 10;
 11 | }
 12 | form p {
 13 |   margin: 0 2em;
 14 | }
 15 | 
 16 | legend, fieldset {
 17 |   border: 0;
 18 |   font-weight: bold;
 19 |   padding: 0;
 20 | }
 21 | 
 22 | label {
 23 |   cursor: pointer;
 24 |   font-family: monospace;
 25 |   font-weight: bold;
 26 |   padding-left: .5rem;
 27 | }
 28 | 
 29 | .to {
 30 |   height: auto;
 31 |   padding: 2em 0;
 32 |   position: relative;
 33 | }
 34 | .to:before, .to:after {
 35 |   display: block;
 36 |   clear: both;
 37 | }
 38 | .to h3 {
 39 |   margin: -10px 0 0 0;
 40 |   font-size: 18px;
 41 | }
 42 | .to button {
 43 |   position: absolute;
 44 |   right: 5vw;
 45 |   bottom: 30%;
 46 | }
 47 | .to div {
 48 |   background: #00CC99;
 49 |   height: 10em;
 50 |   height: 10vw;
 51 |   position: relative;
 52 |   left: 0;
 53 |   top: 0;
 54 |   width: 10em;
 55 |   width: 10vw;
 56 |   transform-box: border-box;
 57 | }
 58 | .to b {
 59 |   display: block;
 60 |   line-height: 10vw;
 61 |   margin: auto;
 62 |   text-align: center;
 63 | }
 64 | 
 65 | @media screen and (max-width: 1038px) {
 66 |   .to div {
 67 |     font-size: 12px;
 68 |   }
 69 | }
 70 | .animate {
 71 |   -webkit-transition: 500ms;
 72 |   transition: 500ms;
 73 | }
 74 | 
 75 | .rotate {
 76 |   -webkit-transform: rotate(45deg);
 77 |   -ms-transform: rotate(45deg);
 78 |   transform: rotate(45deg);
 79 | }
 80 | .rotate b {
 81 |   -webkit-transform: rotate(-45deg);
 82 |   -ms-transform: rotate(-45deg);
 83 |   transform: rotate(-45deg);
 84 | }
 85 | 
 86 | .skewX {
 87 |   -webkit-transform: skewX(45deg);
 88 |   -ms-transform: skewX(45deg);
 89 |   transform: skewX(45deg);
 90 | }
 91 | .skewX b {
 92 |   -webkit-transform: skewX(45deg);
 93 |   -ms-transform: skewX(45deg);
 94 |   transform: skewX(45deg);
 95 | }
 96 | 
 97 | .scale {
 98 |   -webkit-transform: scale(1.5);
 99 |   -ms-transform: scale(1.5);
100 |   transform: scale(1.5);
101 | }
102 | .scale b {
103 |   -webkit-transform: scale(1);
104 |   -ms-transform: scale(1);
105 |   transform: scale(1);
106 | }
107 | 
108 | .to000 div {
109 |   transform-origin: 0 0;
110 | }
111 | 
112 | .to100100 div {
113 |   transform-origin: 100% 100%;
114 | }
115 | 
116 | .toneg1vw1vw div {
117 |   transform-origin: -1vw -1vw;
118 | }
119 | 
120 | .to150150 div {
121 |   transform-origin: 150% 150%;
122 | }
123 | 
124 | .to050 div {
125 |   transform-origin: 0% 50%;
126 | }
127 | 
128 | .flex b:last-child {
129 |   padding: 0;
130 | }
131 | 


--------------------------------------------------------------------------------
/css/chapter6/transform.css:
--------------------------------------------------------------------------------
 1 | #transform {
 2 |   -webkit-transition: 250ms;
 3 |   transition: 250ms;
 4 |   transform-origin: 0 0;
 5 |   background: #e91e63;
 6 |   height: 20vw;
 7 |   width: 50vw;
 8 |   margin: auto;
 9 |   padding: 5px;
10 | }
11 | #transform p {
12 |   position: absolute;
13 |   background: #8bc34a;
14 |   height: 15vw;
15 |   width: 15vw;
16 |   left: 0;
17 |   margin: 0;
18 |   padding: 5px;
19 | }
20 | 
21 | .transformed {
22 |   -webkit-transform: skew(-10deg);
23 |   -ms-transform: skew(-10deg);
24 |   transform: skew(-10deg);
25 | }
26 | 


--------------------------------------------------------------------------------
/css/chapter7/mq.css:
--------------------------------------------------------------------------------
 1 | [id=demo] {
 2 |   display: block;
 3 |   border-width: 1px 0;
 4 |   border-style: solid;
 5 |   padding: .5em;
 6 | }
 7 | [id=demo] ul {
 8 |   list-style: none;
 9 |   margin: 0;
10 | }
11 | [id=demo] li {
12 |   display: block;
13 |   margin-left: -40px;
14 | }
15 | 
16 | pre {
17 |   background: #f7f7f7;
18 |   border: 1px solid #ccc;
19 |   border-radius: 3px;
20 |   margin: auto;
21 |   overflow-x: scroll;
22 |   padding: 1em;
23 | }
24 | 
25 | @media (max-width: 59.9em) {
26 |   [id=demo] {
27 |     background: #DCE3FF;
28 |     border-color: #94aaff;
29 |   }
30 | }
31 | @media (max-width: 29.9em) {
32 |   [id=demo] {
33 |     background: #fcf;
34 |     border-color: #f361ff;
35 |   }
36 | }
37 | @media (min-width: 60em) {
38 |   [id=demo] {
39 |     background: #fff1c1;
40 |     border-color: #ffd500;
41 |   }
42 | 
43 |   [id=demo] ul {
44 |     display: flex;
45 |     margin-left: -40px;
46 |   }
47 | 
48 |   [id=demo] li {
49 |     margin-left: 0px;
50 |     padding: 0 .5em;
51 |   }
52 | }
53 | .mqmatches {
54 |   background: #f44336;
55 | }
56 | 


--------------------------------------------------------------------------------
/css/chapter7/supports.css:
--------------------------------------------------------------------------------
 1 | .title {
 2 |   font-style: italic;
 3 |   border-bottom: .1em dotted #ff5722;
 4 | }
 5 | 
 6 | #demo {
 7 |   font-size: 2em;
 8 |   background: #F6F6F6;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 3px;
11 |   padding: 1em;
12 | }
13 | #demo p {
14 |   margin: 0;
15 | }
16 | 
17 | @supports (text-decoration: underline wavy #e91e63) {
18 |   .title {
19 |     border: none;
20 |     font-style: normal;
21 |     text-decoration: underline wavy #e91e63;
22 |   }
23 | }
24 | @supports (text-decoration-color: #e91e63) and (text-decoration-style: double) {
25 |   #demo a {
26 |     text-decoration: underline double #0c0;
27 |   }
28 | }
29 | @supports (text-decoration-skip: ink) {
30 |   #demo a {
31 |     text-decoration-skip: ink;
32 |   }
33 | }
34 | @supports not (text-decoration-style: double) {
35 |   #demo a {
36 |     text-decoration: none;
37 |     border-bottom: 4px double #FF9800;
38 |   }
39 | }
40 | .supports-flex {
41 |   display: table-row;
42 | }
43 | .supports-flex li {
44 |   display: table-cell;
45 |   background: #A2D9D4;
46 |   border-width: 0 1px 0 0;
47 |   border-style: solid;
48 |   border-color: #009688;
49 |   padding: .5em;
50 | }
51 | .supports-flex li:first-child {
52 |   border-width: 0 1px;
53 | }
54 | .supports-flex li:hover {
55 |   background: #673ab7;
56 | }
57 | .supports-flex a {
58 |   font-weight: 600;
59 |   color: #009688;
60 |   text-decoration: none;
61 | }
62 | .supports-flex li:hover a {
63 |   color: #fff;
64 | }
65 | 
66 | @supports (display: flex) {
67 |   .supports-flex {
68 |     display: flex;
69 |     margin-left: -40px;
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/images/Buteo_magnirostris_by_Dario_Sanches.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/csspro1/dd7e6c435936101b5325c67d740a2caf9f407e61/images/Buteo_magnirostris_by_Dario_Sanches.jpg


--------------------------------------------------------------------------------
/images/csscircle-blue.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
 5 | <circle fill="#3A54A5" stroke="#000000" stroke-width="16" stroke-miterlimit="10" cx="101.3" cy="96.8" r="79.6"/>
 6 | <g>
 7 | 	<path d="M61,72.9c5.8,0,10.8,2.1,14,5.4l-7.5,10.2c-2.1-1.7-3.8-2.3-5.6-2.3c-6.1,0-9.8,4.6-9.8,11.9c0,7.3,4,11.9,9.2,11.9
 8 | 		c3.1,0,5.6-1.5,7.7-3.1l6.5,10.4c-4.8,4.2-11.1,6-16.1,6c-13.6,0-24.2-9.2-24.2-25.1C35.3,82.1,47.4,72.9,61,72.9z"/>
 9 | 	<path d="M86.6,106.3c4.4,3.3,8.4,4.8,11.7,4.8c3.5,0,4.8-1,4.8-2.9c0-2.5-4.4-3.6-9.2-5.6c-5.6-2.2-12.1-6.3-12.1-14.2
10 | 		c0-9.4,7.7-15.6,19-15.6c7.9,0,13.4,3.2,17.7,6.3l-7.3,9.8c-3.5-2.5-6.8-4-9.8-4c-2.8,0-4.2,0.8-4.2,2.7c0,2.5,4.2,3.5,9,5.2
11 | 		c5.8,2.1,12.3,5.8,12.3,14.4c0,9-7.1,15.9-20.5,15.9c-6.1,0-13.6-2.7-18.6-6.7L86.6,106.3z"/>
12 | 	<path d="M130,106.3c4.4,3.3,8.4,4.8,11.7,4.8c3.5,0,4.8-1,4.8-2.9c0-2.5-4.4-3.6-9.2-5.6c-5.6-2.2-12.1-6.3-12.1-14.2
13 | 		c0-9.4,7.7-15.6,19-15.6c7.9,0,13.4,3.2,17.7,6.3l-7.3,9.8c-3.5-2.5-6.8-4-9.8-4c-2.8,0-4.2,0.8-4.2,2.7c0,2.5,4.2,3.5,9,5.2
14 | 		c5.8,2.1,12.3,5.8,12.3,14.4c0,9-7.1,15.9-20.5,15.9c-6.1,0-13.6-2.7-18.6-6.7L130,106.3z"/>
15 | </g>
16 | </svg>
17 | 


--------------------------------------------------------------------------------
/images/csscircle-pink.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
 5 | <circle fill="#D02142" stroke="#000000" stroke-width="16" stroke-miterlimit="10" cx="101.3" cy="96.8" r="79.6"/>
 6 | <g>
 7 | 	<path d="M61,72.9c5.8,0,10.8,2.1,14,5.4l-7.5,10.2c-2.1-1.7-3.8-2.3-5.6-2.3c-6.1,0-9.8,4.6-9.8,11.9c0,7.3,4,11.9,9.2,11.9
 8 | 		c3.1,0,5.6-1.5,7.7-3.1l6.5,10.4c-4.8,4.2-11.1,6-16.1,6c-13.6,0-24.2-9.2-24.2-25.1C35.3,82.1,47.4,72.9,61,72.9z"/>
 9 | 	<path d="M86.6,106.3c4.4,3.3,8.4,4.8,11.7,4.8c3.5,0,4.8-1,4.8-2.9c0-2.5-4.4-3.6-9.2-5.6c-5.6-2.2-12.1-6.3-12.1-14.2
10 | 		c0-9.4,7.7-15.6,19-15.6c7.9,0,13.4,3.2,17.7,6.3l-7.3,9.8c-3.5-2.5-6.8-4-9.8-4c-2.8,0-4.2,0.8-4.2,2.7c0,2.5,4.2,3.5,9,5.2
11 | 		c5.8,2.1,12.3,5.8,12.3,14.4c0,9-7.1,15.9-20.5,15.9c-6.1,0-13.6-2.7-18.6-6.7L86.6,106.3z"/>
12 | 	<path d="M130,106.3c4.4,3.3,8.4,4.8,11.7,4.8c3.5,0,4.8-1,4.8-2.9c0-2.5-4.4-3.6-9.2-5.6c-5.6-2.2-12.1-6.3-12.1-14.2
13 | 		c0-9.4,7.7-15.6,19-15.6c7.9,0,13.4,3.2,17.7,6.3l-7.3,9.8c-3.5-2.5-6.8-4-9.8-4c-2.8,0-4.2,0.8-4.2,2.7c0,2.5,4.2,3.5,9,5.2
14 | 		c5.8,2.1,12.3,5.8,12.3,14.4c0,9-7.1,15.9-20.5,15.9c-6.1,0-13.6-2.7-18.6-6.7L130,106.3z"/>
15 | </g>
16 | </svg>
17 | 


--------------------------------------------------------------------------------
/images/csscircle-yellow.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 175.3 175.3" enable-background="new 0 0 175.3 175.3" xml:space="preserve">
 5 | <circle fill="#FFC610" stroke="#000000" stroke-width="16" stroke-miterlimit="10" cx="87.6" cy="87.6" r="79.6"/>
 6 | <g>
 7 | 	<path d="M47.4,63.7c5.8,0,10.8,2.1,14,5.4l-7.5,10.2c-2.1-1.7-3.8-2.3-5.6-2.3c-6.1,0-9.8,4.6-9.8,11.9c0,7.3,4,11.9,9.2,11.9
 8 | 		c3.1,0,5.6-1.5,7.7-3.1L62,108c-4.8,4.2-11.1,6-16.1,6c-13.6,0-24.2-9.2-24.2-25.1C21.7,72.9,33.8,63.7,47.4,63.7z"/>
 9 | 	<path d="M72.9,97.1c4.4,3.3,8.4,4.8,11.7,4.8c3.5,0,4.8-1,4.8-2.9c0-2.5-4.4-3.6-9.2-5.6c-5.6-2.2-12.1-6.3-12.1-14.2
10 | 		c0-9.4,7.7-15.6,19-15.6c7.9,0,13.4,3.2,17.7,6.3l-7.3,9.8c-3.5-2.5-6.8-4-9.8-4c-2.8,0-4.2,0.8-4.2,2.7c0,2.5,4.2,3.5,9,5.2
11 | 		c5.8,2.1,12.3,5.8,12.3,14.4c0,9-7.1,15.9-20.5,15.9c-6.1,0-13.6-2.7-18.6-6.7L72.9,97.1z"/>
12 | 	<path d="M116.3,97.1c4.4,3.3,8.4,4.8,11.7,4.8c3.5,0,4.8-1,4.8-2.9c0-2.5-4.4-3.6-9.2-5.6c-5.6-2.2-12.1-6.3-12.1-14.2
13 | 		c0-9.4,7.7-15.6,19-15.6c7.9,0,13.4,3.2,17.7,6.3l-7.3,9.8c-3.5-2.5-6.8-4-9.8-4c-2.8,0-4.2,0.8-4.2,2.7c0,2.5,4.2,3.5,9,5.2
14 | 		c5.8,2.1,12.3,5.8,12.3,14.4c0,9-7.1,15.9-20.5,15.9c-6.1,0-13.6-2.7-18.6-6.7L116.3,97.1z"/>
15 | </g>
16 | </svg>
17 | 


--------------------------------------------------------------------------------
/images/csscircle.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="12 7 179 179" enable-background="new 12 7 179 179" xml:space="preserve">
 5 | <g>
 6 | 	<circle fill="#5FBB46" stroke="#000000" stroke-width="16" stroke-miterlimit="10" cx="101.3" cy="96.8" r="79.6"/>
 7 | 	<g>
 8 | 		<path d="M61,72.9c5.8,0,10.8,2.1,14,5.4l-7.5,10.2c-2.1-1.7-3.8-2.3-5.6-2.3c-6.1,0-9.8,4.6-9.8,11.9s4,11.9,9.2,11.9
 9 | 			c3.1,0,5.6-1.5,7.7-3.1l6.5,10.4c-4.8,4.2-11.1,6-16.1,6c-13.6,0-24.2-9.2-24.2-25.1C35.3,82.1,47.4,72.9,61,72.9z"/>
10 | 		<path d="M86.6,106.3c4.4,3.3,8.4,4.8,11.7,4.8c3.5,0,4.8-1,4.8-2.9c0-2.5-4.4-3.6-9.2-5.6c-5.6-2.2-12.1-6.3-12.1-14.2
11 | 			c0-9.4,7.7-15.6,19-15.6c7.9,0,13.4,3.2,17.7,6.3l-7.3,9.8c-3.5-2.5-6.8-4-9.8-4c-2.8,0-4.2,0.8-4.2,2.7c0,2.5,4.2,3.5,9,5.2
12 | 			c5.8,2.1,12.3,5.8,12.3,14.4c0,9-7.1,15.9-20.5,15.9c-6.1,0-13.6-2.7-18.6-6.7L86.6,106.3z"/>
13 | 		<path d="M130,106.3c4.4,3.3,8.4,4.8,11.7,4.8c3.5,0,4.8-1,4.8-2.9c0-2.5-4.4-3.6-9.2-5.6c-5.6-2.2-12.1-6.3-12.1-14.2
14 | 			c0-9.4,7.7-15.6,19-15.6c7.9,0,13.4,3.2,17.7,6.3l-7.3,9.8c-3.5-2.5-6.8-4-9.8-4c-2.8,0-4.2,0.8-4.2,2.7c0,2.5,4.2,3.5,9,5.2
15 | 			c5.8,2.1,12.3,5.8,12.3,14.4c0,9-7.1,15.9-20.5,15.9c-6.1,0-13.6-2.7-18.6-6.7L130,106.3z"/>
16 | 	</g>
17 | </g>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/images/diamond.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/csspro1/dd7e6c435936101b5325c67d740a2caf9f407e61/images/diamond.png


--------------------------------------------------------------------------------
/images/menu.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 40 17.6" enable-background="new 0 0 40 17.6" xml:space="preserve">
 5 |     <title>Menu</title>
 6 | <g>
 7 | 	<path fill="#FFFFFF" d="M5.6,4l2.1,6.4l2-6.4h2.9v9.2h-2.2V11l0.2-4.4l-2.2,6.6H6.9L4.7,6.6L4.9,11v2.1H2.7V4H5.6z"/>
 8 | 	<path fill="#FFFFFF" d="M19.8,9.3h-3.5v2.2h4.1v1.7H14V4h6.4v1.7h-4.1v1.9h3.5V9.3z"/>
 9 | 	<path fill="#FFFFFF" d="M29,13.2h-2.2l-3.3-5.7v5.7h-2.2V4h2.2l3.3,5.7V4H29V13.2z"/>
10 | 	<path fill="#FFFFFF" d="M37.6,4v6c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.4,0.8-0.7,1c-0.3,0.3-0.7,0.5-1.1,0.6c-0.4,0.1-0.9,0.2-1.5,0.2
11 | 		c-0.5,0-1-0.1-1.5-0.2c-0.4-0.1-0.8-0.4-1.1-0.6c-0.3-0.3-0.6-0.6-0.7-1c-0.2-0.4-0.3-0.9-0.3-1.4V4h2.2v6c0,0.6,0.1,1,0.4,1.2
12 | 		c0.2,0.3,0.6,0.4,1,0.4c0.5,0,0.8-0.1,1-0.4c0.2-0.3,0.4-0.7,0.4-1.2V4H37.6z"/>
13 | </g>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/images/phone-icon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 264 261" style="enable-background:new 0 0 264 261;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#FFFFFF;}
 7 | </style>
 8 | <g>
 9 | 	<path class="st0" d="M253.9,225.9c-3.8,8.8-13.8,14.5-21.8,19c-10.6,5.7-21.3,9.1-33.3,9.1c-16.6,0-31.7-6.8-46.9-12.4
10 | 		c-10.9-3.9-21.5-8.8-31.3-14.8c-30.4-18.8-67.1-55.5-85.9-85.9c-6.1-9.8-10.9-20.4-14.9-31.3C14.2,94.4,7.4,79.3,7.4,62.7
11 | 		c0-12,3.4-22.7,9.1-33.3c4.5-8,10.2-18.1,19-21.8C41.4,4.9,54,2,60.4,2c1.3,0,2.5,0,3.8,0.5c3.8,1.3,7.7,10,9.5,13.6
12 | 		c5.7,10.2,11.3,20.6,17.2,30.6c2.9,4.6,8.2,10.4,8.2,15.9c0,10.9-32.4,26.8-32.4,36.5c0,4.8,4.5,11.1,7,15.4
13 | 		c18.1,32.6,40.6,55.1,73.2,73.2c4.3,2.5,10.6,7,15.4,7c9.7,0,25.6-32.4,36.5-32.4c5.5,0,11.3,5.4,15.9,8.2
14 | 		c10,5.9,20.4,11.4,30.6,17.2c3.6,1.8,12.3,5.7,13.6,9.5c0.5,1.3,0.5,2.5,0.5,3.8C259.4,207.5,256.6,220,253.9,225.9z"/>
15 | </g>
16 | </svg>
17 | 


--------------------------------------------------------------------------------
/images/portrait.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/csspro1/dd7e6c435936101b5325c67d740a2caf9f407e61/images/portrait.png


--------------------------------------------------------------------------------
/images/svg-icons.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 3 | 	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 4 | <defs>
 5 | 	<style type="text/css">
 6 | 	<![CDATA[
 7 | 		.st0{fill:#FF0000;}
 8 | 		.st1{fill:#92029E;}
 9 | 		.st2{fill:#007EFC;}
10 | 
11 | 		polygon:not(:target) {
12 | 			display: none;
13 | 		}
14 | 
15 | 	]]>
16 | </style>
17 | </defs>
18 | 
19 | <polygon id="star" class="st0" points="24.4,1.7 31.9,16.8 48.5,19.2 36.5,30.9 39.3,47.4 24.4,39.6 9.6,47.4 12.4,30.9 0.4,19.2
20 | 	17,16.8 "/>
21 | <polygon id="hexagon" class="st1" points="48.9,31.4 31.6,49.2 7.6,43.1 0.8,19.2 18.1,1.4 42.2,7.5 "/>
22 | <polygon id="triangle" class="st2" points="0.8,1.5 42.1,25.3 0.8,49.2 "/>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/images/svgmqbg.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 329.3 334.1" enable-background="new 0 0 329.3 334.1" xml:space="preserve">
 5 |     <defs>
 6 |         <style type="text/css">
 7 |         <![CDATA[
 8 |            line, path {
 9 |                stroke: #000;
10 |            }
11 |            @media (width: 100px) {
12 |                 path, line {
13 |                     stroke-width: 6;
14 |                     stroke-miterlimit: 8;
15 |                 }
16 |                 path {
17 |                     fill: #00bcd4;
18 |                 }
19 |             }
20 | 
21 |           @media (min-width: 200px) {
22 |                 path, line {
23 |                     stroke-width: 8;
24 |                     stroke-miterlimit: 10;
25 |                 }
26 |                 path {
27 |                     fill: #9c27b0;
28 |                 }
29 |             }
30 |             @media (min-width: 300px) {
31 |                 path, line {
32 |                     stroke-width: 10;
33 |                     stroke-miterlimit: 12;
34 |                 }
35 |                 path {
36 |                     fill: #4caf50;
37 |                 }
38 |             }
39 |         ]]>
40 |         </style>
41 |     </defs>
42 | 	<g id="circles">
43 | 		<path id="outermost" d="M164.1,323.3
44 | 			c-86.5,0-156.5-70-156.5-156.5s70-156.5,156.5-156.5s156.5,70,156.5,156.5S250.6,323.3,164.1,323.3z"/>
45 | 		<path id="circle5" d="M294.5,166.8
46 | 			c0-72.1-58.3-130.4-130.4-130.4S33.7,94.7,33.7,166.8S92,297.2,164.1,297.2S294.5,238.9,294.5,166.8z"/>
47 | 		<path id="circle4" d="M164.1,271.2
48 | 			c-57.7,0-104.3-46.7-104.3-104.3S106.4,62.5,164.1,62.5s104.3,46.7,104.3,104.3S221.8,271.2,164.1,271.2z"/>
49 | 		<path id="circle3" d="M242.3,166.8
50 | 			c0-43.3-35-78.3-78.3-78.3s-78.3,35-78.3,78.3s35,78.3,78.3,78.3S242.3,210.1,242.3,166.8z"/>
51 | 		<path id="circle2" d="M164.1,219
52 | 			c-28.8,0-52.2-23.3-52.2-52.2s23.3-52.2,52.2-52.2s52.2,23.3,52.2,52.2S192.9,219,164.1,219z"/>
53 | 		<path id="innermost" d="M190.2,166.8
54 | 			c0-14.4-11.7-26.1-26.1-26.1S138,152.4,138,166.8s11.7,26.1,26.1,26.1S190.2,181.2,190.2,166.8z"/>
55 | 	</g>
56 | 	<g id="spokes">
57 |     <line x1="160.2" y1="167.1" x2="160.2" y2="323.1"/>
58 | 		<line x1="164.1" y1="166.8" x2="312.9" y2="215.2"/>
59 | 		<line x1="164.1" y1="166.8" x2="256.1" y2="40.2"/>
60 | 		<line x1="164.1" y1="166.8" x2="72.1" y2="40.2"/>
61 | 		<line x1="164.1" y1="166.8" x2="15.2" y2="215.2"/>
62 | 	</g>
63 | </svg>
64 | 


--------------------------------------------------------------------------------
/images/tomato.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/csspro1/dd7e6c435936101b5325c67d740a2caf9f407e61/images/tomato.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |    <html lang="en-US">
 3 |    <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title>CSS Master Code Examples</title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="css/base.css">
10 |         <script src="js/html5shiv.min.js"></script>
11 |     </head>
12 |     <body>
13 |         <header>
14 |             <h1><i>CSS Master</i> Code Examples</h1>
15 |         </header>
16 | 
17 |         <nav class="content">  
18 |             <h2>Demos organized by chapter</h2>
19 |             <ul>
20 |                 <li><a href="01-selectors/index.html">Chapter 1: Selectors</a></li>
21 |                 <li><a href="04-layouts/index.html">Chapter 4: Creating Complex Layouts</a></li>
22 |                 <li><a href="05-animation/index.html">Chapter 5: Transitions and Animations</a></li>
23 |                 <li><a href="06-transforms/index.html">Chapter 6: Transforms</a></li>
24 |                 <li><a href="07-conditionalcss/index.html">Chapter 7: Conditional CSS</a></li>
25 |                 <li><a href="08-svg/index.html">Chapter 8: Using CSS with SVG</a></li>
26 |             </ul>
27 |         </nav>
28 |         
29 |         
30 | 
31 |         <footer>
32 |             <p>
33 |                 Examples from <i>CSS Master</i> written by Tiffany B. Brown and published by SitePoint, Ltd. &copy; 2015.
34 |             </p>
35 |         </footer>
36 | 
37 | 
38 |     </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/js/chapter4/box-sizing.js:
--------------------------------------------------------------------------------
 1 | var cbs = document.getElementById('change-box-sizing');
 2 | 
 3 | var updateProperty = function (e) {
 4 |     'use strict';
 5 |     var styleObj = document.styleSheets[document.styleSheets.length - 1],
 6 |         rule = '.box-sizing-wrapper > aside, .box-sizing-wrapper > article {box-sizing: %s}',
 7 |         display = document.querySelector('h2 code:nth-child(2)');
 8 | 
 9 |     rule = rule.replace(/%s/, e.target.value);
10 | 
11 |     display.replaceChild(document.createTextNode(': ' + e.target.value), display.firstChild);
12 | 
13 |     if (styleObj.cssRules[0]) {
14 |         styleObj.deleteRule(0);
15 |     }
16 |     styleObj.insertRule(rule, 0);
17 | };
18 | 
19 | var setup = function () {
20 |     'use strict';
21 |     var newstyle = document.createElement('style'), enable;
22 |     newstyle.setAttribute('id', 'bs');
23 |     document.head.appendChild(newstyle);
24 | };
25 | 
26 | cbs.addEventListener('change', updateProperty);
27 | window.addEventListener('load', setup);
28 | 


--------------------------------------------------------------------------------
/js/chapter4/muticol.js:
--------------------------------------------------------------------------------
 1 | var init = function () {
 2 |        
 3 |     CSSHelpers.styleSheetTitle = 'MultiColumn';
 4 | 
 5 |     var form, styleSheet, updateStyle
 6 | 
 7 |     form = document.getElementById('multi');
 8 |     styleSheet = CSSHelpers.getStyleSheet(CSSHelpers.styleSheetTitle);
 9 | 
10 |     updateStyle = function(e){
11 |        var cnval;
12 | 
13 |        if(e.target.id == 'column-number') {
14 |             cnval = [];
15 | 
16 |             cnval[0] = document.querySelector('#column-width').value;
17 |             cnval[1] = ' ';
18 |             cnval[2] = document.querySelector('#column-number').value;
19 | 
20 |             CSSHelpers.setProp('multi-col', 'columns', cnval.join(''));
21 |        }  else {
22 |             cnval = e.target.value;
23 |             CSSHelpers.setProp('multi-col', e.target.id, cnval);
24 |        }
25 |     }
26 | 
27 |     form.addEventListener('input', updateStyle);
28 |     form.addEventListener('change', updateStyle);
29 |     form.addEventListener('submit', CSSHelpers.preventSubmit);
30 |     form.addEventListener('reset', CSSHelpers.resetRules);
31 | 
32 | };
33 | 
34 | window.addEventListener('load', init);


--------------------------------------------------------------------------------
/js/chapter4/stacking.js:
--------------------------------------------------------------------------------
1 | var opacity = document.getElementById('opacity');
2 | 
3 | opacity.addEventListener('change', function(e){
4 |     var op = document.getElementById('output');
5 |     document.getElementById('f').classList.toggle('opa');
6 |     op.replaceChild(document.createTextNode(e.target.value), op.firstChild);
7 | });
8 | 
9 | 


--------------------------------------------------------------------------------
/js/chapter5/anim-events.js:
--------------------------------------------------------------------------------
 1 | var wobble, output, removeClasses, addClasses, updateEventList, eventlist;
 2 | 
 3 | wobble = document.getElementsByClassName('svgwrap')[0];
 4 | output = document.getElementById('output');
 5 | 
 6 | removeClasses = function(){
 7 | 	var classes = ['running','finite','wobble'];
 8 | 	classes.map(function(c){
 9 | 		wobble.classList.remove(c);
10 | 	});
11 | }
12 | 
13 | addClasses = function(){
14 | 	var classes = ['running','finite','wobble'];
15 | 	classes.map(function(c){
16 | 		wobble.classList.add(c);
17 | 	});
18 | }
19 | 
20 | updateEventList = function(evt) {
21 | 	var txt = document.createTextNode(evt.animationName +': ' + evt.type + '\n');
22 | 	output.appendChild(txt);
23 | }
24 | 
25 | eventlist = ['animationstart','animationend','animationiteration','webkitAnimationStart','webkitAnimationEnd','webkitAnimationIteration'];
26 | 
27 | eventlist.map(function(el) {
28 | 	wobble.addEventListener(el, updateEventList, true);
29 | });
30 | 
31 | document.querySelector('.animate').addEventListener('click', function(e){
32 | 	if(e.target.type == 'reset'){
33 | 		removeClasses();
34 | 		while(output.firstChild){
35 | 			output.removeChild(output.firstChild)
36 | 		};
37 | 	}
38 | 	if( e.target.type == 'button') {
39 | 		addClasses();
40 | 	}
41 | 	
42 | }, true)
43 | 
44 | 
45 | 
46 | 
47 | 


--------------------------------------------------------------------------------
/js/chapter5/fill-mode.js:
--------------------------------------------------------------------------------
 1 | var anim = document.querySelectorAll('.animate'),
 2 | fillmode = document.querySelectorAll('[name=animation-fill-mode]'),
 3 | svgwrap = document.querySelector('.svgwrap'),
 4 | cycle = ['none', 'forwards', 'backwards', 'both'];
 5 | 
 6 | var clearCycle = function() {
 7 | 	for(var o in cycle){
 8 | 		svgwrap.classList.remove(cycle[o]);
 9 | 	}
10 | }
11 | 
12 | Array.prototype.map.call(anim, function(an){
13 | 	an.addEventListener('click', function(e){
14 | 		var d;
15 | 		if(e.target.nodeName == 'BUTTON') {
16 | 			d = e.target.dataset ? e.target.dataset.classname : e.target.getAttribute('data-classname')
17 | 			svgwrap.classList.toggle(d);
18 | 		}
19 | 	})
20 | });
21 | 
22 | Array.prototype.map.call(fillmode, function(fm){
23 | 	fm.addEventListener('click', function(e){
24 | 		clearCycle();
25 | 		svgwrap.classList.remove('wiggle');
26 | 		svgwrap.classList.toggle(e.target.value);
27 | 	})
28 | });
29 | 
30 | 


--------------------------------------------------------------------------------
/js/chapter5/play-pause.js:
--------------------------------------------------------------------------------
1 | document.querySelector('.animate').addEventListener('click', function(e){
2 | 	if( e.target.nodeName == 'BUTTON' ){
3 | 		e.currentTarget.getElementsByClassName('wobble')[0].classList.toggle('running');
4 | 	}
5 | })


--------------------------------------------------------------------------------
/js/chapter5/stop-anim.js:
--------------------------------------------------------------------------------
 1 | var toggleAll =  document.querySelector('.stopanim'),
 2 | anim = document.querySelectorAll('.animate'),
 3 | svgwrap = document.querySelectorAll('.svgwrap');
 4 | 
 5 | var togglePulse = function(e){
 6 | 	var d;
 7 | 
 8 | 	if(e.target.nodeName == 'BUTTON') {
 9 | 		d = e.target.dataset ? e.target.dataset.classname : e.target.getAttribute('data-classname');
10 | 		e.target.parentNode.parentNode.getElementsByClassName('svgwrap')[0].classList.toggle(d);
11 | 	} 
12 | }
13 | 
14 | Array.prototype.map.call(anim, function(an){
15 | 	an.addEventListener('click', togglePulse);
16 | });
17 | 
18 | if(toggleAll){
19 | 	toggleAll.addEventListener('click', function(){
20 | 		var clickEvent;
21 | 
22 | 		clickEvent = document.createEvent("MouseEvents");
23 | 		clickEvent.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
24 | 
25 | 		Array.prototype.map.call(anim, function(an){
26 | 			an.getElementsByTagName('button')[0].dispatchEvent(clickEvent);
27 | 		});
28 | 	});
29 | }
30 | 
31 | var transitionEnd = ['webkitAnimationEnd', 'animationend'];
32 | 
33 | transitionEnd.map(function(te){
34 |     document.querySelector('.svgwrap').addEventListener(te, function(evt) {
35 |        event.target.classList.remove('wiggle'); 
36 |     });
37 | });


--------------------------------------------------------------------------------
/js/chapter6/backface-vis-card.js:
--------------------------------------------------------------------------------
1 | var trigger = document.querySelector('[type=button]'),
2 | card = document.querySelectorAll('.card');
3 | 
4 | trigger.addEventListener('click', function(e){
5 |     Array.prototype.map.call(card, function(c) {
6 |         c.classList.toggle(e.target.dataset.classname);
7 |     });
8 | }, true);
9 | 


--------------------------------------------------------------------------------
/js/chapter6/backface-vis.js:
--------------------------------------------------------------------------------
 1 | var trigger = document.querySelector('[type=button]'),
 2 | dice = document.querySelectorAll('.dice'),
 3 | face = document.querySelectorAll('.dice div'),
 4 | multi = document.getElementById('multi'),
 5 | angle = document.getElementsByClassName('angle');
 6 | 
 7 | trigger.addEventListener('click', function(e){
 8 |     Array.prototype.map.call(face, function(f) {
 9 |         f.classList.toggle(e.target.dataset.classname);
10 |     });
11 |     var val = document.getElementById('value');
12 | 
13 |     val.innerHTML = (val.innerHTML === 'hidden') ? 'visible' : 'hidden';
14 | }, true);
15 | 
16 | multi.addEventListener('change', function(e){
17 |     Array.prototype.map.call(dice, function(f) {
18 |         f.classList.toggle(e.target.dataset.classname);
19 |     });
20 | }, true);
21 | 
22 | 
23 | Array.prototype.map.call(angle, function(a, ind, list) {
24 |     a.addEventListener('input', function(e){
25 |        var s = document.styleSheets[1];
26 |        var css = rulestr;
27 |        var nr = css.replace(/%x/g, list[0].value).replace(/%y/g, list[1].value);
28 |        s.insertRule(nr, s.cssRules.length);
29 |     }, true);
30 | });
31 | 
32 | 


--------------------------------------------------------------------------------
/js/chapter6/persp-origin.js:
--------------------------------------------------------------------------------
 1 | var units = document.querySelectorAll('[name=units]'), 
 2 | p = document.getElementById('perspective'),
 3 | pos = document.querySelectorAll('[type=number]'),
 4 | rulestr = '#perspective{perspective-origin: %s}',
 5 | form = document.forms[0],
 6 | styles = document.styleSheets[2];
 7 | 
 8 | var parseValues = function(str) {
 9 | 	return str.replace(/px/g, '').split(' ');
10 | }
11 | 
12 | var calculatePct = function(num, denom) {
13 | 	return (num / denom) * 100;
14 | }
15 | 
16 | var changeUnit = function(e) {
17 | 	var xy, ps = p, s = getComputedStyle(ps);
18 | 
19 | 	xy = s.webkitPerspectiveOrigin || s.perspectiveOrigin;
20 | 	xy = parseValues(xy);
21 | 
22 | 	if(e.target.value == '%') {		
23 | 		xy[0] = calculatePct(xy[0], parseInt(s.width, 10));
24 | 		xy[1] = calculatePct(xy[1], parseInt(s.height, 10));
25 | 	}
26 | 
27 | 	xy.map(function(o, idx, obj){
28 | 		pos[idx].value = obj[idx];
29 | 	});
30 | }
31 | 
32 | var updatePerspOrigin = function(e) {
33 | 	var unit = form.units.value, str = [], s = styles;
34 | 
35 | 	if(!!s.cssRules.length){
36 | 		s.deleteRule(0);
37 | 	}
38 | 
39 | 	str[0] = pos[0].value;
40 | 	str[1] = unit+' ';
41 | 	str[2] = pos[1].value;
42 | 	str[3] = unit;
43 | 
44 | 	var css = rulestr.replace(/%s/g, function(){
45 | 		return str.join('');
46 | 	});
47 | 
48 | 	s.insertRule(css, 0);
49 | }
50 | 
51 | Array.prototype.map.call(units, function(u, idx, arr){
52 | 	u.addEventListener('change', changeUnit, true);
53 | })
54 | 
55 | Array.prototype.map.call(pos, function(u, idx, arr){
56 | 	u.addEventListener('input', updatePerspOrigin, true);
57 | })
58 | 
59 | form.addEventListener('reset', function(){
60 | 	var s = styles;
61 | 	s.deleteRule(0);
62 | }, true)
63 | 
64 | 	


--------------------------------------------------------------------------------
/js/chapter6/perspective-func.js:
--------------------------------------------------------------------------------
 1 | var css = document.styleSheets[2],
 2 |     cssRulesInitLength = css.cssRules.length,
 3 |     persp = document.querySelectorAll('[type=range]'),
 4 |     output = document.querySelector('#output span');
 5 | 
 6 | 
 7 | 
 8 | Array.prototype.map.call(persp, function(p){
 9 |     p.addEventListener('input', function(e){
10 |         var rule, txt, val = e.target.value+'px';
11 |         rule = rulestr.replace(/\%p/g,  val);
12 | 
13 |         txt = document.createTextNode( val );
14 | 
15 |         if( output.firstChild ) {
16 |             output.replaceChild(txt, output.firstChild);
17 |         }  else {
18 |             output.appendChild(txt);
19 |         }
20 |         /* Update last rule */
21 |         if(css.cssRules.length > cssRulesInitLength ){
22 |             css.deleteRule(css.cssRules.length - 1);
23 |         }
24 |         css.insertRule(rule, css.cssRules.length);
25 |     }, true);
26 | })
27 | 
28 | document.forms[0].addEventListener('reset', function(e){
29 |     var txt = document.createTextNode('0'), css = document.styleSheets[2];
30 |     if( output.firstChild ) {
31 |             output.replaceChild(txt, output.firstChild);
32 |     }  else {
33 |         output.appendChild(txt);
34 |     }
35 |     if(css.cssRules[css.cssRules.length-1].selectorText == '.perpfunc') {
36 |         css.deleteRule(css.cssRules.length-1);
37 |     }
38 | }, true);
39 | 
40 | 


--------------------------------------------------------------------------------
/js/chapter6/perspective.js:
--------------------------------------------------------------------------------
 1 | var css = document.styleSheets[document.styleSheets.length-1],
 2 |     cssRulesInitLength = css.cssRules.length,
 3 |     persp = document.querySelectorAll('[type=range]'),
 4 |     output = document.querySelector('#output span');
 5 | 
 6 | 
 7 | 
 8 | Array.prototype.map.call(persp, function(p){
 9 |     p.addEventListener('input', function(e){
10 |         var rule, txt, val = (e.target.value == 0) ? 'none' : e.target.value + 'px';
11 |         rule = rulestr.replace(/\%s/g,  val);
12 | 
13 |         txt = document.createTextNode( val )
14 | 
15 |         if( output.firstChild ) {
16 |             output.replaceChild(txt, output.firstChild);
17 |         }  else {
18 |             output.appendChild(txt);
19 |         }
20 | 
21 |         /* Update last rule */
22 |         if(css.cssRules.length > cssRulesInitLength ){
23 |             css.deleteRule(css.cssRules.length - 1);
24 |         }
25 |         css.insertRule(rule, css.cssRules.length);
26 |     }, true);
27 | })
28 | 
29 | document.forms[0].addEventListener('reset', function(e){
30 |     var txt = document.createTextNode('none'), css = document.styleSheets[document.styleSheets.length-1];
31 |     if( output.firstChild ) {
32 |             output.replaceChild(txt, output.firstChild);
33 |     }  else {
34 |         output.appendChild(txt);
35 |     }
36 |     if(css.cssRules[css.cssRules.length-1].selectorText == '#perspective') {
37 |         css.deleteRule(css.cssRules.length-1);
38 |     }
39 | }, true);
40 | 


--------------------------------------------------------------------------------
/js/chapter6/rotate3d.js:
--------------------------------------------------------------------------------
 1 | var css = document.styleSheets[document.styleSheets.length-1], 
 2 |     cssRulesInitLength = css.cssRules.length,
 3 |     form = document.forms[0],
 4 |     outputs = document.querySelectorAll('#output span'),
 5 |     args = document.querySelectorAll('[type=number]');
 6 | 
 7 | if(document.forms.length){
 8 |     var addPersp = document.forms[0].addpersp;
 9 | }
10 | 
11 | form.addEventListener('input', function(e){
12 |     var ar = args, argstr = [];
13 | 
14 |     Array.prototype.map.call(ar, function(n){
15 |         argstr.push(n.value);
16 |     });
17 | 
18 |     var str = rulestr.replace(/%s/g, function(){
19 |         return argstr.join(',')+'deg';
20 |     });
21 | 
22 |     if(css.cssRules.length){
23 |         css.deleteRule(css.cssRules.length-1);
24 |     }
25 |     css.insertRule(str, css.cssRules.length);
26 | }, true);
27 | 
28 | /* Update property display */
29 | form.addEventListener('input', function(e){
30 |     Array.prototype.map.call(args, function(ar, idx){
31 |         outputs[idx].innerHTML = ar.value;
32 |     });
33 | }, true)
34 | 
35 | form.addEventListener('reset', function(e){
36 |     Array.prototype.map.call(args, function(ar, idx){
37 |         outputs[idx].innerHTML = 0;
38 |     });
39 | 
40 |     if(css.cssRules.length){
41 |         css.deleteRule(css.cssRules.length-1);
42 |     }
43 |     document.querySelector('.content').classList.remove('dimen');
44 |     addPersp.checked = false;
45 | }, true);
46 |    
47 | 
48 | if(addPersp) {
49 |     addPersp.addEventListener('change', function(e){
50 |         document.querySelector('.content').classList.toggle('dimen');
51 |     }, true);
52 | }
53 | 


--------------------------------------------------------------------------------
/js/chapter6/rotations.js:
--------------------------------------------------------------------------------
 1 | var trimto2decpts = function(inp, decimalplaces){
 2 | 	var intinp, pow, mult;
 3 | 	pow = !!decimalplaces ? decimalplaces : 2;
 4 | 
 5 | 	mult = Math.pow(10, pow);
 6 | 	return parseInt(inp * mult, 10) / mult;
 7 | }
 8 | 
 9 | var css = document.styleSheets[document.styleSheets.length-1], 
10 |     cssRulesInitLength = css.cssRules.length;
11 | 
12 | if(document.forms.length){
13 |     var addPersp = document.forms[0].addpersp;
14 | }
15 | 
16 | angle.addEventListener('input', function(e){
17 |     var val = e.target.value,
18 |     deg = val+'deg';
19 |     rule = rulestr.replace(/\%s/g,deg),
20 |     txt = document.createTextNode(val),
21 |     output = document.querySelectorAll('#output span'),
22 |     units = [],
23 |     ang = new Angles();
24 | 
25 |     /* Update last rule */
26 |     if(css.cssRules.length > cssRulesInitLength ){
27 |         css.deleteRule(css.cssRules.length - 1);
28 |     }
29 |     css.insertRule(rule, css.cssRules.length);
30 | 
31 |     /*
32 |     Update degree value. Using an array because skew accepts
33 |     two arguments and we need to update both.
34 |     */
35 |     Array.prototype.map.call(output, function(op){
36 |         var t = txt.cloneNode();
37 |         if(op.firstChild){
38 |             op.replaceChild(t, op.firstChild);
39 |         } else {
40 |             op.appendChild(t);
41 |         }
42 |     });
43 | 
44 | 
45 |     /* Convert degrees to other units */
46 |     units[0] = trimto2decpts(ang.toRadians(deg));
47 |     units[1] = trimto2decpts(ang.toGradians(deg));
48 |     units[2] = trimto2decpts(ang.toTurns(deg));
49 | 
50 |     Array.prototype.map.call(document.getElementsByClassName('unit'), function(u, ind){
51 |         var txt = document.createTextNode(units[ind]);
52 | 
53 |         if(u.firstChild){
54 |             u.replaceChild(txt, u.firstChild);
55 |         } else {
56 |             u.appendChild(txt);
57 |         }
58 |     });
59 | }, true)
60 | 
61 | if(addPersp) {
62 |     addPersp.addEventListener('change', function(e){
63 |         document.querySelector('.content').classList.toggle('dimen');
64 |     }, true);
65 | }
66 | 


--------------------------------------------------------------------------------
/js/chapter6/scale.js:
--------------------------------------------------------------------------------
 1 | var css = document.styleSheets[document.styleSheets.length-1], 
 2 |     cssRulesInitLength = css.cssRules.length,
 3 |     factor = document.getElementById('factor');
 4 | 
 5 | factor.addEventListener('input', function(e){
 6 | 
 7 |     var val = e.target.value,
 8 |     rule = rulestr.replace(/\%s/g, val),
 9 |     txt = document.createTextNode(val),
10 |     output = document.querySelectorAll('#output span');
11 | 
12 | 
13 |     /* Update last rule */
14 |     if(css.cssRules.length > cssRulesInitLength ){
15 |         css.deleteRule(css.cssRules.length - 1);
16 |     }
17 |     css.insertRule(rule, css.cssRules.length);
18 | 
19 |     /*
20 |     Update degree value. Using an array because scale accepts
21 |     two arguments and we need to update both.
22 |     */
23 |     Array.prototype.map.call(output, function(op){
24 |         var t = txt.cloneNode();
25 |         if(op.firstChild){
26 |             op.replaceChild(t, op.firstChild);
27 |         } else {
28 |             op.appendChild(t);
29 |         }
30 |     });
31 | },true);
32 | 


--------------------------------------------------------------------------------
/js/chapter6/scale3d.js:
--------------------------------------------------------------------------------
 1 | var css = document.styleSheets[document.styleSheets.length-1],
 2 |     cssRulesInitLength = css.cssRules.length,
 3 |     output = document.querySelector('#output span');
 4 | 
 5 | 
 6 | document.forms[0].addEventListener('input', function(evt){
 7 |     var coord = [], txt;
 8 |     var direction = document.querySelectorAll('[type=range]');
 9 | 
10 |     rule = rulestr.replace(/\%x, \%y, \%z/g,  function(x){
11 |         coord[0] = direction[0].value;
12 |         coord[1] = direction[1].value;
13 |         coord[2] = direction[2].value;
14 | 
15 |         return coord.join(',');
16 |     });
17 | 
18 |     txt = document.createTextNode( coord.join(', ') )
19 | 
20 |     if( output.firstChild ) {
21 |         output.replaceChild(txt, output.firstChild);
22 |     }  else {
23 |         output.appendChild(txt);
24 |     }
25 | 
26 |     /* Update last rule */
27 |     if(css.cssRules.length > cssRulesInitLength ){
28 |         css.deleteRule(css.cssRules.length - 1);
29 |     }
30 |     css.insertRule(rule, css.cssRules.length);
31 | },true);
32 | 
33 | document.forms[0].addEventListener('reset', function(e){
34 |     var txt = document.createTextNode('1, 1, 1'), css = document.styleSheets[document.styleSheets.length-1];
35 |     if( output.firstChild ) {
36 |             output.replaceChild(txt, output.firstChild);
37 |     }  else {
38 |         output.appendChild(txt);
39 |     }
40 |     if(css.cssRules[css.cssRules.length-1].selectorText === '#scale') {
41 |         css.deleteRule(css.cssRules.length-1);
42 |     }
43 | },true)
44 | 


--------------------------------------------------------------------------------
/js/chapter6/scaleZ.js:
--------------------------------------------------------------------------------
 1 | var css = document.styleSheets[2],
 2 |     cssRulesInitLength = css.cssRules.length,
 3 |     output = document.querySelector('#output span');
 4 | 
 5 | document.forms[0].addEventListener('input', function (evt) {
 6 |     'use strict';
 7 |     var coord, txt, rule, direction = document.querySelectorAll('[type=range]');
 8 | 
 9 |     rule = rulestr.replace(/\%z/g, direction[0].value);
10 |     txt = document.createTextNode(direction[0].value);
11 |     
12 |     if (output.firstChild) {
13 |         output.replaceChild(txt, output.firstChild);
14 |     } else {
15 |         output.appendChild(txt);
16 |     }
17 | 
18 |     /* Update last rule */
19 |     if (css.cssRules.length > cssRulesInitLength) {
20 |         css.deleteRule(css.cssRules.length - 1);
21 |     }
22 |     css.insertRule(rule, css.cssRules.length);
23 | }, true);
24 | 
25 | document.forms[0].addEventListener('reset', function (e) {
26 |     'use strict';
27 |     var txt = document.createTextNode('0'), css = document.styleSheets[2];
28 |     if (output.firstChild) {
29 |         output.replaceChild(txt, output.firstChild);
30 |     } else {
31 |         output.appendChild(txt);
32 |     }
33 |     if (css.cssRules[css.cssRules.length - 1].selectorText === '#scalez .dice') {
34 |         css.deleteRule(css.cssRules.length - 1);
35 |     }
36 | }, true);
37 | 


--------------------------------------------------------------------------------
/js/chapter6/transform-style.js:
--------------------------------------------------------------------------------
 1 | var form = document.forms[0], 
 2 |     persp = document.querySelectorAll('[type=radio]'),
 3 |     output = document.querySelector('#output span'),
 4 |     pause = function(e) {
 5 |         document.querySelector('.dice').classList.toggle('paused');
 6 |     },
 7 |     
 8 |     updatePerspective = function(e){
 9 |         var cl = document.querySelector('.dice').classList,
10 |             len = cl.length,
11 |             i,
12 |             rule,
13 |             txt;
14 | 
15 |         cl.remove('flat');
16 |         cl.remove('preserve-3d');
17 |         cl.remove('paused');
18 | 
19 |         rule = rulestr.replace(/\%s/g,  e.target.value);
20 | 
21 |         txt = document.createTextNode(e.target.value);
22 | 
23 |         if( output.firstChild ) {
24 |             output.replaceChild(txt, output.firstChild);
25 |         }  else {
26 |             output.appendChild(txt);
27 |         } 
28 | 
29 |         document.querySelector('.dice').classList.add(e.target.value);
30 |     };
31 | 
32 | form.addEventListener('change', updatePerspective, true);    
33 |  
34 | form.addEventListener('reset', pause, true);
35 | 
36 | window.addEventListener('load', pause, false);


--------------------------------------------------------------------------------
/js/chapter6/translate.js:
--------------------------------------------------------------------------------
 1 | var css = document.styleSheets[document.styleSheets.length-1], 
 2 |     cssRulesInitLength = css.cssRules.length,
 3 |     direction = document.querySelectorAll('[type=range]'),
 4 |     output = document.querySelector('#output span');
 5 | 
 6 | 
 7 | 
 8 | Array.prototype.map.call(direction, function(d){
 9 |     d.addEventListener('input', function(){
10 |        var coord = [], txt;
11 | 
12 |         rule = rulestr.replace(/\%x, \%y/,  function(x){         
13 |             coord[0] = direction[0].value+'px';
14 |             coord[1] = direction[1].value+'px';
15 |             return coord.join(',');
16 |         });
17 |     
18 |         txt = document.createTextNode( coord.join(', ') )
19 |         
20 |         if( output.firstChild ) {
21 |             output.replaceChild(txt, output.firstChild);
22 |         }  else {
23 |             output.appendChild(txt);
24 |         }    
25 | 
26 |         /* Update last rule */
27 |         if(css.cssRules.length > cssRulesInitLength ){
28 |             css.deleteRule(css.cssRules.length - 1);
29 |         }
30 |         css.insertRule(rule, css.cssRules.length);  
31 |     }, true);
32 | })    
33 |  
34 | document.forms[0].addEventListener('reset', function(e){
35 |     var txt = document.createTextNode('0, 0'), css = document.styleSheets[document.styleSheets.length-1];
36 |     if( output.firstChild ) {
37 |             output.replaceChild(txt, output.firstChild);
38 |     }  else {
39 |         output.appendChild(txt);
40 |     }  
41 |     if(css.cssRules[css.cssRules.length-1].selectorText == '#translate') {
42 |         css.deleteRule(css.cssRules.length-1);
43 |     }
44 | }, true)


--------------------------------------------------------------------------------
/js/chapter6/translate3d.js:
--------------------------------------------------------------------------------
 1 | var css = document.styleSheets[document.styleSheets.length-1],
 2 |     cssRulesInitLength = css.cssRules.length,
 3 |     output = document.querySelector('#output span');
 4 | 
 5 | 
 6 | document.forms[0].addEventListener('input', function(evt){
 7 |     var coord = [], txt;
 8 |     var direction = document.querySelectorAll('[type=range]');
 9 | 
10 |     rule = rulestr.replace(/\%x, \%y, \%z/,  function(x){
11 |         coord[0] = direction[0].value+'px';
12 |         coord[1] = direction[1].value+'px';
13 |         coord[2] = direction[2].value+'px';
14 | 
15 |         return coord.join(',');
16 |     });
17 | 
18 |     txt = document.createTextNode( coord.join(', ') )
19 | 
20 |     if( output.firstChild ) {
21 |         output.replaceChild(txt, output.firstChild);
22 |     }  else {
23 |         output.appendChild(txt);
24 |     }
25 | 
26 |     /* Update last rule */
27 |     if(css.cssRules.length > cssRulesInitLength ){
28 |         css.deleteRule(css.cssRules.length - 1);
29 |     }
30 |     css.insertRule(rule, css.cssRules.length);
31 | }, true);
32 | 
33 | document.forms[0].addEventListener('reset', function(e){
34 |     var txt = document.createTextNode('0, 0, 0'), css = document.styleSheets[document.styleSheets.length-1];
35 |     if( output.firstChild ) {
36 |             output.replaceChild(txt, output.firstChild);
37 |     }  else {
38 |         output.appendChild(txt);
39 |     }
40 |     if(css.cssRules[css.cssRules.length-1].selectorText == '#translate') {
41 |         css.deleteRule(css.cssRules.length-1);
42 |     }
43 | }, true)
44 | 


--------------------------------------------------------------------------------
/js/chapter6/translateZ.js:
--------------------------------------------------------------------------------
 1 | var css = document.styleSheets[document.styleSheets.length-1],
 2 |     cssRulesInitLength = css.cssRules.length,
 3 |     output = document.querySelector('#output span');
 4 | 
 5 | 
 6 | document.forms[0].addEventListener('input', function(evt){
 7 |     var coord = [], txt;
 8 |     var direction = document.querySelectorAll('[type=range]');
 9 | 
10 |     rule = rulestr.replace(/\%z/,  function(x){
11 |         coord[0] = direction[0].value+'px';
12 | 
13 |         return coord.join(',');
14 |     });
15 | 
16 |     txt = document.createTextNode( coord.join(', ') )
17 | 
18 |     if( output.firstChild ) {
19 |         output.replaceChild(txt, output.firstChild);
20 |     }  else {
21 |         output.appendChild(txt);
22 |     }
23 | 
24 |     /* Update last rule */
25 |     if(css.cssRules.length > cssRulesInitLength ){
26 |         css.deleteRule(css.cssRules.length - 1);
27 |     }
28 |     css.insertRule(rule, css.cssRules.length);
29 | }, true);
30 | 
31 | document.forms[0].addEventListener('reset', function(e){
32 |     var txt = document.createTextNode('0'), css = document.styleSheets[document.styleSheets.length-1];
33 |     if( output.firstChild ) {
34 |             output.replaceChild(txt, output.firstChild);
35 |     }  else {
36 |         output.appendChild(txt);
37 |     }
38 |     if(css.cssRules[css.cssRules.length-1].selectorText == '#translate') {
39 |         css.deleteRule(css.cssRules.length-1);
40 |     }
41 | }, true);
42 | 


--------------------------------------------------------------------------------
/js/chapter8/svg.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/spbooks/csspro1/dd7e6c435936101b5325c67d740a2caf9f407e61/js/chapter8/svg.js


--------------------------------------------------------------------------------
/js/convertangles.min.js:
--------------------------------------------------------------------------------
1 | /* ConvertAngles.js Copyright (c) 2013. MIT Licensed. Tiffany B. Brown https://github.com/webinista/convertangles */ 
2 | var Angles=function(){};Angles.prototype.toRadians=function(a){var d,b=a.match(/deg|grad|rad|turn/)[0],c=a.match(/[.0-9]{1,}/)[0];switch(b){case"rad":d=c;break;case"deg":d=c*(Math.PI/180);break;case"grad":d=c*(Math.PI/200);break;case"turn":d=c*2*Math.PI}return d},Angles.prototype.toDegrees=function(a){var d,b=a.match(/deg|grad|rad|turn/)[0],c=a.match(/[.0-9]{1,}/)[0];switch(b){case"deg":d=c;break;case"grad":d=c/(400/360);break;case"rad":d=c*(180/Math.PI);break;case"turn":d=360*c}return d},Angles.prototype.toGradians=function(a){var d,b=a.match(/deg|grad|rad|turn/)[0],c=a.match(/[.0-9]{1,}/)[0];switch(b){case"deg":d=c*(10/9);break;case"grad":d=c;break;case"rad":d=c*(200/Math.PI);break;case"turn":d=400*c}return d},Angles.prototype.toTurns=function(a){var d,b=a.match(/deg|grad|rad|turn/)[0],c=a.match(/[.0-9]{1,}/)[0];switch(b){case"deg":d=c/360;break;case"grad":d=c/400;break;case"rad":d=c/(2*Math.PI);break;case"turn":d=c}return d};


--------------------------------------------------------------------------------
/js/escapereset.js:
--------------------------------------------------------------------------------
 1 | var keyHandler = function (e) {
 2 |     'use strict';
 3 |     if (e.keyCode === 27) {
 4 |         var reset = document.createEvent('Event');
 5 |         reset.initEvent('reset', true, false);
 6 |         document.forms[0].dispatchEvent(reset);
 7 |     }
 8 | };
 9 | window.addEventListener('keypress', keyHandler, true);
10 | window.addEventListener('keydown', keyHandler, true);


--------------------------------------------------------------------------------
/js/html5shiv.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
3 | */
4 | !function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.2",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b)}(this,document);


--------------------------------------------------------------------------------
/scss/base.scss:
--------------------------------------------------------------------------------
1 | @import "includes/config";
2 | @import "includes/mixins";
3 | @import "includes/normalize";
4 | @import "includes/resets";
5 | @import "includes/typography";
6 | @import "includes/layout";
7 | 


--------------------------------------------------------------------------------
/scss/chapter1/selectors-firstlast.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/config";
 2 | :first-child{
 3 |      background: #ddd;
 4 | }
 5 | li {
 6 |     &:first-child {
 7 |         color: $txthighlight2;
 8 |         font-weight: bold;
 9 |     }
10 |     &:last-child {
11 |         color: $txthighlight1;
12 |         font-style: italic;
13 |     }
14 | }
15 | 
16 | .apple {
17 |     color: $txthighlight2;
18 |     font-weight: bold;
19 | }
20 | .strawberry {
21 |     color: $txthighlight1;
22 |     font-style: italic;
23 | }
24 | 


--------------------------------------------------------------------------------
/scss/chapter1/selectors-not.scss:
--------------------------------------------------------------------------------
 1 | ::selection {
 2 |     background: #4caf50;
 3 | }
 4 | body{
 5 |     background-color: rgba(96,125,139,.25);
 6 | }
 7 | fieldset {
 8 |     border: 0;
 9 |     padding: 0;
10 | }
11 | fieldset + * {
12 |    margin: 1em 0;
13 | }
14 | legend {
15 |     color: #34444c;
16 |     font-size: 1.2em;
17 |     font-weight: bold;
18 | }
19 | input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]):not([type=image]) {
20 |   border: 1px solid rgba(96,125,139,.5);
21 |   border-radius: 3px;
22 |   padding: .25em;
23 |   width: 100%;
24 | }
25 | input:focus {
26 |     background: #f1f5c9;
27 | }
28 | input:focus,
29 | button:focus{
30 |     border:1px solid #4caf50;
31 |     box-shadow: 0 0 3px 2px #4caf50;
32 |     outline: none;
33 | }
34 | button {
35 |    border: 0;
36 |    border-radius: 3px;
37 |    background: #607d8b;
38 |    color: #fff;
39 |    font-weight: bold;
40 |    padding: .5em 1em;
41 | }
42 | button:hover {
43 |     background: #4caf50;
44 |     border-color: #4caf50;
45 | }
46 | label:not(.label-radio) {
47 |     display:block;
48 |     font-weight: bold;
49 | }
50 | 
51 | .label-radio {
52 |     margin-left: .25em;
53 |     margin-right: 1em;
54 | }
55 | 
56 | li {
57 |     margin-left: -40px;
58 |     list-style-type: none;
59 | }
60 | 


--------------------------------------------------------------------------------
/scss/chapter1/selectors-nth-child.scss:
--------------------------------------------------------------------------------
  1 | @import "includes/config";
  2 | @import "includes/mixins";
  3 | 
  4 | table {
  5 |     border: 1px solid rgba($border1, .5);
  6 |     margin: 1em auto;
  7 |     width: 80%;
  8 | 
  9 | }
 10 | thead {
 11 |     background: rgba($border1,.7);
 12 |     color: #fff;
 13 | }
 14 | th:first-child {
 15 |     text-align: left;
 16 | }
 17 | th:last-child {
 18 |     text-align: right;
 19 |     text-align: decimal;
 20 | }
 21 | th,td {
 22 |     padding: .2rem 1rem;
 23 | }
 24 | tbody tr{
 25 |     border-bottom: 1px solid rgba($border1, .2)
 26 | }
 27 | tr:nth-child(even){
 28 |    background: rgba($border1, .1);
 29 | }
 30 | td:first-child {
 31 |    width: 40%;
 32 | }
 33 | td:nth-child(2),
 34 | td:nth-child(3){
 35 |    text-align: center;
 36 |    width: 20%;
 37 | }
 38 | td:last-child {
 39 |     text-align: right;
 40 |     width: 20%;
 41 | }
 42 | 
 43 | .nth-wrap {
 44 |     clear:both;
 45 |     margin-bottom: 2em;
 46 | 
 47 |     &::after, &::before {
 48 |         content: ' ';
 49 |         display: block;
 50 |         clear: both;
 51 |     }
 52 | }
 53 | 
 54 | .nth-item {
 55 |     @include transition(250ms background-color);
 56 |     background: #673ab7;
 57 |     color: #fff;
 58 |     font-size: 20px;
 59 |     float: left;
 60 |     margin: 0 1em 1em 0;
 61 |     padding: 5px;
 62 |     text-align: center;
 63 |     width: 10vw;
 64 | }
 65 | 
 66 | p.nth-item {
 67 |     border-radius: 1000px;
 68 | }
 69 | 
 70 | .first-last {
 71 |     :first-of-type, :last-of-type {
 72 |         @extend .matched;
 73 |     }
 74 | }
 75 | 
 76 | .matched {
 77 |     background: #cddc39;
 78 |     color: #121212;
 79 |     font-weight:bold;
 80 | }
 81 | 
 82 | #nth-form {
 83 |     margin: 1em 0 2em;
 84 |     border-radius: 2px;
 85 |     background: rgba(#607d8b, .1);
 86 |     border: 1px solid rgba(#607d8b, .3);
 87 | 
 88 |     div {
 89 |         border-radius: 2px;
 90 |         text-align: center;
 91 |         margin: .5rem;
 92 | 
 93 |         &:first-child {
 94 |             background: rgba(#607d8b, .1);
 95 |             border: 1px solid rgba(#607d8b, .3);
 96 |             font-size: 2.5em;
 97 |         }
 98 |     }
 99 | 
100 |     input {
101 |         border: 1px solid #aaa;
102 |         border-radius: 2px;
103 |         padding: .7em 1em;
104 |     }
105 |     button{ margin-left: .5em;}
106 | }
107 | 
108 | li:only-child, .only-child {
109 |     color: #9c27b0;
110 |     font-size: 1.5em;
111 |     list-style-type: circle;
112 |     list-style-type: "\00A0\2660\00A0";
113 | }
114 | 


--------------------------------------------------------------------------------
/scss/chapter1/selectors-target.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/config";
 2 | @import "includes/mixins";
 3 | 
 4 | .tabbed-widget {
 5 |   position: relative;
 6 |   list-style-type: none;
 7 |   padding-left: 0;
 8 | }
 9 | 
10 | .tab-body {
11 |   padding: 0;
12 |   list-style: none;
13 |   margin: 0;
14 | }
15 | .tab-wrap {
16 |   @include display-flex;
17 |   text-align: center;
18 |   margin: 0;
19 | 
20 |   a {
21 |     background: #333;
22 |     border-radius: 5px 5px 0 0;
23 |     flex: 0 1 33%;
24 |     font-weight: bold;
25 |     text-decoration: none;
26 |     @include justify-content(space-around);
27 |     padding: .5em 0;
28 |     margin-right: 1%;
29 |     background: lighten(#9c27b0, 10%);
30 | 
31 |     &:nth-child(2) {
32 |       background: lighten(#00bcd4, 10%);
33 |     }
34 |     &:last-child {
35 |       background: #ffeb3b;
36 |     }
37 |   }
38 | }
39 | 
40 | [id^=tab] {
41 |     font-weight: normal;
42 |     margin-left: 0;
43 |     padding: 1em;
44 |     position: absolute;
45 |     background: lighten(#9c27b0, 10%);
46 | 
47 |     p {
48 |       margin:0 0 1em;
49 |     }
50 | 
51 |     &:first-child {
52 |        z-index: 1;
53 |     }
54 |     &:nth-child(2) {
55 |       background: lighten(#00bcd4, 10%);
56 |      }
57 |     &:last-child {
58 |       background: #ffeb3b;
59 |     }
60 | 
61 |     &:target {
62 |        z-index: 2;
63 |     }
64 | }
65 | 


--------------------------------------------------------------------------------
/scss/chapter4/box-sizing.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | [id=change-box-sizing] {
 4 |     margin: 1em 0;
 5 |     
 6 |     p {
 7 |         @include flex(0 1 50%);
 8 |         width: 50%;
 9 |         padding: .5em 0;
10 |     }
11 | }
12 | 
13 | .box-sizing-wrapper {
14 |     background: #9e9e9e;
15 |     margin: auto;
16 | 
17 |     article,
18 |     aside {
19 |         background: #FFEB3B;
20 |         box-sizing: content-box;
21 |         border: 10px solid #9C27B0;
22 |         float: left;
23 |         padding: 10px;
24 |     }
25 | 
26 |     &::after{
27 |         content: ' ';
28 |         display: table;
29 |         clear: both;
30 |     }
31 | 
32 |     p {
33 |         margin: auto;
34 |     }
35 | }
36 | 
37 | .primary {
38 |     width:60%;
39 | }
40 | .secondary {
41 |     width: 40%;
42 | }
43 | 
44 | [disabled]{
45 |     opacity: .5;
46 | }
47 | 


--------------------------------------------------------------------------------
/scss/chapter4/floats.scss:
--------------------------------------------------------------------------------
 1 | .fullheight{height: 100%}
 2 | 
 3 | img {
 4 |     box-shadow: 0 0 4px 4px #ccc;
 5 |     float: left;
 6 |     display: block;
 7 |     margin: 0 2rem 2rem 0;
 8 |     padding: 1rem;
 9 |     width: 30%;
10 | }
11 | 
12 | h1{margin-bottom: 1rem;}
13 | p{padding: 0; margin-top: 0}
14 | 
15 | .content{
16 |     position: relative;
17 |     height: inherit;
18 | 
19 |     &::after{
20 |         content: ' ';
21 |         display: block;
22 |     }
23 | }
24 | 
25 | .content > .col {
26 |     float: left;
27 |     border: 12px solid #fffffe;
28 |     text-align: justify;
29 |     width: 50%;
30 | }
31 | 
32 | .alpha {
33 |     background: #ffeb3b;
34 | }
35 | .beta {
36 |     background: #03a9f4;
37 | }
38 | .gamma {
39 |     background: #8bc34a;
40 | }
41 | .gamma.cf {
42 |     width: auto;
43 | }
44 | .cf {
45 |     clear: both;
46 | }
47 | 
48 | ._3col{
49 |     width: 33%;
50 |     height: 100%;
51 |     border-right: 12px solid #fffffe;
52 |     padding: 3px;
53 |     float: left;
54 |     overflow-y: scroll
55 | }
56 | 
57 | .multi-col {
58 |     margin: 1rem;
59 | }
60 | 
61 | [class|=multi-col] > .col {
62 |     border-right: 12px solid #fffffe;
63 |     display: table-cell;
64 |     padding: 3px;
65 |     vertical-align: top;
66 |     width: 33.3%;
67 | 
68 |     &:last-child {
69 |         border-right: 0;
70 |     }
71 | 
72 |     img{
73 |         float: none;
74 |         box-shadow: none;
75 |         padding: 0;
76 |         width: 100%;
77 |         margin: 0 0 1rem;
78 |     }
79 | }
80 | 
81 | .multi-col-b > .col {
82 |     &:first-child {
83 |         width: 50%;
84 |     }
85 | }
86 | 
87 | .gamma + div {
88 |      margin-top: 1rem;
89 | }
90 | 
91 | 


--------------------------------------------------------------------------------
/scss/chapter4/multi-col.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | img {
 4 |      display: block;
 5 |      width: 100%;
 6 | }
 7 | .content{
 8 |      margin: 2em 0;
 9 | }
10 | p{
11 |     margin-top: 0;
12 | }
13 | form {
14 |     border: 1px solid #607d8b;
15 |     background: rgba(#607d8b, .25);
16 |     padding: 1rem;
17 |     margin: 0 0 1rem;
18 |     
19 |     label {
20 |        display: block;
21 |     }
22 |     
23 |     input, select {
24 |         display: block;
25 |     }
26 | }
27 | 
28 | form > div {
29 |     @include display-flex;
30 |     @include flex-wrap(wrap);
31 | }
32 | 
33 | form > div > p {
34 |     @include flex(1 1 33.3%);
35 |     padding: 0 1em;
36 |     text-align: center
37 | }
38 | 
39 | input:not([type=checkbox]), select {
40 |   border: 1px solid #ccc;
41 |   padding: .5rem;
42 |   margin:  auto
43 | }
44 | 
45 | [type=number] {
46 |   width: 5rem;
47 | }
48 | 
49 | .serif {
50 |     font: normal 18px / 1.2 'Palatino','Cambria','Georgia',serif;
51 | }
52 | 
53 | .multi-col-span {
54 |     -webkit-columns: 2 10em;
55 |     -moz-columns: 2 10em;
56 |     columns: 2 10em;
57 |     margin: 3em 0;
58 |     padding: 0;
59 |     clear: both;
60 | 
61 |     p {
62 |         margin-top: 0;
63 |        //-webkit-column-break-inside: avoid;
64 |        // break-inside: avoid;
65 |     }
66 |     h1 {
67 |         -webkit-column-span: all;
68 |         -moz-column-span: all;
69 |         column-span: all;
70 |         padding-bottom: .5em;
71 |     }
72 | }
73 | 
74 | 
75 | 
76 | 


--------------------------------------------------------------------------------
/scss/chapter4/stacking.scss:
--------------------------------------------------------------------------------
  1 | @import "includes/mixins";
  2 | 
  3 | .wrapper{
  4 |      height: 500px;
  5 | }
  6 | 
  7 | .rel {
  8 |     position: relative;
  9 |     min-height: 300px;
 10 | }
 11 | 
 12 | div{
 13 |     min-width: 300px;
 14 |     padding: 10px;
 15 | }
 16 | form {
 17 |     margin: 2em 0;
 18 | }
 19 | [for="opacity"]{
 20 |     font-weight: bold;
 21 | }
 22 | 
 23 | [id=b], [id=c], [id=d], [id=e], [id=f], [id=g] {
 24 |     position: absolute;
 25 | }
 26 | 
 27 | [id=b], [id=c], [id=e] {
 28 |     height: 100px;
 29 |     line-height: 50px;
 30 |     width: 400px;
 31 | }
 32 | 
 33 | [id=a] {
 34 |     background: rgba(#e91e63,.5);
 35 |     height: 200px;
 36 |     text-align: right;
 37 |     width: 500px;
 38 | }
 39 | [id=b] {
 40 |     background: rgba(#673ab7, .8);
 41 |     bottom: 120px;
 42 |     width: 410px;
 43 |     z-index: 2;
 44 | 
 45 | }
 46 | [id=c] {
 47 |     background: rgba(#ffeb3b, .8);
 48 |     top: 190px;
 49 |     z-index: 1;
 50 | }
 51 | [id=d], [id=f], [id=g] {
 52 |     width: 300px;
 53 | }
 54 | 
 55 | [id=d] {
 56 |     background: rgba(#03a9f4, 1);
 57 |     height: 100%;
 58 |     top:10px;
 59 |     z-index: -1;
 60 | 
 61 |     p {
 62 |         position: absolute;
 63 |         bottom: 30px;
 64 |     }
 65 | }
 66 | [id=e] {
 67 |     background: rgba(#ff5722, .7);
 68 |     top: 110px;
 69 |     z-index: 1;
 70 | }
 71 | [id=f], [id=g] {
 72 |     height: 200px;
 73 |     line-height: 100px;
 74 |     width: 400px;
 75 | }
 76 | 
 77 | [id=f]{
 78 |     background: rgba(#ffc107, .9);
 79 | 
 80 |     p{
 81 |         background: rgba(#222, 1);
 82 |         color: whitesmoke;
 83 |         position: relative;
 84 |         padding-left: 1rem;
 85 |         z-index: 1;
 86 |     }
 87 | }
 88 | 
 89 | .opa {
 90 |     opacity: .999;
 91 | }
 92 | 
 93 | [id=g] {
 94 |     background: rgba(#03a9f4, .7);
 95 |     top: 50px;
 96 |     left: 100px;
 97 | 
 98 |     p{
 99 |         bottom: 0;
100 |         line-height: 1;
101 |         position: absolute;
102 |         right: 1rem;
103 |     }
104 | }
105 | 


--------------------------------------------------------------------------------
/scss/chapter5/anim-play-state.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | html, body{
 4 | 	height: 100%;
 5 | }
 6 | 
 7 | .square {
 8 | 	position: relative;
 9 | 
10 | }
11 | 
12 | .svgwrap {
13 | 	height: 300px;
14 | 	margin: 100px;
15 | 	width: 100%;
16 |     max-width: 300px;
17 |     
18 |     img {
19 |         width: 100%;
20 |         display: block;
21 |     }
22 | }
23 | 
24 | @-webkit-keyframes wobble{
25 | 	from {
26 | 		-webkit-transform: skewY(45deg);
27 | 	}
28 | 	50% {
29 | 		-webkit-transform: scale(.6);
30 | 	}
31 | 	to {
32 | 		-webkit-transform: skewY(-45deg);
33 | 	}
34 | }
35 | 
36 | @keyframes wobble{
37 | 	from {
38 | 		transform: skewY(15deg);
39 | 	}
40 | 	to {
41 | 		transform: skewY(-45deg);
42 | 	}
43 | }
44 | 
45 | .wobble {
46 | 	@include animation(wobble 3s ease-in infinite forwards alternate);
47 |     @include animation-play-state(paused);
48 |     
49 | }
50 | 
51 | .running {
52 | 	@include animation-play-state(running);
53 | }
54 | 
55 | .half {
56 | 	@include align-self(flex-start);
57 |     
58 | }
59 | 
60 | .finite {
61 | 	@include animation-iteration-count(5);
62 | }
63 | 


--------------------------------------------------------------------------------
/scss/chapter5/animpctkeyframes.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | html, body{
 4 | 	height: 100%;
 5 | }
 6 | 
 7 | @-webkit-keyframes wiggle {
 8 |     0% {
 9 |         -webkit-transform: skewY(5deg) rotate(5deg) scale(0.25);
10 |     }
11 |     25% {
12 |         -webkit-transform: skewX(-5deg) rotate(-5deg);
13 |     }
14 |     50% {
15 |         -webkit-transform: skewY(5deg) rotate(5deg) scale(1.5);
16 |     }
17 |     75% {
18 |         -webkit-transform: skewX(-5deg) rotate(-5deg);
19 |     }
20 |     100% {
21 |         -webkit-transform: scale(1.5);
22 |     }
23 | }
24 | 
25 | @keyframes wiggle {
26 | 	0% {
27 | 		transform: skewY(5deg) rotate(5deg) scale(.25);	
28 | 	}
29 | 
30 | 	25% {
31 | 		transform: skewX(-5deg) rotate(-5deg);
32 | 	}
33 | 
34 | 	50% {
35 | 		transform: skewY(5deg) rotate(5deg) scale(1.5);
36 | 	}
37 | 
38 | 	75% {
39 | 		transform: skewX(-5deg) rotate(-5deg);
40 | 	}
41 | 
42 | 	100% {
43 | 		transform: scale(1.5);
44 | 	}
45 | } 
46 | 
47 | .content {
48 | 	position: relative;
49 | 
50 | }
51 | .svgwrap {
52 | 	height: 200px;
53 | 	margin: 100px;
54 | 	width: 200px;
55 | 	transform: scale(.25);
56 | }
57 | 
58 | .wiggle {
59 | 	@include animation-duration(1s);
60 | 	@include animation-name(wiggle);
61 | }
62 | 
63 | .delay1s {
64 | 	@include animation-delay(500ms);
65 | }
66 | 
67 | .none {
68 | 	@include animation-fill-mode(none);
69 | }
70 | 
71 | .backwards {
72 | 	@include animation-fill-mode(backwards);
73 | }
74 | 
75 | .forwards {
76 | 	@include animation-fill-mode(forwards);
77 | }
78 | 
79 | .both {
80 | 	@include animation-fill-mode(both);
81 | }


--------------------------------------------------------------------------------
/scss/chapter5/animsimple.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | @-webkit-keyframes pulse {
 4 | 	from {
 5 | 		@include transform(scale(.5));
 6 | 		opacity: .8;
 7 | 	}
 8 | 
 9 | 	to {
10 | 		@include transform(scale(1));
11 | 		opacity: 1;
12 | 	}
13 | } 
14 | 
15 | @keyframes pulse {
16 | 	from {
17 | 		@include transform(scale(.5));
18 | 		opacity: .8;
19 | 	}
20 | 
21 | 	to {
22 | 		@include transform(scale(1));
23 | 		opacity: 1;
24 | 	}
25 | } 
26 | 
27 | .svgwrap {
28 | 	padding: 1em;
29 | }
30 | 
31 | .pulse svg {
32 | 	@include animation(pulse 500ms infinite);
33 | }
34 | 
35 | .rev svg {
36 | 	@include animation-direction(reverse);
37 | }
38 | 
39 | .alt svg {
40 | 	@include animation-direction(alternate);
41 | }
42 | 
43 | .alt-rev svg {
44 | 	@include animation-direction(alternate-reverse);
45 | }
46 | 
47 | .flex {
48 | 	section {
49 | 		width: 25%; 
50 | 		text-align:center;
51 | 	}
52 | 
53 | 	svg {
54 | 		display:block;
55 | 		margin: auto;
56 | 	}
57 | }
58 | 
59 | button > * {pointer-events:none;}


--------------------------------------------------------------------------------
/scss/chapter5/multi-trans.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | section {
 4 | 	background: #FBDAE5;
 5 | 	border: 1px solid #E91E63;
 6 | 	border-radius: 3px;
 7 | 	height: auto;
 8 | 	margin: 1em 0;
 9 | 	padding: 2em;
10 | 	position: relative;
11 | 
12 |   &:before, &:after {
13 | 	   display: block;
14 | 	   clear: both;
15 |   }
16 | }
17 | 
18 | h3 {
19 |   margin: -10px 0 0 0;
20 |   font-size: 18px;
21 | }
22 | 
23 | div {
24 |   @include transform(translateX(0%)); 
25 |   background: #E91E63;
26 |   height: 5em;
27 |   height: 10vw;
28 |   margin: 3em 0 10px;
29 |   position: relative;
30 |   transition: -webkit-transform 4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 2s 500ms;
31 |   transition: transform 4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 2s 500ms;
32 |   width: 5em;
33 |   width: 10vw;
34 |   max-height: 200px;
35 |   max-width: 200px;
36 | 
37 | }
38 | 
39 | .transthem {
40 |   @include transform(translateX(500px)); 
41 |   background: #00BCD4;
42 | }
43 | 
44 | 


--------------------------------------------------------------------------------
/scss/chapter5/negative-delay.scss:
--------------------------------------------------------------------------------
 1 | section {
 2 | 	background: #ececff;
 3 | 	border: 1px solid #96f;
 4 | 	border-radius: 3px;
 5 | 	height: auto;
 6 | 	margin: 1em 0;
 7 | 	padding: 2em;
 8 | 	position: relative;
 9 | 
10 |   &:before, &:after {
11 | 	   display: block;
12 | 	   clear: both;
13 |   }
14 | 
15 |   h3 {
16 |   	margin: -10px 0 0 0;
17 |     font-size: 18px;
18 |   }
19 | 
20 |   div {
21 |   	background: #96f;
22 |   	height: 5em;
23 |     height: 10vw;
24 |   	margin: 10px 0;
25 |   	position: relative;
26 |   	left: 0;
27 |   	top: 0;
28 |   	transition: 2s ease-in;
29 |   	width: 5em;
30 |     width: 10vw;
31 |     max-height: 200px;
32 |     max-width: 200px;
33 |   }
34 | }
35 | 
36 | .moved {
37 |   left: 90%;
38 | }
39 | 
40 | .delay1s {
41 |   transition-delay: -1s;
42 | }
43 | 


--------------------------------------------------------------------------------
/scss/chapter5/simple-withjs.scss:
--------------------------------------------------------------------------------
 1 | @import "../includes/config";
 2 | @import "../includes/mixins";
 3 | 
 4 | body {
 5 | 	background: #fcf;
 6 | 	transition: 5s;
 7 | }
 8 | 
 9 | .change {
10 | 	background: #0cf;
11 | }
12 | 
13 | 
14 | 
15 | 
16 | .larger {
17 | 	font-size: $basefont * 2;
18 | 
19 | 	a {
20 | 		transition: 500ms;
21 | 
22 | 		&:hover {
23 | 			color: #f0c;
24 | 		}	
25 | 	}
26 | }
27 | 
28 | 


--------------------------------------------------------------------------------
/scss/chapter5/simple.scss:
--------------------------------------------------------------------------------
 1 | @import "../includes/config";
 2 | @import "../includes/mixins";
 3 | 
 4 | 
 5 | .larger {
 6 | 	font-size: $basefont * 2;
 7 | 
 8 | 	a {
 9 | 		transition: 500ms;
10 | 
11 | 		&:hover {
12 | 			color: #f0c;
13 | 		}	
14 | 	}
15 | 
16 | }
17 | 
18 | 


--------------------------------------------------------------------------------
/scss/chapter5/steps.scss:
--------------------------------------------------------------------------------
 1 | @import "../includes/config";
 2 | @import "../includes/mixins";
 3 | 
 4 | body {
 5 | 	background: #fcf;
 6 | 	transition: 5s steps(5);
 7 | }
 8 | 
 9 | .change {
10 | 	background: #0cf;
11 | }
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/scss/chapter5/timing-functions.scss:
--------------------------------------------------------------------------------
 1 | .ttf {
 2 | 	background: #E8FAF6;
 3 | 	border: 1px solid #0c9;
 4 | 	border-radius: 3px;
 5 | 	height: auto;
 6 | 	margin: 1em 0;
 7 | 	padding: 2em;
 8 | 	position: relative;
 9 | 
10 |   &:before, &:after {
11 | 	 display: block;
12 | 	 clear: both;
13 |   }
14 | 
15 |   h3 {
16 |   	margin: -10px 0 0 0;
17 |     font-size: 18px;
18 |   }
19 | 
20 |   div {
21 |   	background: #00CC99;
22 |   	height: 5em;
23 |     height: 5vw;
24 |   	margin: 10px 0;
25 |   	position: relative;
26 |   	left: 0;
27 |   	top: 0;
28 |   	transition-duration: 2s;
29 |   	width: 5em;
30 |     width: 5vw;
31 |     max-height: 75px;
32 |     max-width: 75px;
33 |   }
34 | 
35 |   .moved {
36 |   	left: 70%;
37 |   }
38 | 
39 |   .linear {
40 |   	transition-timing-function: linear;
41 |   }
42 | 
43 |   .easein {
44 |   	transition-timing-function: ease-in;
45 |   }
46 | 
47 |   .easeout {
48 |   	transition-timing-function: ease-out;
49 |   }
50 | 
51 |   .easeinout {
52 |   	transition-timing-function: ease-in-out;
53 |   }
54 | 
55 |   .stepstart {
56 |   	transition-timing-function: step-start;
57 |   }
58 | 
59 |   .stepend{
60 |   	transition-timing-function: step-end;
61 |   }
62 | 
63 |   .step5start{
64 |   	transition-timing-function: steps(5,start);
65 |   }
66 | 
67 |   .step5end{
68 |   	transition-timing-function: steps(5,end);
69 |   }
70 | 
71 |   button {
72 |   	position: absolute;
73 |   	right: 5vw;
74 |   	bottom: 30%;
75 |   }
76 | }
77 | 
78 | 


--------------------------------------------------------------------------------
/scss/chapter5/trans-end.scss:
--------------------------------------------------------------------------------
 1 | [type=radio], label{
 2 |   cursor: pointer;
 3 | }
 4 | 
 5 | label {
 6 |   display: inline-block;
 7 |   padding-left: 1em;
 8 | }
 9 | 
10 | /* For IE <= 10's sake */
11 | [hidden] {
12 |   display: none;
13 | }
14 | 
15 | 
16 | #thanks {
17 |   font-size: 24px;
18 |   padding: 1em 0;
19 | }
20 | 
21 | /*-- Affected elements --*/
22 | 
23 | li {
24 |   font-size: 18pt;
25 |   font-weight:bold;
26 |   list-style-type: none;
27 |   margin: .25em 0 .25em -40px;
28 |   padding: 1em;
29 |  
30 |   &:nth-child(odd) {
31 |     color: white;
32 |   }
33 | 
34 |   &:first-child {
35 |     background: red;
36 |   }
37 |   &:nth-child(even) {
38 |     background: yellow;
39 |   }
40 |   &:last-child {
41 |     background: blue;
42 |   }
43 | 
44 |   /* Set up the transition */
45 |   transition: 500ms;
46 | 
47 | }
48 | 
49 | .fade {
50 |   opacity: 0;
51 | }
52 | 


--------------------------------------------------------------------------------
/scss/chapter6/backface-vis.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | @import "rotate.scss";
 3 | 
 4 | 
 5 | h3 {
 6 | 	font-size: 1.1em;	
 7 | }
 8 | 
 9 | #perspective {
10 | 	@include perspective(500px);
11 | 	margin-top: 4em;
12 | }
13 | 
14 | .flex > *,
15 | .flexl > * {
16 | 	margin-right: 2em;
17 | }
18 | 
19 | @import "includes/dice.scss";


--------------------------------------------------------------------------------
/scss/chapter6/carousel.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | @import "rotate.scss";
 3 | 
 4 | $unit: px;
 5 | $cunit: deg;
 6 | 
 7 | $rotateby: 360/6;
 8 | $perpwidth: 200px;
 9 | $tangent: 0.5235987755982988; // tangent of $rotateby.
10 | 
11 | /* 
12 | See formulas described here: 
13 | http://desandro.github.io/3dtransforms/docs/carousel.html
14 | */
15 | 
16 | $translate: ($perpwidth / 2) / $tangent;
17 | 
18 | .carousel {
19 | 	@include perspective-origin(50% -300px);
20 | 	position: relative;
21 | 	margin: 0 auto;
22 | }
23 | 
24 | .wrapper {
25 | 	position: relative;
26 | 	width: 500px;
27 | 	margin: auto;
28 | }
29 | 
30 | .p3d {
31 | 	transform-style: preserve-3d;
32 | }
33 | 
34 | .bvv {
35 | 	@include backface-visibility(visible);
36 | }
37 | 
38 | .p2000 {
39 | 	@include perspective(2000px);
40 | }
41 | 
42 | .perp {
43 | 	color: #212121;
44 | 	font: 200 15vw / 1.2 sans-serif;
45 | 	position: absolute;
46 | 	pointer-events: none;
47 | 	width: $perpwidth;
48 | 	height: $perpwidth;
49 | 	text-align: center;
50 | 	top: -50px;
51 | 	left: 0;
52 | 
53 | 	&:first-child {
54 | 		@include transform( rotateY($rotateby#{$cunit}) translateZ($translate) );
55 | 		background: rgba(#3f51b5, .8)
56 | 	}
57 | 
58 | 	&:nth-child(2) {
59 | 		@include transform( rotateY($rotateby*6#{$cunit}) translateZ($translate) );
60 | 		background: rgba(#00bcd4, .8)
61 | 	}
62 | 
63 | 	&:nth-child(3){
64 | 		@include transform(rotateY($rotateby*5#{$cunit}) translateZ($translate) );
65 | 		background: rgba(#ffeb3b, .8)
66 | 	}
67 | 
68 | 	&:nth-child(4){
69 | 		@include transform(rotateY($rotateby*4#{$cunit}) translateZ($translate) );
70 | 		background: rgba(#f44336, .8)
71 | 	}
72 | 	&:nth-child(5){
73 | 		@include transform(rotateY($rotateby*3#{$cunit}) translateZ($translate) );
74 | 		background: rgba(#e91e63, .8)
75 | 	}
76 | 	&:nth-child(6){
77 | 		@include transform(rotateY($rotateby*2#{$cunit}) translateZ($translate) );
78 | 		background: rgba(#8bc34a, .8);
79 | 	}
80 | }
81 | 
82 | [type=reset] {
83 | 	margin: 0 2em;
84 | }
85 | 
86 | .flex p {
87 | 	width: 20%;
88 | }


--------------------------------------------------------------------------------
/scss/chapter6/dice.scss:
--------------------------------------------------------------------------------
  1 | @import "includes/mixins";
  2 | 
  3 | .dice {
  4 | 	@include transform-style(preserve-3d); 
  5 | 	height: 200px;
  6 | 	position: relative;
  7 | 	margin: auto;
  8 | 	width: 200px;
  9 | 	pointer-events: none;
 10 | 
 11 | 	div {
 12 | 		background: rgba(#d00, .4);
 13 | 		border: 1px solid #ccc;
 14 | 		border-radius:4px;
 15 | 		position: absolute;
 16 | 		width: 100%;
 17 | 		height: 100%;
 18 | 
 19 | 		&:first-child {
 20 | 			@include transform(rotate(0deg) translateZ(-100px));
 21 | 		}
 22 | 
 23 | 		&:nth-child(2) {
 24 | 			@include transform(rotateX(-90deg) translateZ(100px));
 25 | 		}
 26 | 
 27 | 		&:nth-child(3) {
 28 | 			@include transform(rotateY(-90deg) translateZ(100px));
 29 | 		}
 30 | 		&:nth-child(4) {
 31 | 			@include transform(rotateY(90deg) translateZ(100px));
 32 | 		}
 33 | 		&:nth-child(5) {
 34 | 			@include transform(rotateX(90deg) translateZ(100px));
 35 | 		}
 36 | 		&:last-child {
 37 | 			@include transform(rotate(180deg) translateZ(100px));
 38 | 		}
 39 | 	}
 40 | 
 41 | 	circle {
 42 | 		fill: rgba(#fff, .8);
 43 | 	}
 44 | }
 45 | 
 46 | .multi {
 47 | 	div {
 48 | 		&:first-child {
 49 | 			background: rgba(#673ab7, .8);
 50 | 		}
 51 | 
 52 | 		&:nth-child(2) {
 53 | 			background: rgba(#009688, .8);
 54 | 		}
 55 | 
 56 | 		&:nth-child(3) {
 57 | 			background: rgba(#ffc107, .8);
 58 | 		}
 59 | 		&:nth-child(4) {
 60 | 			background: rgba(#e91e63, .8);
 61 | 		}
 62 | 		&:nth-child(5) {
 63 | 			background: rgba(#009688, .8);
 64 | 		}
 65 | 		&:last-child {
 66 | 			background: rgba(#8bc34a, .8);
 67 | 		}
 68 | 	}
 69 | }
 70 | 
 71 | .backface .side,
 72 | .bvh {
 73 | 	@include backface-visibility(hidden);
 74 | }
 75 | 
 76 | .card {
 77 | 	transition: -webkit-transform 1s linear;
 78 | 	@include transition(transform 1s linear);
 79 | 	@include transform-style(preserve-3d);
 80 | 	border: 1px solid #ccc;
 81 | 	border-radius: 8px;
 82 | 	box-sizing: content-box;
 83 | 	height: 300px;
 84 | 	position: relative;
 85 | 	width: 240px;
 86 | }
 87 | 
 88 | .side {
 89 | 	height: inherit;
 90 | 	left: 0;
 91 | 	position: absolute;
 92 | 	top: 0;
 93 | 	width: inherit;
 94 | }
 95 | 
 96 | .front {
 97 | 	@include transform(rotateY(180deg));
 98 | }
 99 | 
100 | .back {
101 | 	background: rgba(#ccc, .8) url(../images/dicediamond.svg) center;
102 | 	background-size: 7px auto;
103 | 	border: 10px solid #fff;
104 | 	border-radius: 8px;
105 | }
106 | 
107 | .flipped {
108 | 	@include transform(rotateY(180deg));
109 | }
110 | 
111 | .suit {
112 | 	position: absolute;
113 | 	top: auto;
114 | 	bottom: auto;
115 | 	width: 100%;
116 | 	padding: 0;
117 | 	margin: auto;
118 | 	height: 300px;
119 | 	line-height: 1;
120 | 	text-align: center;
121 | 	font-size: 300px;
122 | }
123 | 
124 | .dn{
125 | 	display: none;
126 | }
127 | 


--------------------------------------------------------------------------------
/scss/chapter6/persp-origin.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | h3 {
 4 | 	font-size: 1.1em;	
 5 | }
 6 | 
 7 | #perspective {
 8 | 	@include perspective(500px);
 9 | 	margin-top: 4em;
10 | }
11 | 
12 | .flex > *,
13 | .flexl > * {
14 | 	margin-right: 2em;
15 | }
16 | 
17 | .flex > * {
18 | 	align-self: flex-end;
19 | }
20 | 
21 | @import "includes/dice.scss";
22 | 
23 | [for=xpos],
24 | [for=ypos] {
25 | 	display:block;
26 | 	margin-bottom: .25em;
27 | }
28 | 
29 | [type=number] {
30 | 	font: inherit;
31 | }


--------------------------------------------------------------------------------
/scss/chapter6/perspective-func.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | form{
 4 | 	position: relative;
 5 | 	z-index:3;
 6 | }
 7 | 
 8 | [type=range]{
 9 | 	margin-right: 1em;
10 | 	width: 90%;
11 | }
12 | .perpfunc {
13 | 	background: rgba(#673ab7, 1);
14 | 	width: 300px;
15 | 	height: 300px;
16 | 	margin: auto;
17 | }
18 | 
19 | 


--------------------------------------------------------------------------------
/scss/chapter6/rotate.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | @import "dice";
 3 | 
 4 | #rotate {
 5 | 	font-size: 1em;
 6 | 	font-size: 1.2vw;
 7 | 	height: 15em;
 8 | 	height: 15vw;
 9 | 	margin: 4em auto;
10 | 	padding: 1em;
11 | 	padding: 1vw;
12 | 	width: 15em;
13 | 	width: 15vw;
14 | 	pointer-events: none;
15 | 	@include transform-style(preserve-3d);
16 | }
17 | #output {
18 | 	font-size: 2rem;
19 | 	margin-top: 2rem;
20 | }
21 | 
22 | [type=range] {
23 | 	display:inline-block;
24 | 	width: 100%;
25 | }
26 | 
27 | .dimen {
28 | 	perspective: 200px;
29 | }
30 | 
31 | .mono{
32 | 	font-family: monospace;
33 | }
34 | 
35 | .unit {font-weight: normal}
36 | 
37 | .animate {
38 | 	@include transition(2s); 
39 | }
40 | .r540{
41 | 	@include transform(rotate(540deg));
42 | }


--------------------------------------------------------------------------------
/scss/chapter6/scale.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | @import "rotate.scss";
 3 | 
 4 | 
 5 | #scale {
 6 | 	@extend #rotate;
 7 | }
 8 | 
 9 | .flex{
10 | 	[type=range] {
11 | 		margin: 1em;
12 | 		width: 80%;
13 | 	}
14 | }
15 | 
16 | [type=range] {
17 | 	position:relative;
18 | 	z-index: 2;
19 | }
20 | 
21 | #scale3d b {
22 | 	padding:0 1em;
23 | }
24 | 
25 | #scalez {
26 | 	pointer-events: none;
27 | }
28 | #scalez .dice{
29 | 	@include transform-style(preserve-3d);
30 | 	@include backface-visibility(visible);
31 | }


--------------------------------------------------------------------------------
/scss/chapter6/skew.scss:
--------------------------------------------------------------------------------
1 | @import "includes/mixins";
2 | @import "rotate.scss";
3 | 
4 | #skew {
5 | 	@extend #rotate;
6 | 	background: #c09;
7 | 	border: 2px solid #000;
8 | }


--------------------------------------------------------------------------------
/scss/chapter6/stacking.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | #transform {
 4 | 	display: block;
 5 | 	float: left;
 6 | 	height: auto;
 7 | 	margin: 0em 1.5em 10em 0em;
 8 | 	width: 25vw;
 9 | 	max-width: 350px;
10 | }
11 | 
12 | .transformed {
13 | 	@include transform(translateX(50%));
14 | }
15 | 
16 | ol {
17 | 	margin-left: 2em;
18 | }
19 | 
20 | li {
21 | 	margin-left: 25vw; 
22 | }


--------------------------------------------------------------------------------
/scss/chapter6/transform-origin.scss:
--------------------------------------------------------------------------------
  1 | @import "includes/mixins";
  2 | 
  3 | .wrap {
  4 |   margin-top: 3em;
  5 | }
  6 | 
  7 | form {
  8 |   margin: auto auto 5em;
  9 |   padding: 1em;
 10 |   background: #eee;
 11 |   position: relative;
 12 |   z-index: 10;
 13 | 
 14 |   p {
 15 |     margin: 0 2em;
 16 |   }
 17 | 
 18 | }
 19 | 
 20 | legend, fieldset {
 21 |   border: 0;
 22 |   font-weight: bold;
 23 |   padding:0 
 24 | }
 25 | 
 26 | label {
 27 |   cursor: pointer;
 28 |   font-family: monospace;
 29 |   font-weight: bold;
 30 |   padding-left: .5rem;
 31 | }
 32 | 
 33 | .to {
 34 |   height: auto;
 35 |   padding: 2em 0;
 36 |   position: relative;
 37 | 
 38 |   &:before, &:after {
 39 |    display: block;
 40 |    clear: both;
 41 |   }
 42 | 
 43 |   h3 {
 44 |     margin: -10px 0 0 0;
 45 |     font-size: 18px;
 46 |   }
 47 | 
 48 |   button {
 49 |     position: absolute;
 50 |     right: 5vw;
 51 |     bottom: 30%;
 52 |   }
 53 | 
 54 |   div {
 55 |     background: #00CC99;
 56 |     height: 10em;
 57 |     height: 10vw;
 58 |     position: relative;
 59 |     left: 0;
 60 |     top: 0;
 61 |     width: 10em;
 62 |     width: 10vw;
 63 |     transform-box: border-box;
 64 |   }
 65 | 
 66 |   b {
 67 |     display: block;
 68 |     line-height: 10vw;
 69 |     margin: auto;
 70 |     text-align:center;
 71 |   }
 72 | }
 73 | 
 74 | @media screen and (max-width: 1038px){
 75 |   .to div {
 76 |     font-size: 12px;
 77 |   }
 78 | }
 79 | 
 80 | .animate {
 81 |     @include transition(500ms);
 82 | }
 83 | 
 84 | .rotate {
 85 |     @include transform(rotate(45deg));
 86 | 
 87 |     b {
 88 |       @include transform(rotate(-45deg));
 89 |     }
 90 | }
 91 | 
 92 | .skewX {
 93 |     @include transform(skewX(45deg));
 94 | 
 95 |     b {
 96 |       @include transform(skewX(45deg));
 97 |     }
 98 | }
 99 | 
100 | .scale {
101 |     @include transform(scale(1.5));
102 | 
103 |     b {
104 |       @include transform(scale(1));
105 |     }
106 | }
107 | 
108 | .to000 div{
109 |   transform-origin: 0 0;
110 | }
111 | 
112 | .to100100 div{
113 |   transform-origin: 100% 100%;
114 | }
115 | 
116 | .toneg1vw1vw div{
117 |   transform-origin: -1vw -1vw;
118 | }
119 | 
120 | .to150150 div{
121 |   transform-origin: 150% 150%;
122 | }
123 | 
124 | .to050 div{
125 |   transform-origin: 0% 50%;
126 | }
127 | 
128 | .flex b:last-child{
129 |   padding: 0;
130 | }
131 | 


--------------------------------------------------------------------------------
/scss/chapter6/transform-style.scss:
--------------------------------------------------------------------------------
  1 | @import "includes/mixins";
  2 | @import "rotate.scss";
  3 | 
  4 | $unit: px;
  5 | $cunit: deg;
  6 | 
  7 | $rotateby: 360/6;
  8 | $perpwidth: 200px;
  9 | $tangent: 0.5235987755982988; // tangent of $rotateby.
 10 | 
 11 | /* 
 12 | See formulas described here: 
 13 | http://desandro.github.io/3dtransforms/docs/carousel.html
 14 | */
 15 | 
 16 | $translate: round( ($perpwidth / 2) / $tangent );
 17 | 
 18 | .carousel {
 19 | 	perspective-origin: 50% -300px;
 20 | 	position: relative;
 21 | 	margin: 0 auto;
 22 | }
 23 | 
 24 | .wrapper {
 25 | 	position: relative;
 26 | 	width: 500px;
 27 | 	margin: auto;
 28 | }
 29 | 
 30 | .p3d {
 31 | 	transform-style: preserve-3d;
 32 | }
 33 | 
 34 | .bvv {
 35 | 	@include backface-visibility(visible);
 36 | }
 37 | 
 38 | .p500 {
 39 | 	perspective: 500px;
 40 | }
 41 | 
 42 | .p2000 {
 43 | 	perspective: 2000px;
 44 | }
 45 | 
 46 | .dn {
 47 | 	display:none;
 48 | }
 49 | 
 50 | .flat {
 51 |      transform-style: flat !important   
 52 | }
 53 | 
 54 | .paused {
 55 |     @include animation-play-state(paused !important);    
 56 | }
 57 | 
 58 | .perp {
 59 | 	color: #212121;
 60 | 	font: 200 15vw / 1.2 sans-serif;
 61 | 	position: absolute;
 62 | 	pointer-events: none;
 63 | 	width: $perpwidth;
 64 | 	height: $perpwidth;
 65 | 	text-align: center;
 66 | 	top: -50px;
 67 | 	left: 0;
 68 | 
 69 | 	&:first-child {
 70 | 		@include transform( rotateY($rotateby#{$cunit}) translateZ($translate) );
 71 | 		background: rgba(#3f51b5, 1);
 72 | 	}
 73 | 
 74 | 	&:nth-child(2) {
 75 | 		@include transform( rotateY($rotateby*6#{$cunit}) translateZ($translate) );
 76 | 		background: rgba(#00bcd4, 1);
 77 | 	}
 78 | 
 79 | 	&:nth-child(3){
 80 | 		@include transform(rotateY($rotateby*5#{$cunit}) translateZ($translate) );
 81 | 		background: rgba(#ffeb3b, 1)
 82 | 	}
 83 | 
 84 | 	&:nth-child(4){
 85 | 		@include transform(rotateY($rotateby*4#{$cunit}) translateZ($translate) );
 86 | 		background: rgba(#f44336, 1)
 87 | 	}
 88 | 	&:nth-child(5){
 89 | 		@include transform(rotateY($rotateby*3#{$cunit}) translateZ($translate) );
 90 | 		background: rgba(#e91e63, 1)
 91 | 	}
 92 | 	&:nth-child(6){
 93 | 		@include transform(rotateY($rotateby*2#{$cunit}) translateZ($translate) );
 94 | 		background: rgba(#8bc34a, 1);
 95 | 	}
 96 | }
 97 | 
 98 | [type=reset] {
 99 | 	margin: 0 2em;
100 | }
101 | 
102 | .flex p {
103 | 	width: 20%;
104 | }
105 | 
106 | @keyframes rotatey {
107 | 	from {
108 | 		@include transform( rotate3d(1,1,0,.01deg) );
109 |        
110 | 	}
111 | 
112 | 	to {
113 | 		@include transform( rotate3d(1,1,0, 360deg) );
114 | 	}		
115 | }
116 | 
117 | .rotatey {
118 | 	@include animation(rotatey 3s infinite);
119 |     transform-origin: 50% 50%;
120 |     padding-top: 5em;
121 | }


--------------------------------------------------------------------------------
/scss/chapter6/transform.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | #transform {
 4 | 	@include transition(250ms);
 5 | 	transform-origin: 0 0;
 6 | 	background: #e91e63;
 7 | 	height: 20vw;
 8 | 	width: 50vw;
 9 | 	margin: auto;
10 | 	padding: 5px;
11 | 
12 | 	p {
13 | 		position: absolute;
14 | 		background: #8bc34a;
15 | 		height: 15vw;
16 | 		width: 15vw;
17 | 		left: 0;
18 | 		margin: 0;
19 | 		padding: 5px;
20 | 	}
21 | }
22 | 
23 | .transformed {
24 | 	@include transform(skew(-10deg));
25 | }


--------------------------------------------------------------------------------
/scss/chapter6/translate.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | @import "rotate.scss";
 3 | 
 4 | 
 5 | #translate {
 6 | 	@extend #rotate;
 7 | 	pointer-events: none;	
 8 | }
 9 | 
10 | b {
11 | 	display: inline-block;
12 | 	padding: 0 1em;
13 | }
14 | 
15 | [for=xdim], 
16 | [for=ydim],
17 | [for=zdim] {
18 | 	display:block;
19 | 	clear: both;
20 | 	width: 10%;
21 | }
22 | 
23 | [id=xdim],
24 | [id=ydim],
25 | [id=zdim] {
26 | 	width: 70%;
27 | }


--------------------------------------------------------------------------------
/scss/chapter7/mq.scss:
--------------------------------------------------------------------------------
 1 | [id=demo] {
 2 | 	display: block;
 3 | 	border-width: 1px 0;
 4 | 	border-style: solid;
 5 | 	padding: .5em;
 6 | 
 7 | 	ul {
 8 |         list-style: none;
 9 | 		margin: 0;
10 | 	}
11 | 
12 | 	li {
13 |         display: block;
14 |         margin-left: -40px;
15 |     }
16 | }
17 | 
18 | 
19 | pre {
20 |     background: #f7f7f7;
21 |     border: 1px solid #ccc;
22 |     border-radius: 3px;
23 |     margin: auto;
24 |     overflow-x: scroll;
25 |     padding: 1em;
26 | }
27 | 
28 | 
29 | 
30 | @media (max-width: 59.9em) {
31 |     [id=demo] {
32 |         background: #DCE3FF;
33 |         border-color: #94aaff;
34 | 
35 |     }
36 | }
37 | 
38 | @media (max-width: 29.9em) {
39 |     [id=demo] {
40 |         background: #fcf;
41 |         border-color: #f361ff;
42 | 
43 |     }
44 | }
45 | 
46 | 
47 | @media (min-width: 60em) {
48 | 	[id=demo] {
49 | 		background: #fff1c1;
50 | 		border-color: #ffd500;
51 | 	}
52 |     [id=demo] ul{
53 |         display: flex;
54 |         margin-left: -40px;
55 |     }
56 |     [id=demo] li {
57 |     	margin-left: 0px;
58 |     	padding: 0 .5em;
59 |     }
60 | }
61 | 
62 | .mqmatches {
63 |     background: #f44336;
64 | }
65 | 


--------------------------------------------------------------------------------
/scss/chapter7/supports.scss:
--------------------------------------------------------------------------------
 1 | .title {
 2 |     font-style: italic;
 3 |     border-bottom: .1em dotted #ff5722;
 4 | }
 5 | 
 6 | #demo {
 7 |     font-size: 2em;
 8 |     background: #F6F6F6;
 9 |     border: 1px solid #ccc;
10 |     border-radius: 3px;
11 |     padding: 1em;
12 | 
13 |     p {
14 |         margin: 0;
15 |     }
16 | }
17 | 
18 | @supports (text-decoration: underline wavy #e91e63) {
19 |     .title {
20 |         border: none;
21 |         font-style: normal;
22 |         text-decoration: underline wavy #e91e63;
23 |     }
24 | }
25 | 
26 | 
27 | @supports (text-decoration-color: #e91e63) and (text-decoration-style: double) {
28 |     #demo a {
29 |         text-decoration: underline double #0c0;
30 |     }
31 | }
32 | 
33 | @supports (text-decoration-skip: ink) {
34 |     #demo a {
35 |         text-decoration-skip: ink;
36 |     }
37 | }
38 | 
39 | @supports not (text-decoration-style: double) {
40 |     #demo a {
41 |         text-decoration: none;
42 |         border-bottom: 4px double #FF9800;
43 |     }
44 | }
45 | 
46 | .supports-flex {
47 |     display:table-row;
48 | 
49 |     li {
50 |         display: table-cell;
51 |         background: #A2D9D4;
52 |         border-width: 0 1px 0 0;
53 |         border-style: solid;
54 |         border-color: #009688;
55 |         padding: .5em;
56 | 
57 |         &:first-child {
58 |             border-width: 0 1px;
59 |         }
60 | 
61 |         &:hover {
62 |             background: #673ab7;
63 |         }
64 |     } 
65 | 
66 |     a {
67 |         font-weight: 600;
68 |         color: #009688;
69 |         text-decoration: none;
70 |     } 
71 | 
72 |     li:hover a {
73 |         color: #fff;
74 |     }  
75 | }
76 | 
77 | @supports (display:flex) {
78 |     .supports-flex {
79 |         display:flex;
80 |         margin-left: -40px;
81 |     }
82 | }
83 | 
84 | 


--------------------------------------------------------------------------------
/scss/includes/_config.scss:
--------------------------------------------------------------------------------
 1 | //----------------------------------
 2 | // Colors
 3 | // ---------------------------------
 4 | $bgA: #fffffe;  // Nearly white
 5 | $bgB: #309;		// Bluish purple
 6 | 
 7 | $txtdk: #121212; // Nearly black
 8 | $txthighlight1: #e91e63; // Reddish pink
 9 | $txthighlight2: #4caf50; // Bright green
10 | 
11 | $link: #3333ff;
12 | $visited: #0066ff;
13 | 
14 | $border1: #607d8b; // Blue gray
15 | 
16 | // ----------------------------------
17 | // Text
18 | // ----------------------------------
19 | 
20 | $basefont: 16px;
21 | $lineheight: 1.5;
22 | 


--------------------------------------------------------------------------------
/scss/includes/_dice.scss:
--------------------------------------------------------------------------------
  1 | .dice {
  2 | 	@include transform-style(preserve-3d);
  3 | 	height: 200px;
  4 | 	position: relative;
  5 | 	margin: auto;
  6 | 	width: 200px;
  7 | 
  8 | 	div {
  9 | 		background: rgba(#d00, .4);
 10 | 		border: 1px solid #ccc;
 11 | 		border-radius:4px;
 12 | 		position: absolute;
 13 | 		width: 100%;
 14 | 		height: 100%;
 15 | 
 16 | 		&:first-child {
 17 | 			@include transform(rotate(0deg) translateZ(-100px));
 18 | 		}
 19 | 
 20 | 		&:nth-child(2) {
 21 | 			@include transform(rotateX(-90deg) translateZ(100px));
 22 | 		}
 23 | 
 24 | 		&:nth-child(3) {
 25 | 			@include transform(rotateY(-90deg) translateZ(100px));
 26 | 		}
 27 | 		&:nth-child(4) {
 28 | 			@include transform(rotateY(90deg) translateZ(100px));
 29 | 		}
 30 | 		&:nth-child(5) {
 31 | 			@include transform(rotateX(90deg) translateZ(100px));
 32 | 		}
 33 | 		&:last-child {
 34 | 			@include transform(rotate(180deg) translateZ(100px));
 35 | 		}
 36 | 	}
 37 | 
 38 | 	circle {
 39 | 		fill: rgba(#fff, .8);
 40 | 	}
 41 | }
 42 | 
 43 | .multi {
 44 | 	div {
 45 | 		&:first-child {
 46 | 			background: rgba(#673ab7, .8);
 47 | 		}
 48 | 
 49 | 		&:nth-child(2) {
 50 | 			background: rgba(#009688, .8);
 51 | 		}
 52 | 
 53 | 		&:nth-child(3) {
 54 | 			background: rgba(#ffc107, .8);
 55 | 		}
 56 | 		&:nth-child(4) {
 57 | 			background: rgba(#e91e63, .8);
 58 | 		}
 59 | 		&:nth-child(5) {
 60 | 			background: rgba(#009688, .8);
 61 | 		}
 62 | 		&:last-child {
 63 | 			background: rgba(#8bc34a, .8);
 64 | 		}
 65 | 	}
 66 | }
 67 | 
 68 | .backface .side,
 69 | .bvh {
 70 | 	@include backface-visibility(hidden);
 71 | }
 72 | 
 73 | .card {
 74 | 	transition: -webkit-transform 1s linear;
 75 | 	@include transition(transform 1s linear);
 76 | 	@include transform-style(preserve-3d);
 77 | 	border: 1px solid #ccc;
 78 | 	border-radius: 8px;
 79 | 	box-sizing: content-box;
 80 | 	height: 300px;
 81 | 	position: relative;
 82 | 	width: 240px;
 83 | }
 84 | 
 85 | .side {
 86 | 	height: inherit;
 87 | 	left: 0;
 88 | 	position: absolute;
 89 | 	top: 0;
 90 | 	width: inherit;
 91 | }
 92 | 
 93 | .front {
 94 | 	@include transform(rotateY(180deg));
 95 | }
 96 | 
 97 | .back {
 98 | 	background: rgba(#ccc, .8) url(../../images/dicediamond.svg) center;
 99 | 	background-size: 7px auto;
100 | 	border: 10px solid #fff;
101 | 	border-radius: 8px;
102 | }
103 | 
104 | .flipped {
105 | 	@include transform(rotateY(180deg));
106 | }
107 | 
108 | .suit {
109 | 	position: absolute;
110 | 	top: auto;
111 | 	bottom: auto;
112 | 	width: 100%;
113 | 	padding: 0;
114 | 	margin: auto;
115 | 	height: 300px;
116 | 	line-height: 1;
117 | 	text-align: center;
118 | 	font-size: 300px;
119 | }


--------------------------------------------------------------------------------
/scss/includes/_resets.scss:
--------------------------------------------------------------------------------
 1 | @import "includes/mixins";
 2 | 
 3 | /* Used for [type=range] inputs */
 4 | .toggle {
 5 |     @include appearance(none);
 6 |     background: #eee;
 7 |     border-radius: 10px;
 8 |     box-shadow: inset 0 0 5px #333;
 9 |     padding: 2px;
10 |     vertical-align: bottom;
11 |     width: 50px;
12 | 
13 |     &:focus {
14 |         outline: none;
15 |         border-color: #f50;
16 |     }
17 | 
18 |     &::-moz-range-thumb {
19 |         height: 99%;
20 |     }
21 | 
22 |     &::-moz-range-track {
23 |         background: transparent;
24 |     }
25 | 
26 |     &::-ms-track {
27 |         cursor: pointer;
28 |         background: transparent;
29 |         border-color: transparent;
30 |         color: transparent;
31 |     }
32 |     &::-ms-thumb {
33 |         width: 20px;
34 |         height: 20px;
35 |         border-radius: 10px;
36 |     }
37 |     
38 |     &::-ms-track {
39 |       cursor: pointer;
40 |       background: transparent;
41 |       border-color: transparent;
42 |       color: transparent;
43 |     }
44 | 
45 |     &::-ms-thumb {
46 |       width: 10px;
47 |       height: 10px;
48 |       border-radius: 10px;
49 |       background: #ccc;
50 |       border: 1px solid #666;
51 |     }
52 | 
53 |     .toggle.active {
54 |       background: #4caf50;
55 |     }
56 | 
57 |     &::-ms-track,
58 |     &::-ms-fill-lower,
59 |     &::-ms-fill-upper {
60 |       background: transparent;
61 |     }
62 | 
63 |     &::-ms-tooltip {
64 |       display: none;
65 |     }
66 | }
67 | 
68 | 
69 | 
70 | 


--------------------------------------------------------------------------------
/scss/includes/_typography.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	font: 300 #{$basefont} / #{$lineheight} 'Roboto 2014','Droid Sans','Liberation Sans','Helvetica Neue',sans-serif;
 3 | 
 4 | 	> footer {
 5 | 		font-size: $basefont * .85;
 6 | 	}
 7 | }
 8 | 
 9 | h1,h2,h3,h4,h5,h6 {margin: 0}
10 | 
11 | h1 {
12 | 	font-size: $basefont * 2;	
13 | }
14 | 
15 | h2 {
16 | 	font-size: $basefont * 1.8;
17 | }
18 | 
19 | h3 {
20 | 	font-size: $basefont * 1.6;
21 | }
22 | 
23 | h4 {
24 | 	font-size: $basefont * 1.4;
25 | }
26 | 
27 | h5 {
28 | 	font-size: $basefont * 1.2;
29 | }
30 | 
31 | h6 {
32 | 	font-size: $basefont * 1.1;
33 | }
34 | 
35 | ul {
36 | 	list-style: square;
37 | }
38 | 
39 | button {
40 | 	background: #dedede;
41 | 	border: 1px solid #aaa;
42 | 	border-radius: 2px;
43 | 	color: inherit;
44 | 	min-width: 100px;
45 | 	padding: .5em 1em; 
46 | 
47 | 	&:hover {
48 | 		background: #efefef;
49 | 	}
50 | }
51 | 
52 | .mono, code {
53 | 	font-family: monospace;
54 | }
55 | 
56 | input[type=number] {
57 | 	text-align: right;
58 | 	text-align: ".";
59 | }
60 | 
61 | .note {
62 |     font-size: .9rem;
63 |     font-style: italic;
64 | }
65 | 


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