Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

initial commit

  • Loading branch information...
commit 3aa65a8a898ca8ff684ef705bbc0de86081d6bdc 0 parents
Hakim El Hattab authored August 18, 2012
19  LICENSE
... ...
@@ -0,0 +1,19 @@
  1
+Copyright (C) 2011 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.
16  README.md
Source Rendered
... ...
@@ -0,0 +1,16 @@
  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
217  css/avgrund.css
... ...
@@ -0,0 +1,217 @@
  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
+}
  100
+	.avgrund-active body {
  101
+		-webkit-transform: scale( 0.9 );
  102
+		   -moz-transform: scale( 0.9 );
  103
+		    -ms-transform: scale( 0.9 );
  104
+		     -o-transform: scale( 0.9 );
  105
+		        transform: scale( 0.9 );
  106
+	}
  107
+
  108
+.avgrund-cover {
  109
+	position: absolute;
  110
+	width: 100%;
  111
+	height: 100%;
  112
+	top: 0;
  113
+	left: 0;
  114
+	z-index: 1;
  115
+	visibility: hidden;
  116
+	opacity: 0;
  117
+	background: rgba( 0, 0, 0, 0.5 );
  118
+}
  119
+	.avgrund-active .avgrund-cover {
  120
+		visibility: visible;
  121
+		opacity: 1;
  122
+	}
  123
+
  124
+.avgrund-contents {
  125
+	position: relative;
  126
+	padding: 20px;
  127
+	max-width: 400px;
  128
+	height: 100%;
  129
+	margin: auto;
  130
+}
  131
+	.avgrund-active .avgrund-contents {
  132
+		-webkit-filter: blur(2px);
  133
+		   -moz-filter: blur(2px);
  134
+		    -ms-filter: blur(2px);
  135
+		     -o-filter: blur(2px);
  136
+		        filter: blur(2px);
  137
+	}
  138
+	.no-blur.avgrund-active .avgrund-contents {
  139
+		-webkit-filter: none;
  140
+		   -moz-filter: none;
  141
+		    -ms-filter: none;
  142
+		     -o-filter: none;
  143
+		        filter: none;
  144
+	}
  145
+
  146
+.avgrund-popup {
  147
+	position: absolute;
  148
+	width: 340px;
  149
+	height: 180px;
  150
+	left: 50%;
  151
+	top: 50%;
  152
+	margin: -130px 0 0 -190px;
  153
+	visibility: hidden;
  154
+	opacity: 0;
  155
+	z-index: 2;
  156
+	padding: 20px;
  157
+
  158
+	background: white;
  159
+	box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
  160
+	border-radius: 3px;
  161
+
  162
+	-webkit-transform: scale( 0.8 );
  163
+	   -moz-transform: scale( 0.8 );
  164
+	    -ms-transform: scale( 0.8 );
  165
+	     -o-transform: scale( 0.8 );
  166
+	        transform: scale( 0.8 );
  167
+}
  168
+	.avgrund-active .avgrund-popup {
  169
+		visibility: visible;
  170
+		opacity: 1;
  171
+
  172
+		-webkit-transform: scale( 1.1 );
  173
+		   -moz-transform: scale( 1.1 );
  174
+		    -ms-transform: scale( 1.1 );
  175
+		     -o-transform: scale( 1.1 );
  176
+		        transform: scale( 1.1 );
  177
+	}
  178
+	.avgrund-popup.stack {
  179
+		-webkit-transform: scale( 1.5 );
  180
+		   -moz-transform: scale( 1.5 );
  181
+		    -ms-transform: scale( 1.5 );
  182
+		     -o-transform: scale( 1.5 );
  183
+		        transform: scale( 1.5 );
  184
+	}
  185
+	.avgrund-active .avgrund-popup.stack {
  186
+		-webkit-transform: scale( 1.1 );
  187
+		   -moz-transform: scale( 1.1 );
  188
+		    -ms-transform: scale( 1.1 );
  189
+		     -o-transform: scale( 1.1 );
  190
+		        transform: scale( 1.1 );
  191
+	}
  192
+
  193
+
  194
+.avgrund-ready body,
  195
+.avgrund-ready .avgrund-contents,
  196
+.avgrund-ready .avgrund-popup,
  197
+.avgrund-ready .avgrund-cover {
  198
+	-webkit-transform-origin: 50% 50%;
  199
+	   -moz-transform-origin: 50% 50%;
  200
+	    -ms-transform-origin: 50% 50%;
  201
+	     -o-transform-origin: 50% 50%;
  202
+	        transform-origin: 50% 50%;
  203
+
  204
+	-webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  205
+	   -moz-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  206
+	    -ms-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  207
+	     -o-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  208
+	        transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
  209
+}
  210
+.avgrund-ready .avgrund-popup.no-transition {
  211
+	-webkit-transition: none;
  212
+	   -moz-transition: none;
  213
+	    -ms-transition: none;
  214
+	     -o-transition: none;
  215
+	        transition: none;
  216
+}
  217
+
0  css/css
No changes.
75  index.html
... ...
@@ -0,0 +1,75 @@
  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/avgrund.css?2">
  17
+	</head>
  18
+	
  19
+	<body>
  20
+
  21
+		<article class="avgrund-contents">
  22
+			<h1>Avgrund</h1>
  23
+			<p>
  24
+				A modal concept which aims to give a sense of depth between the page and modal layers. Click a button below to give it a try.
  25
+			</p>
  26
+			<button onclick="avgrund.activate( 'stack' );">Stack it</button>
  27
+			<button onclick="avgrund.activate();">Grow it</button>
  28
+			<p>
  29
+				Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of 
  30
+				it, not intended for any practical use.
  31
+			</p>
  32
+			<p>
  33
+				<em>Avgrund</em> is Swedish for abyss.
  34
+			</p>
  35
+			<small>
  36
+				Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
  37
+			</small>
  38
+
  39
+			<div class="sharing">
  40
+				<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>
  41
+				
  42
+				<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> 
  43
+			</div>
  44
+		</article>
  45
+
  46
+		<div class="avgrund-cover"></div>
  47
+
  48
+		<aside class="avgrund-popup">
  49
+			<h2>That's all, folks</h2>
  50
+			<p>
  51
+				You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
  52
+			</p>
  53
+			<p>
  54
+				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>.
  55
+			</p>
  56
+			<button onclick="avgrund.deactivate();">Close</button>
  57
+		</aside>
  58
+
  59
+		<script type="text/javascript" src="js/avgrund.js"></script>
  60
+
  61
+		<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  62
+
  63
+		<script>
  64
+		var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
  65
+		(function(d, t) {
  66
+		var g = d.createElement(t),
  67
+		    s = d.getElementsByTagName(t)[0];
  68
+		g.async = true;
  69
+		g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  70
+		s.parentNode.insertBefore(g, s);
  71
+		})(document, 'script');
  72
+		</script>
  73
+
  74
+	</body>
  75
+</html>
72  js/avgrund.js
... ...
@@ -0,0 +1,72 @@
  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
+(function(){
  9
+
  10
+	var container = document.documentElement,
  11
+		popup = document.querySelector( '.avgrund-popup' ),
  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
+
  35
+		removeClass( popup, currentState );
  36
+		addClass( popup, 'no-transition' );
  37
+		addClass( popup, state );
  38
+
  39
+		setTimeout( function() {
  40
+			removeClass( popup, 'no-transition' );
  41
+			addClass( container, 'avgrund-active' );
  42
+		}, 0 );
  43
+
  44
+		currentState = state;
  45
+	}
  46
+
  47
+	function deactivate() {
  48
+		document.removeEventListener( 'keyup', onDocumentKeyUp, false );
  49
+		document.removeEventListener( 'click', onDocumentClick, false );
  50
+
  51
+		removeClass( container, 'avgrund-active' );
  52
+	}
  53
+
  54
+	function disableBlur() {
  55
+		addClass( document.documentElement, 'no-blur' );
  56
+	}
  57
+
  58
+	function addClass( element, name ) {
  59
+		element.className = element.className.replace( /\s+$/gi, '' ) + ' ' + name;
  60
+	}
  61
+
  62
+	function removeClass( element, name ) {
  63
+		element.className = element.className.replace( name, '' );
  64
+	}
  65
+
  66
+	window.avgrund = {
  67
+		activate: activate,
  68
+		deactivate: deactivate,
  69
+		disableBlur: disableBlur
  70
+	}
  71
+
  72
+})();

0 notes on commit 3aa65a8

Please sign in to comment.
Something went wrong with that request. Please try again.