├── README.md
├── LICENSE
├── css
    ├── styles.css
    └── avgrund.css
├── js
    └── avgrund.js
├── index.html
└── multiple.html


/README.md:
--------------------------------------------------------------------------------
 1 | # Avgrund
 2 | 
 3 | A modal concept which aims to give a sense of depth between the page and modal layers.
 4 | 
 5 | [Check out the demo page](http://lab.hakim.se/avgrund/).
 6 | 
 7 | ## History
 8 | 
 9 | #### 0.1
10 | - Initial release
11 | 
12 | ## License
13 | 
14 | MIT licensed
15 | 
16 | Copyright (C) 2012 Hakim El Hattab, http://hakim.se


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (C) 2012 Hakim El Hattab, http://hakim.se
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * avgrund 0.1
 3 |  * http://lab.hakim.se/avgrund
 4 |  * MIT licensed
 5 |  *
 6 |  * Created by Hakim El Hattab, http://hakim.se
 7 |  */
 8 | 
 9 | * {
10 | 	margin: 0;
11 | 	padding: 0;
12 | }
13 | 
14 | html, 
15 | body {
16 | 	height: 100%;
17 | 	overflow: hidden;
18 | }
19 | 
20 | html {
21 | 	background-color: #222;
22 | 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
23 | 	background-repeat: repeat;
24 | }
25 | 
26 | h1, 
27 | h2 {
28 | 	font-size: 24px;
29 | }
30 | 
31 | p {
32 | 	margin: 10px 0 10px 0;
33 | 	font-size: 16px;
34 | 	line-height: 1.32;
35 | }
36 | 
37 | a {
38 | 	color: #7aa76d;
39 | 	text-decoration: none;
40 | 
41 | 	-webkit-transition: 0.15s color ease;
42 | 	   -moz-transition: 0.15s color ease;
43 | 	    -ms-transition: 0.15s color ease;
44 | 	     -o-transition: 0.15s color ease;
45 | 	        transition: 0.15s color ease;
46 | }
47 | 	a:hover {
48 | 		color: #91cd85;
49 | 	}
50 | 
51 | small {
52 | 	display: block;
53 | 	margin-top: 15px;
54 | 	padding-top: 15px;
55 | 	color: #333;
56 | 	font-size: 0.85em;
57 | 	border-top: 1px dashed #ccc;
58 | 
59 | 	-webkit-text-size-adjust: none;
60 | }
61 | 
62 | button {
63 | 	border: 0px;
64 | 	padding: 8px 10px;
65 | 	margin: 5px 0px;
66 | 	border-radius: 1px;
67 | 
68 | 	cursor: pointer;
69 | 	color: #fff;
70 | 	background: #7aa76d;
71 | 	font-size: 15px;
72 | 
73 | 	-webkit-transition: 0.15s background ease;
74 | 	   -moz-transition: 0.15s background ease;
75 | 	    -ms-transition: 0.15s background ease;
76 | 	     -o-transition: 0.15s background ease;
77 | 	        transition: 0.15s background ease;
78 | }
79 | 	button:hover {
80 | 		background: #91cd85;
81 | 	}
82 | 	button:active {
83 | 		background: #60895a;
84 | 	}
85 | 	button+button {
86 | 		margin-left: 5px;
87 | 	}
88 | 
89 | .sharing {
90 | 	margin-top: 50px;
91 | }
92 | 
93 | body {
94 | 	background: #fff;
95 | 
96 | 	font-family: 'Lato', Helvetica, sans-serif;
97 | 	font-size: 16px;
98 | 	color: #222;
99 | }


--------------------------------------------------------------------------------
/js/avgrund.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * avgrund 0.1
 3 |  * http://lab.hakim.se/avgrund
 4 |  * MIT licensed
 5 |  *
 6 |  * Copyright (C) 2012 Hakim El Hattab, http://hakim.se
 7 |  */
 8 | var Avgrund = (function(){
 9 | 
10 | 	var container = document.documentElement,
11 | 		popup = document.querySelector( '.avgrund-popup-animate' ),
12 | 		cover = document.querySelector( '.avgrund-cover' ),
13 | 		currentState = null;
14 | 
15 | 	container.className = container.className.replace( /\s+$/gi, '' ) + ' avgrund-ready';
16 | 
17 | 	// Deactivate on ESC
18 | 	function onDocumentKeyUp( event ) {
19 | 		if( event.keyCode === 27 ) {
20 | 			deactivate();
21 | 		}
22 | 	}
23 | 
24 | 	// Deactivate on click outside
25 | 	function onDocumentClick( event ) {
26 | 		if( event.target === cover ) {
27 | 			deactivate();
28 | 		}
29 | 	}
30 | 
31 | 	function activate( state ) {
32 | 		document.addEventListener( 'keyup', onDocumentKeyUp, false );
33 | 		document.addEventListener( 'click', onDocumentClick, false );
34 | 		document.addEventListener( 'touchstart', onDocumentClick, false );
35 | 
36 | 		removeClass( popup, currentState );
37 | 		addClass( popup, 'no-transition' );
38 | 		addClass( popup, state );
39 | 
40 | 		setTimeout( function() {
41 | 			removeClass( popup, 'no-transition' );
42 | 			addClass( container, 'avgrund-active' );
43 | 		}, 0 );
44 | 
45 | 		currentState = state;
46 | 	}
47 | 
48 | 	function deactivate() {
49 | 		document.removeEventListener( 'keyup', onDocumentKeyUp, false );
50 | 		document.removeEventListener( 'click', onDocumentClick, false );
51 | 		document.removeEventListener( 'touchstart', onDocumentClick, false );
52 | 
53 | 		removeClass( container, 'avgrund-active' );
54 | 		removeClass( popup, 'avgrund-popup-animate')
55 | 	}
56 | 
57 | 	function disableBlur() {
58 | 		addClass( document.documentElement, 'no-blur' );
59 | 	}
60 | 
61 | 	function addClass( element, name ) {
62 | 		element.className = element.className.replace( /\s+$/gi, '' ) + ' ' + name;
63 | 	}
64 | 
65 | 	function removeClass( element, name ) {
66 | 		element.className = element.className.replace( name, '' );
67 | 	}
68 | 
69 | 	function show(selector){
70 | 		popup = document.querySelector( selector );
71 | 		addClass(popup, 'avgrund-popup-animate');
72 | 		activate();
73 | 		return this;
74 | 	}
75 | 	function hide() {
76 | 		deactivate();
77 | 	}
78 | 
79 | 	return {
80 | 		activate: activate,
81 | 		deactivate: deactivate,
82 | 		disableBlur: disableBlur,
83 | 		show: show,
84 | 		hide: hide
85 | 	}
86 | 
87 | })();


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>  
 2 | <html lang="en">
 3 | 	
 4 | 	<head>
 5 | 		<meta charset="utf-8">
 6 | 		
 7 | 		<title>Avgrund - A modal UI concept</title>
 8 | 
 9 | 		<meta name="description" content="A modal concept which aims to give a sense of depth between the page and modal layers">
10 | 		<meta name="author" content="Hakim El Hattab">
11 | 
12 | 		<meta name="viewport" content="width=800, user-scalable=no">
13 | 		
14 | 		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
15 | 		
16 | 		<link rel="stylesheet" href="css/styles.css">
17 | 		<link rel="stylesheet" href="css/avgrund.css">
18 | 
19 | 		<script>
20 | 			function openDialog() {
21 | 				Avgrund.show( "#default-popup" );
22 | 			}
23 | 			function closeDialog() {
24 | 				Avgrund.hide();
25 | 			}
26 | 		</script>
27 | 
28 | 	</head>
29 | 	
30 | 	<body>
31 | 
32 | 		<aside id="default-popup" class="avgrund-popup">
33 | 			<h2>That's all, folks</h2>
34 | 			<p>
35 | 				You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
36 | 			</p>
37 | 			<p>
38 | 				If you like this you would probably enjoy <a href="http://lab.hakim.se/meny">Meny</a>, <a href="http://lab.hakim.se/reveal-js">reveal.js</a> and <a href="http://lab.hakim.se/scroll-effects">stroll.js</a>.
39 | 			</p>
40 | 			<button onclick="javascript:closeDialog();">Close</button>
41 | 		</aside>
42 | 
43 | 		<article class="avgrund-contents">
44 | 			<h1>Avgrund</h1>
45 | 			<p>
46 | 				A modal concept which aims to give a sense of depth between the page and modal layers. Click the button below to give it a try.
47 | 			</p>
48 | 			<button onclick="javascript:openDialog();">Open Avgrund</button>
49 | 			<p>
50 | 				Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of 
51 | 				it, not intended for any practical use.
52 | 			</p>
53 | 			<p>
54 | 				<em>Avgrund</em> is Swedish for abyss.
55 | 			</p>
56 | 			<small>
57 | 				Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
58 | 			</small>
59 | 
60 | 			<div class="sharing">
61 | 				<a href="http://twitter.com/share" class="twitter-share-button" data-text="Avgrund - a depth-based modal concept from @hakimel" data-url="http://lab.hakim.se/avgrund" data-count="small" data-related="hakimel"></a>
62 | 				
63 | 				<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Favgrund%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe> 
64 | 			</div>
65 | 		</article>
66 | 
67 | 		<div class="avgrund-cover"></div>
68 | 
69 | 		<script type="text/javascript" src="js/avgrund.js"></script>
70 | 
71 | 		<a class="fork-reveal" href="https://github.com/hakimel/avgrund"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
72 | 
73 | 		<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
74 | 
75 | 	</body>
76 | </html>


--------------------------------------------------------------------------------
/css/avgrund.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * avgrund 0.1
  3 |  * http://lab.hakim.se/avgrund
  4 |  * MIT licensed
  5 |  *
  6 |  * Created by Hakim El Hattab, http://hakim.se
  7 |  */
  8 |  
  9 | .avgrund-active body {
 10 | 	-webkit-transform: scale( 0.9 );
 11 | 	   -moz-transform: scale( 0.9 );
 12 | 	    -ms-transform: scale( 0.9 );
 13 | 	     -o-transform: scale( 0.9 );
 14 | 	        transform: scale( 0.9 );
 15 | }
 16 | 
 17 | .avgrund-cover {
 18 | 	position: absolute;
 19 | 	width: 100%;
 20 | 	height: 100%;
 21 | 	top: 0;
 22 | 	left: 0;
 23 | 	z-index: 1;
 24 | 	visibility: hidden;
 25 | 	opacity: 0;
 26 | 	background: rgba( 0, 0, 0, 0.5 );
 27 | }
 28 | 	.avgrund-active .avgrund-cover {
 29 | 		visibility: visible;
 30 | 		opacity: 1;
 31 | 	}
 32 | 
 33 | .avgrund-contents {
 34 | 	position: relative;
 35 | 	padding: 20px;
 36 | 	max-width: 400px;
 37 | 	height: 100%;
 38 | 	margin: auto;
 39 | }
 40 | 	.avgrund-active .avgrund-contents {
 41 | 		-webkit-filter: blur(2px);
 42 | 		   -moz-filter: blur(2px);
 43 | 		    -ms-filter: blur(2px);
 44 | 		     -o-filter: blur(2px);
 45 | 		        filter: blur(2px);
 46 | 	}
 47 | 	.no-blur.avgrund-active .avgrund-contents {
 48 | 		-webkit-filter: none;
 49 | 		   -moz-filter: none;
 50 | 		    -ms-filter: none;
 51 | 		     -o-filter: none;
 52 | 		        filter: none;
 53 | 	}
 54 | 
 55 | .avgrund-popup {
 56 | 	position: absolute;
 57 | 	width: 340px;
 58 | 	height: 180px;
 59 | 	left: 50%;
 60 | 	top: 50%;
 61 | 	margin: -130px 0 0 -190px;
 62 | 	visibility: hidden;
 63 | 	opacity: 0;
 64 | 	z-index: 2;
 65 | 	padding: 20px;
 66 | 
 67 | 	background: white;
 68 | 	box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
 69 | 	border-radius: 3px;
 70 | 
 71 | 	-webkit-transform: scale( 0.8 );
 72 | 	   -moz-transform: scale( 0.8 );
 73 | 	    -ms-transform: scale( 0.8 );
 74 | 	     -o-transform: scale( 0.8 );
 75 | 	        transform: scale( 0.8 );
 76 | }
 77 | 	.avgrund-active .avgrund-popup-animate {
 78 | 		visibility: visible;
 79 | 		opacity: 1;
 80 | 
 81 | 		-webkit-transform: scale( 1.1 );
 82 | 		   -moz-transform: scale( 1.1 );
 83 | 		    -ms-transform: scale( 1.1 );
 84 | 		     -o-transform: scale( 1.1 );
 85 | 		        transform: scale( 1.1 );
 86 | 	}
 87 | 	.avgrund-popup.stack {
 88 | 		-webkit-transform: scale( 1.5 );
 89 | 		   -moz-transform: scale( 1.5 );
 90 | 		    -ms-transform: scale( 1.5 );
 91 | 		     -o-transform: scale( 1.5 );
 92 | 		        transform: scale( 1.5 );
 93 | 	}
 94 | 	.avgrund-active .avgrund-popup.stack {
 95 | 		-webkit-transform: scale( 1.1 );
 96 | 		   -moz-transform: scale( 1.1 );
 97 | 		    -ms-transform: scale( 1.1 );
 98 | 		     -o-transform: scale( 1.1 );
 99 | 		        transform: scale( 1.1 );
100 | 	}
101 | 
102 | 
103 | .avgrund-ready body,
104 | .avgrund-ready .avgrund-contents,
105 | .avgrund-ready .avgrund-popup,
106 | .avgrund-ready .avgrund-cover {
107 | 	-webkit-transform-origin: 50% 50%;
108 | 	   -moz-transform-origin: 50% 50%;
109 | 	    -ms-transform-origin: 50% 50%;
110 | 	     -o-transform-origin: 50% 50%;
111 | 	        transform-origin: 50% 50%;
112 | 
113 | 	-webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
114 | 	   -moz-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
115 | 	    -ms-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
116 | 	     -o-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
117 | 	        transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
118 | }
119 | .avgrund-ready .avgrund-popup.no-transition {
120 | 	-webkit-transition: none;
121 | 	   -moz-transition: none;
122 | 	    -ms-transition: none;
123 | 	     -o-transition: none;
124 | 	        transition: none;
125 | }
126 | 
127 | 


--------------------------------------------------------------------------------
/multiple.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>  
 2 | <html lang="en">
 3 | 	
 4 | 	<head>
 5 | 		<meta charset="utf-8">
 6 | 		
 7 | 		<title>Avgrund - A modal UI concept</title>
 8 | 
 9 | 		<meta name="description" content="A modal concept which aims to give a sense of depth between the page and modal layers">
10 | 		<meta name="author" content="Hakim El Hattab">
11 | 
12 | 		<meta name="viewport" content="width=800, user-scalable=no">
13 | 		
14 | 		<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
15 | 		
16 | 		<link rel="stylesheet" href="css/styles.css">
17 | 		<link rel="stylesheet" href="css/avgrund.css">
18 | 
19 | 		<script>
20 | 			function openDialog() {
21 | 				Avgrund.show( "#default-popup" );
22 | 			}
23 | 			function openSecondDialog() {
24 | 				Avgrund.show( "#second-popup" );
25 | 			}
26 | 			function closeDialog() {
27 | 				Avgrund.hide();
28 | 			}
29 | 		</script>
30 | 
31 | 	</head>
32 | 	
33 | 	<body>
34 | 
35 | 		<aside id="default-popup" class="avgrund-popup">
36 | 			<h2>That's all, folks</h2>
37 | 			<p>
38 | 				You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
39 | 			</p>
40 | 			<p>
41 | 				If you like this you would probably enjoy <a href="http://lab.hakim.se/meny">Meny</a>, <a href="http://lab.hakim.se/reveal-js">reveal.js</a> and <a href="http://lab.hakim.se/scroll-effects">stroll.js</a>.
42 | 			</p>
43 | 			<button onclick="javascript:closeDialog();">Close</button>
44 | 		</aside>
45 | 
46 | 		<aside id="second-popup" class="avgrund-popup">
47 | 			<h2>That's a completely different popup</h2>
48 | 			<p>
49 | 				You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
50 | 			</p>
51 | 			<button onclick="javascript:closeDialog();">Close</button>
52 | 		</aside>
53 | 
54 | 		<article class="avgrund-contents">
55 | 			<h1>Avgrund</h1>
56 | 			<p>
57 | 				A modal concept which aims to give a sense of depth between the page and modal layers. Click the button below to give it a try.
58 | 			</p>
59 | 			<button onclick="javascript:openDialog();">Open Avgrund</button>
60 | 			<button onclick="javascript:openSecondDialog();">Open Second Avgrund</button>
61 | 			<p>
62 | 				Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of 
63 | 				it, not intended for any practical use.
64 | 			</p>
65 | 			<p>
66 | 				<em>Avgrund</em> is Swedish for abyss.
67 | 			</p>
68 | 			<small>
69 | 				Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
70 | 			</small>
71 | 
72 | 			<div class="sharing">
73 | 				<a href="http://twitter.com/share" class="twitter-share-button" data-text="Avgrund - a depth-based modal concept from @hakimel" data-url="http://lab.hakim.se/avgrund" data-count="small" data-related="hakimel"></a>
74 | 				
75 | 				<iframe id="facebook-button" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Flab.hakim.se%2Favgrund%2F&layout=button_count&show_faces=false&width=83&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:24px; position: relative; top: 4px;" allowTransparency="true"></iframe> 
76 | 			</div>
77 | 		</article>
78 | 
79 | 		<div class="avgrund-cover"></div>
80 | 
81 | 		<script type="text/javascript" src="js/avgrund.js"></script>
82 | 
83 | 		<a class="fork-reveal" href="https://github.com/hakimel/avgrund"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
84 | 
85 | 		<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
86 | 
87 | 	</body>
88 | </html>


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