Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

initial commit

  • Loading branch information...
commit 3aa65a8a898ca8ff684ef705bbc0de86081d6bdc 0 parents
@hakimel authored
19 LICENSE
@@ -0,0 +1,19 @@
+Copyright (C) 2011 Hakim El Hattab, http://hakim.se
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
16 README.md
@@ -0,0 +1,16 @@
+# Avgrund
+
+A modal concept which aims to give a sense of depth between the page and modal layers.
+
+[Check out the demo page](http://lab.hakim.se/avgrund/).
+
+## History
+
+#### 0.1
+- Initial release
+
+## License
+
+MIT licensed
+
+Copyright (C) 2012 Hakim El Hattab, http://hakim.se
217 css/avgrund.css
@@ -0,0 +1,217 @@
+/*!
+ * avgrund 0.1
+ * http://lab.hakim.se/avgrund
+ * MIT licensed
+ *
+ * Created by Hakim El Hattab, http://hakim.se
+ */
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+}
+
+html {
+ background-color: #222;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
+ background-repeat: repeat;
+}
+
+h1,
+h2 {
+ font-size: 24px;
+}
+
+p {
+ margin: 10px 0 10px 0;
+ font-size: 16px;
+ line-height: 1.32;
+}
+
+a {
+ color: #7aa76d;
+ text-decoration: none;
+
+ -webkit-transition: 0.15s color ease;
+ -moz-transition: 0.15s color ease;
+ -ms-transition: 0.15s color ease;
+ -o-transition: 0.15s color ease;
+ transition: 0.15s color ease;
+}
+ a:hover {
+ color: #91cd85;
+ }
+
+small {
+ display: block;
+ margin-top: 15px;
+ padding-top: 15px;
+ color: #333;
+ font-size: 0.85em;
+ border-top: 1px dashed #ccc;
+
+ -webkit-text-size-adjust: none;
+}
+
+button {
+ border: 0px;
+ padding: 8px 10px;
+ margin: 5px 0px;
+ border-radius: 1px;
+
+ cursor: pointer;
+ color: #fff;
+ background: #7aa76d;
+ font-size: 15px;
+
+ -webkit-transition: 0.15s background ease;
+ -moz-transition: 0.15s background ease;
+ -ms-transition: 0.15s background ease;
+ -o-transition: 0.15s background ease;
+ transition: 0.15s background ease;
+}
+ button:hover {
+ background: #91cd85;
+ }
+ button:active {
+ background: #60895a;
+ }
+ button+button {
+ margin-left: 5px;
+ }
+
+.sharing {
+ margin-top: 50px;
+}
+
+body {
+ background: #fff;
+
+ font-family: 'Lato', Helvetica, sans-serif;
+ font-size: 16px;
+ color: #222;
+}
+ .avgrund-active body {
+ -webkit-transform: scale( 0.9 );
+ -moz-transform: scale( 0.9 );
+ -ms-transform: scale( 0.9 );
+ -o-transform: scale( 0.9 );
+ transform: scale( 0.9 );
+ }
+
+.avgrund-cover {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ visibility: hidden;
+ opacity: 0;
+ background: rgba( 0, 0, 0, 0.5 );
+}
+ .avgrund-active .avgrund-cover {
+ visibility: visible;
+ opacity: 1;
+ }
+
+.avgrund-contents {
+ position: relative;
+ padding: 20px;
+ max-width: 400px;
+ height: 100%;
+ margin: auto;
+}
+ .avgrund-active .avgrund-contents {
+ -webkit-filter: blur(2px);
+ -moz-filter: blur(2px);
+ -ms-filter: blur(2px);
+ -o-filter: blur(2px);
+ filter: blur(2px);
+ }
+ .no-blur.avgrund-active .avgrund-contents {
+ -webkit-filter: none;
+ -moz-filter: none;
+ -ms-filter: none;
+ -o-filter: none;
+ filter: none;
+ }
+
+.avgrund-popup {
+ position: absolute;
+ width: 340px;
+ height: 180px;
+ left: 50%;
+ top: 50%;
+ margin: -130px 0 0 -190px;
+ visibility: hidden;
+ opacity: 0;
+ z-index: 2;
+ padding: 20px;
+
+ background: white;
+ box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.6 );
+ border-radius: 3px;
+
+ -webkit-transform: scale( 0.8 );
+ -moz-transform: scale( 0.8 );
+ -ms-transform: scale( 0.8 );
+ -o-transform: scale( 0.8 );
+ transform: scale( 0.8 );
+}
+ .avgrund-active .avgrund-popup {
+ visibility: visible;
+ opacity: 1;
+
+ -webkit-transform: scale( 1.1 );
+ -moz-transform: scale( 1.1 );
+ -ms-transform: scale( 1.1 );
+ -o-transform: scale( 1.1 );
+ transform: scale( 1.1 );
+ }
+ .avgrund-popup.stack {
+ -webkit-transform: scale( 1.5 );
+ -moz-transform: scale( 1.5 );
+ -ms-transform: scale( 1.5 );
+ -o-transform: scale( 1.5 );
+ transform: scale( 1.5 );
+ }
+ .avgrund-active .avgrund-popup.stack {
+ -webkit-transform: scale( 1.1 );
+ -moz-transform: scale( 1.1 );
+ -ms-transform: scale( 1.1 );
+ -o-transform: scale( 1.1 );
+ transform: scale( 1.1 );
+ }
+
+
+.avgrund-ready body,
+.avgrund-ready .avgrund-contents,
+.avgrund-ready .avgrund-popup,
+.avgrund-ready .avgrund-cover {
+ -webkit-transform-origin: 50% 50%;
+ -moz-transform-origin: 50% 50%;
+ -ms-transform-origin: 50% 50%;
+ -o-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+
+ -webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
+ -moz-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
+ -ms-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
+ -o-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
+ transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
+}
+.avgrund-ready .avgrund-popup.no-transition {
+ -webkit-transition: none;
+ -moz-transition: none;
+ -ms-transition: none;
+ -o-transition: none;
+ transition: none;
+}
+
0  css/css
No changes.
75 index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+
+ <head>
+ <meta charset="utf-8">
+
+ <title>Avgrund - A modal UI concept</title>
+
+ <meta name="description" content="A modal concept which aims to give a sense of depth between the page and modal layers">
+ <meta name="author" content="Hakim El Hattab">
+
+ <meta name="viewport" content="width=800, user-scalable=no">
+
+ <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+
+ <link rel="stylesheet" href="css/avgrund.css?2">
+ </head>
+
+ <body>
+
+ <article class="avgrund-contents">
+ <h1>Avgrund</h1>
+ <p>
+ 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.
+ </p>
+ <button onclick="avgrund.activate( 'stack' );">Stack it</button>
+ <button onclick="avgrund.activate();">Grow it</button>
+ <p>
+ Uses CSS transforms to scale components and CSS filters to blur the page. Built for the fun of
+ it, not intended for any practical use.
+ </p>
+ <p>
+ <em>Avgrund</em> is Swedish for abyss.
+ </p>
+ <small>
+ Created by <a href="http://twitter.com/hakimel">@hakimel</a> / <a href="http://hakim.se/">http://hakim.se</a>
+ </small>
+
+ <div class="sharing">
+ <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>
+
+ <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>
+ </div>
+ </article>
+
+ <div class="avgrund-cover"></div>
+
+ <aside class="avgrund-popup">
+ <h2>That's all, folks</h2>
+ <p>
+ You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.
+ </p>
+ <p>
+ 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>.
+ </p>
+ <button onclick="avgrund.deactivate();">Close</button>
+ </aside>
+
+ <script type="text/javascript" src="js/avgrund.js"></script>
+
+ <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+
+ <script>
+ var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
+ (function(d, t) {
+ var g = d.createElement(t),
+ s = d.getElementsByTagName(t)[0];
+ g.async = true;
+ g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ })(document, 'script');
+ </script>
+
+ </body>
+</html>
72 js/avgrund.js
@@ -0,0 +1,72 @@
+/*!
+ * avgrund 0.1
+ * http://lab.hakim.se/avgrund
+ * MIT licensed
+ *
+ * Created by Hakim El Hattab, http://hakim.se
+ */
+(function(){
+
+ var container = document.documentElement,
+ popup = document.querySelector( '.avgrund-popup' ),
+ cover = document.querySelector( '.avgrund-cover' ),
+ currentState = null;
+
+ container.className = container.className.replace( /\s+$/gi, '' ) + ' avgrund-ready';
+
+ // Deactivate on ESC
+ function onDocumentKeyUp( event ) {
+ if( event.keyCode === 27 ) {
+ deactivate();
+ }
+ }
+
+ // Deactivate on click outside
+ function onDocumentClick( event ) {
+ if( event.target === cover ) {
+ deactivate();
+ }
+ }
+
+ function activate( state ) {
+ document.addEventListener( 'keyup', onDocumentKeyUp, false );
+ document.addEventListener( 'click', onDocumentClick, false );
+
+ removeClass( popup, currentState );
+ addClass( popup, 'no-transition' );
+ addClass( popup, state );
+
+ setTimeout( function() {
+ removeClass( popup, 'no-transition' );
+ addClass( container, 'avgrund-active' );
+ }, 0 );
+
+ currentState = state;
+ }
+
+ function deactivate() {
+ document.removeEventListener( 'keyup', onDocumentKeyUp, false );
+ document.removeEventListener( 'click', onDocumentClick, false );
+
+ removeClass( container, 'avgrund-active' );
+ }
+
+ function disableBlur() {
+ addClass( document.documentElement, 'no-blur' );
+ }
+
+ function addClass( element, name ) {
+ element.className = element.className.replace( /\s+$/gi, '' ) + ' ' + name;
+ }
+
+ function removeClass( element, name ) {
+ element.className = element.className.replace( name, '' );
+ }
+
+ window.avgrund = {
+ activate: activate,
+ deactivate: deactivate,
+ disableBlur: disableBlur
+ }
+
+})();
Please sign in to comment.
Something went wrong with that request. Please try again.