diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6e51c1f --- /dev/null +++ b/.gitignore @@ -0,0 +1,17 @@ +lib-cov +*.seed +*.log +*.csv +*.dat +*.out +*.pid +*.gz + +pids +logs +results + +npm-debug.log +node_modules + +.sass-cache \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..4ec3690 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,68 @@ +module.exports = function(grunt) { + + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + + + sass: { + dist: { + options: { + style: 'expanded' + }, + files: { + 'css/hover.css': 'scss/hover.scss' + } + } + }, + + + autoprefixer: { + options: { + browsers: ['last 2 version', 'ie 8', 'ie 9'] + }, + multiple_files: { + expand: true, + flatten: true, + src: 'css/*.css', + dest: 'css/' + } + }, + + + cssmin: { + combine: { + files: { + 'css/hover-min.css': ['css/hover.css'] + } + } + }, + + + watch: { + options: { + livereload: true, + }, + css: { + files: ['scss/*.scss', 'css/*.css', '*.html'], + tasks: ['sass', 'autoprefixer', 'cssmin'], + options: { + spawn: false, + } + } + }, + + connect: { + server: { + options: { + port: 8000, + base: './' + } + } + }, + + }); + + require('load-grunt-tasks')(grunt); + + grunt.registerTask('default', ['connect', 'watch']); +}; \ No newline at end of file diff --git a/README.md b/README.md index 12d838c..7651bf8 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,90 @@ -Hover -===== +#hover.css A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS. + +##Author + +- [Ian Lunn](https://twitter.com/IanLunn) +- [ianlunn.co.uk](http://ianlunn.co.uk/) + +##How To Use +hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to. + +###Copy and Paste an Effect +If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download hover.css in its entirety. + +Assuming you want to use the `Grow` effect: + +1. Download hover.css +2. In hover.css, find the 'Grow' CSS (each effect is named using a comment above it): + +```css +/* Grow */ + +.grow { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.grow:hover { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} +``` + +3. Copy this effect and then paste it into your own stylesheet. +4. In the HTML file which you'd like the effect to appear, add the class of `.grow` to your chosen element. + +Example element before applying hover.css effect: + +```html +Add to Basket +``` + +Example element after applying hover.css effect: + +```html +Add to Basket +``` + +###Reference hover.css +If you plan on using many of hover.css' effects on your website, you may like to reference the entire hover.css stylesheet. + +1. Download hover-min.css +2. Add `hover-min.css` to your websites files, in a directory named `css` for example +3. Reference hover-min.css in `` of the HTML page you'd like to add hover.css effects to: + +```html + + + +``` + +4. Assuming you want to use the 'Grow' effect, in the HTML file you'd like to use this effect, add the class of `.grow` to your chosen element. + +Example element before applying hover.css effect: + +```html +Add to Basket +``` + +Example element after applying hover.css effect: + +```html +Add to Basket +``` + + +##License +hover.css is open source, and made available under a [MIT License](http://www.opensource.org/licenses/mit-license.php). Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files. + +Placing author information in your stylesheet, credits page or humans.txt is much appreciated. \ No newline at end of file diff --git a/css/demo-page.css b/css/demo-page.css new file mode 100644 index 0000000..6cd526f --- /dev/null +++ b/css/demo-page.css @@ -0,0 +1,93 @@ +/* + * Hover.css - Demo Page + * Author: Ian Lunn @IanLunn + * Author URL: http://ianlunn.co.uk/ + * Github: https://github.com/IanLunn/Hover + + * Made available under a MIT License: + * http://www.opensource.org/licenses/mit-license.php + + * Hover.css Copyright Ian Lunn 2014. + */ + +body { + margin: 0 auto; + max-width: 800px; + padding: 20px; + font-family: sans-serif; + color: #333; + line-height: 140%; +} + +img { + border: none; +} + +.aligncenter { + text-align: center; +} + +.intro { + max-width: 680px; + margin: 0 auto; +} + +.button.cta { + display: inline-block; + position: relative; + margin: 2em 0 1em 0; + padding: 1em; + background: #2098D1; + border: none; + text-decoration: none; + font-weight: 700; + color: white; +} + +#effects { + margin-top: 5em; +} + +h1 { + text-align: center; + font-size: 4em; +} + +h2 { + margin-top: 2em; +} + +.about { + border-top: #333 solid 2px; + border-bottom: #333 solid 2px; +} + +.footer { + overflow: hidden; + width: auto; + margin-top: 6em; + font-size: .9em; +} + +.footer a { + text-decoration: none; +} + +.footer a:hover { + text-decoration: underline; +} + +.social { + margin-top: 2em; +} + +.social-button { + display: inline-block; + vertical-align: middle; +} + +.author { + margin: 6em auto 0 auto; + text-align: center; + font-weight: 900; +} \ No newline at end of file diff --git a/css/hover-min.css b/css/hover-min.css new file mode 100644 index 0000000..def2e03 --- /dev/null +++ b/css/hover-min.css @@ -0,0 +1 @@ +.button{margin:.4em;padding:1em;cursor:pointer;background:#ececec;text-decoration:none;color:#666}.grow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.grow:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.shrink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.shrink:hover{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}@-webkit-keyframes pulse{25%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse{25%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}}.pulse{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse:hover{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}}@keyframes pulse-grow{to{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}.pulse-grow{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse-grow:hover{-webkit-animation-name:pulse-grow;animation-name:pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes pulse-shrink{to{-webkit-transform:scale(0.9);transform:scale(0.9)}}@keyframes pulse-shrink{to{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)}}.pulse-shrink{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pulse-shrink:hover{-webkit-animation-name:pulse-shrink;animation-name:pulse-shrink;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes push{50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes push{50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.push{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.push:hover{-webkit-animation-name:push;animation-name:push;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes pop{50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop{50%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pop{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.pop:hover{-webkit-animation-name:pop;animation-name:pop;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.rotate:hover{-webkit-transform:rotate(4deg);-ms-transform:rotate(4deg);transform:rotate(4deg)}.grow-rotate{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.grow-rotate:hover{-webkit-transform:scale(1.1) rotate(4deg);-ms-transform:scale(1.1) rotate(4deg);transform:scale(1.1) rotate(4deg)}.float{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.float:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}.sink{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.sink:hover{-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px)}@-webkit-keyframes hover{50%{-webkit-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}}@keyframes hover{50%{-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}}.hover{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hover:hover{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}@-webkit-keyframes hang{50%{-webkit-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);transform:translateY(6px)}}@keyframes hang{50%{-webkit-transform:translateY(3px);-ms-transform:translateY(3px);transform:translateY(3px)}100%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)}}.hang{display:inline-block;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hang:hover{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hang;animation-name:hang;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.skew{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew:hover{-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg)}.skew-forward{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.skew-forward:hover{-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg)}@-webkit-keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes wobble-vertical{16.65%{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px)}33.3%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}49.95%{-webkit-transform:translateY(4px);-ms-transform:translateY(4px);transform:translateY(4px)}66.6%{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px)}83.25%{-webkit-transform:translateY(1px);-ms-transform:translateY(1px);transform:translateY(1px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.wobble-vertical{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-vertical:hover{-webkit-animation-name:wobble-vertical;animation-name:wobble-vertical;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes wobble-horizontal{16.65%{-webkit-transform:translateX(8px);-ms-transform:translateX(8px);transform:translateX(8px)}33.3%{-webkit-transform:translateX(-6px);-ms-transform:translateX(-6px);transform:translateX(-6px)}49.95%{-webkit-transform:translateX(4px);-ms-transform:translateX(4px);transform:translateX(4px)}66.6%{-webkit-transform:translateX(-2px);-ms-transform:translateX(-2px);transform:translateX(-2px)}83.25%{-webkit-transform:translateX(1px);-ms-transform:translateX(1px);transform:translateX(1px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.wobble-horizontal{display:inline-block;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-horizontal:hover{-webkit-animation-name:wobble-horizontal;animation-name:wobble-horizontal;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-top{16.65%{-webkit-transform:skew(-12deg);-ms-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);-ms-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);-ms-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);-ms-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);-ms-transform:skew(0);transform:skew(0)}}.wobble-top{display:inline-block;-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-top:hover{-webkit-animation-name:wobble-top;animation-name:wobble-top;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);transform:skew(0)}}@keyframes wobble-bottom{16.65%{-webkit-transform:skew(-12deg);-ms-transform:skew(-12deg);transform:skew(-12deg)}33.3%{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg)}49.95%{-webkit-transform:skew(-6deg);-ms-transform:skew(-6deg);transform:skew(-6deg)}66.6%{-webkit-transform:skew(4deg);-ms-transform:skew(4deg);transform:skew(4deg)}83.25%{-webkit-transform:skew(-2deg);-ms-transform:skew(-2deg);transform:skew(-2deg)}100%{-webkit-transform:skew(0);-ms-transform:skew(0);transform:skew(0)}}.wobble-bottom{display:inline-block;-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.wobble-bottom:hover{-webkit-animation-name:wobble-bottom;animation-name:wobble-bottom;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:1;animation-iteration-count:1}.border-fade{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #ececec,0 0 1px rgba(0,0,0,0)}.border-fade:hover{box-shadow:inset 0 0 0 4px #666,0 0 1px rgba(0,0,0,0)}.hollow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background;transition-property:background;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:inset 0 0 0 4px #ececec,0 0 1px rgba(0,0,0,0)}.hollow:hover{background:0 0}.trim{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.trim:before{content:'';position:absolute;border:#fff solid 4px;top:4px;left:4px;right:4px;bottom:4px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.trim:hover:before{opacity:1}.outline-outward{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.outline-outward:before{content:'';position:absolute;border:#ececec solid 4px;top:0;right:0;bottom:0;left:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top right bottom left;transition-property:top right bottom left}.outline-outward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px}.outline-inward{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.outline-inward:before{content:'';position:absolute;border:#ececec solid 4px;top:-16px;right:-16px;bottom:-16px;left:-16px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top right bottom left;transition-property:top right bottom left}.outline-inward:hover:before{top:-8px;right:-8px;bottom:-8px;left:-8px;opacity:1}.round-corners{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:border-radius;transition-property:border-radius;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.round-corners:hover{border-radius:1em}.glow{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.glow:hover{box-shadow:0 0 8px rgba(0,0,0,.6)}.box-shadow-outset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.box-shadow-outset:hover{box-shadow:2px 2px 2px rgba(0,0,0,.6)}.box-shadow-inset{display:inline-block;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow;box-shadow:inset 0 0 0 rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}.box-shadow-inset:hover{box-shadow:inset 2px 2px 2px rgba(0,0,0,.6),0 0 1px rgba(0,0,0,0)}.float-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.float-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform opacity;transition-property:transform opacity}.float-shadow:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}.float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);-ms-transform:translateY(5px);transform:translateY(5px)}@keyframes hover{50%{-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);transform:translateY(-3px)}100%{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}}@-webkit-keyframes hover-shadow{0%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);transform:translateY(6px);opacity:.4}}@keyframes hover-shadow{0%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);opacity:.4}50%{-webkit-transform:translateY(3px);-ms-transform:translateY(3px);transform:translateY(3px);opacity:1}100%{-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);opacity:.4}}.hover-shadow{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.hover-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform opacity;transition-property:transform opacity}.hover-shadow:hover{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-name:hover;animation-name:hover;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.hover-shadow:hover:before{opacity:.4;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px);-webkit-animation-name:hover-shadow;animation-name:hover-shadow;-webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}.shadow-radial{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.shadow-radial:after,.shadow-radial:before{pointer-events:none;position:absolute;content:'';left:0;width:100%;-moz-box-sizing:border-box;box-sizing:border-box;height:5px;opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:opacity;transition-property:opacity}.shadow-radial:before{bottom:100%;background:-webkit-radial-gradient(50% 150%,ellipse,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at 50% 150%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:after{top:100%;background:-webkit-radial-gradient(50% -50%,ellipse,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%);background:radial-gradient(ellipse at 50% -50%,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 80%)}.shadow-radial:hover:after,.shadow-radial:hover:before{opacity:1}.bubble-top{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;left:-webkit-calc(50% - 10px);left:calc(50% - 10px);border-width:0 10px 10px;border-color:transparent transparent #ececec;-webkit-transition-property:top;transition-property:top}.bubble-top:hover:before{top:-10px}.bubble-right{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-right:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);right:0;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #ececec}.bubble-right:hover:before{right:-10px}.bubble-bottom{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom;left:-webkit-calc(50% - 10px);left:calc(50% - 10px);bottom:0;border-width:10px 10px 0;border-color:#ececec transparent transparent}.bubble-bottom:hover:before{bottom:-10px}.bubble-left{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';border-style:solid;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);left:0;border-width:10px 10px 10px 0;border-color:transparent #ececec transparent transparent}.bubble-left:hover:before{left:-10px}.bubble-float-top{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-top:before{pointer-events:none;position:absolute;z-index:-1;content:'';left:-webkit-calc(50% - 10px);left:calc(50% - 10px);top:0;border-style:solid;border-width:0 10px 10px;border-color:transparent transparent #ececec;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:top;transition-property:top}.bubble-float-top:hover{-webkit-transform:translateY(5px) translateZ(0);-ms-transform:translateY(5px) translateZ(0);transform:translateY(5px) translateZ(0)}.bubble-float-top:hover:before{top:-10px}.bubble-float-right{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-right:before{pointer-events:none;position:absolute;z-index:-1;top:-webkit-calc(50% - 10px);top:calc(50% - 10px);right:0;content:'';border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #ececec;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:right;transition-property:right}.bubble-float-right:hover{-webkit-transform:translateX(-5px);-ms-transform:translateX(-5px);transform:translateX(-5px)}.bubble-float-right:hover:before{right:-10px}.bubble-float-bottom{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-bottom:before{pointer-events:none;position:absolute;z-index:-1;content:'';left:-webkit-calc(50% - 10px);left:calc(50% - 10px);bottom:0;border-style:solid;border-width:10px 10px 0;border-color:#ececec transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:bottom;transition-property:bottom}.bubble-float-bottom:hover{-webkit-transform:translateY(-5px) translateZ(0);-ms-transform:translateY(-5px) translateZ(0);transform:translateY(-5px) translateZ(0)}.bubble-float-bottom:hover:before{bottom:-10px}.bubble-float-left{display:inline-block;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:-webkit-transform;transition-property:transform;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.bubble-float-left:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:-webkit-calc(50% - 10px);top:calc(50% - 10px);left:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #ececec transparent transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left;transition-property:left}.bubble-float-left:hover{-webkit-transform:translateX(5px);-ms-transform:translateX(5px);transform:translateX(5px)}.bubble-float-left:hover:before{left:-10px}.curl-top-left{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-top-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;left:0;background:#fff;background:-webkit-linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#000000');z-index:1000;box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-top-left:hover:before{width:25px;height:25px}.curl-top-right{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-top-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;top:0;right:0;background:#fff;background:-webkit-linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(225deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px 1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-top-right:hover:before{width:25px;height:25px}.curl-bottom-right{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-bottom-right:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;right:0;background:#fff;background:-webkit-linear-gradient(135deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(315deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:-1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-bottom-right:hover:before{width:25px;height:25px}.curl-bottom-left{display:inline-block;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0)}.curl-bottom-left:before{pointer-events:none;position:absolute;content:'';height:0;width:0;bottom:0;left:0;background:#fff;background:-webkit-linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);background:linear-gradient(45deg,#fff 45%,#aaa 50%,#ccc 56%,#fff 80%);box-shadow:1px -1px 1px rgba(0,0,0,.4);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:width height;transition-property:width height}.curl-bottom-left:hover:before{width:25px;height:25px} \ No newline at end of file diff --git a/css/hover.css b/css/hover.css new file mode 100644 index 0000000..c6c0369 --- /dev/null +++ b/css/hover.css @@ -0,0 +1,1812 @@ +/* + * Hover.css (http://ianlunn.co.uk/) + * Version: 1.0 + * Author: Ian Lunn @IanLunn + * Author URL: http://ianlunn.co.uk/ + * Github: https://github.com/IanLunn/Hover + + * Made available under a MIT License: + * http://www.opensource.org/licenses/mit-license.php + + * Hover.css Copyright Ian Lunn 2014. + */ + +/* Default styles for the demo buttons */ + +.button { + margin: .4em; + padding: 1em; + cursor: pointer; + background: #ececec; + text-decoration: none; + color: #666666; +} + +/* 2D TRANSITIONS */ + +/* Grow */ + +.grow { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.grow:hover { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); +} + +/* Shrink */ + +.shrink { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.shrink:hover { + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); +} + +/* Pulse */ + +@-webkit-keyframes pulse { + 25% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + + 75% { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} + +@keyframes pulse { + 25% { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } + + 75% { + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); + } +} + +.pulse { + display: inline-block; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.pulse:hover { + -webkit-animation-name: pulse; + animation-name: pulse; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +/* Pulse Grow */ + +@-webkit-keyframes pulse-grow { + to { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } +} + +@keyframes pulse-grow { + to { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + } +} + +.pulse-grow { + display: inline-block; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.pulse-grow:hover { + -webkit-animation-name: pulse-grow; + animation-name: pulse-grow; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +/* Pulse Shrink */ + +@-webkit-keyframes pulse-shrink { + to { + -webkit-transform: scale(0.9); + transform: scale(0.9); + } +} + +@keyframes pulse-shrink { + to { + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); + } +} + +.pulse-shrink { + display: inline-block; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.pulse-shrink:hover { + -webkit-animation-name: pulse-shrink; + animation-name: pulse-shrink; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +/* Push */ + +@-webkit-keyframes push { + 50% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes push { + 50% { + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + } + + 100% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +.push { + display: inline-block; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.push:hover { + -webkit-animation-name: push; + animation-name: push; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Pop */ + +@-webkit-keyframes pop { + 50% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes pop { + 50% { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); + } + + 100% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +.pop { + display: inline-block; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.pop:hover { + -webkit-animation-name: pop; + animation-name: pop; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Rotate */ + +.rotate { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.rotate:hover { + -webkit-transform: rotate(4deg); + -ms-transform: rotate(4deg); + transform: rotate(4deg); +} + +/* Grow Rotate */ + +.grow-rotate { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.grow-rotate:hover { + -webkit-transform: scale(1.1) rotate(4deg); + -ms-transform: scale(1.1) rotate(4deg); + transform: scale(1.1) rotate(4deg); +} + +/* Float */ + +.float { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.float:hover { + -webkit-transform: translateY(-5px); + -ms-transform: translateY(-5px); + transform: translateY(-5px); +} + +/* Sink */ + +.sink { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.sink:hover { + -webkit-transform: translateY(5px); + -ms-transform: translateY(5px); + transform: translateY(5px); +} + +/* Hover */ + +@-webkit-keyframes hover { + 50% { + -webkit-transform: translateY(-3px); + transform: translateY(-3px); + } + + 100% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } +} + +@keyframes hover { + 50% { + -webkit-transform: translateY(-3px); + -ms-transform: translateY(-3px); + transform: translateY(-3px); + } + + 100% { + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + } +} + +.hover { + display: inline-block; + -webkit-transition-duration: .5s; + transition-duration: .5s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.hover:hover { + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + -webkit-animation-name: hover; + animation-name: hover; + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +/* Hang */ + +@-webkit-keyframes hang { + 50% { + -webkit-transform: translateY(3px); + transform: translateY(3px); + } + + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + } +} + +@keyframes hang { + 50% { + -webkit-transform: translateY(3px); + -ms-transform: translateY(3px); + transform: translateY(3px); + } + + 100% { + -webkit-transform: translateY(6px); + -ms-transform: translateY(6px); + transform: translateY(6px); + } +} + +.hang { + display: inline-block; + -webkit-transition-duration: .5s; + transition-duration: .5s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.hang:hover { + -webkit-transform: translateY(6px); + -ms-transform: translateY(6px); + transform: translateY(6px); + -webkit-animation-name: hang; + animation-name: hang; + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +/* Skew */ + +.skew { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.skew:hover { + -webkit-transform: skew(-10deg); + -ms-transform: skew(-10deg); + transform: skew(-10deg); +} + +/* Skew Forward */ + +.skew-forward { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-transform-origin: 0 100%; + -ms-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.skew-forward:hover { + -webkit-transform: skew(-10deg); + -ms-transform: skew(-10deg); + transform: skew(-10deg); +} + +/* Wobble Vertical */ + +@-webkit-keyframes wobble-vertical { + 16.65% { + -webkit-transform: translateY(8px); + transform: translateY(8px); + } + + 33.3% { + -webkit-transform: translateY(-6px); + transform: translateY(-6px); + } + + 49.95% { + -webkit-transform: translateY(4px); + transform: translateY(4px); + } + + 66.6% { + -webkit-transform: translateY(-2px); + transform: translateY(-2px); + } + + 83.25% { + -webkit-transform: translateY(1px); + transform: translateY(1px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes wobble-vertical { + 16.65% { + -webkit-transform: translateY(8px); + -ms-transform: translateY(8px); + transform: translateY(8px); + } + + 33.3% { + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + } + + 49.95% { + -webkit-transform: translateY(4px); + -ms-transform: translateY(4px); + transform: translateY(4px); + } + + 66.6% { + -webkit-transform: translateY(-2px); + -ms-transform: translateY(-2px); + transform: translateY(-2px); + } + + 83.25% { + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); + } + + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +.wobble-vertical { + display: inline-block; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.wobble-vertical:hover { + -webkit-animation-name: wobble-vertical; + animation-name: wobble-vertical; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Wobble Horizontal */ + +@-webkit-keyframes wobble-horizontal { + 16.65% { + -webkit-transform: translateX(8px); + transform: translateX(8px); + } + + 33.3% { + -webkit-transform: translateX(-6px); + transform: translateX(-6px); + } + + 49.95% { + -webkit-transform: translateX(4px); + transform: translateX(4px); + } + + 66.6% { + -webkit-transform: translateX(-2px); + transform: translateX(-2px); + } + + 83.25% { + -webkit-transform: translateX(1px); + transform: translateX(1px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes wobble-horizontal { + 16.65% { + -webkit-transform: translateX(8px); + -ms-transform: translateX(8px); + transform: translateX(8px); + } + + 33.3% { + -webkit-transform: translateX(-6px); + -ms-transform: translateX(-6px); + transform: translateX(-6px); + } + + 49.95% { + -webkit-transform: translateX(4px); + -ms-transform: translateX(4px); + transform: translateX(4px); + } + + 66.6% { + -webkit-transform: translateX(-2px); + -ms-transform: translateX(-2px); + transform: translateX(-2px); + } + + 83.25% { + -webkit-transform: translateX(1px); + -ms-transform: translateX(1px); + transform: translateX(1px); + } + + 100% { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } +} + +.wobble-horizontal { + display: inline-block; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.wobble-horizontal:hover { + -webkit-animation-name: wobble-horizontal; + animation-name: wobble-horizontal; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Wobble Top */ + +@-webkit-keyframes wobble-top { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} + +@keyframes wobble-top { + 16.65% { + -webkit-transform: skew(-12deg); + -ms-transform: skew(-12deg); + transform: skew(-12deg); + } + + 33.3% { + -webkit-transform: skew(10deg); + -ms-transform: skew(10deg); + transform: skew(10deg); + } + + 49.95% { + -webkit-transform: skew(-6deg); + -ms-transform: skew(-6deg); + transform: skew(-6deg); + } + + 66.6% { + -webkit-transform: skew(4deg); + -ms-transform: skew(4deg); + transform: skew(4deg); + } + + 83.25% { + -webkit-transform: skew(-2deg); + -ms-transform: skew(-2deg); + transform: skew(-2deg); + } + + 100% { + -webkit-transform: skew(0); + -ms-transform: skew(0); + transform: skew(0); + } +} + +.wobble-top { + display: inline-block; + -webkit-transform-origin: 0 100%; + -ms-transform-origin: 0 100%; + transform-origin: 0 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.wobble-top:hover { + -webkit-animation-name: wobble-top; + animation-name: wobble-top; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* Wobble Bottom */ + +@-webkit-keyframes wobble-bottom { + 16.65% { + -webkit-transform: skew(-12deg); + transform: skew(-12deg); + } + + 33.3% { + -webkit-transform: skew(10deg); + transform: skew(10deg); + } + + 49.95% { + -webkit-transform: skew(-6deg); + transform: skew(-6deg); + } + + 66.6% { + -webkit-transform: skew(4deg); + transform: skew(4deg); + } + + 83.25% { + -webkit-transform: skew(-2deg); + transform: skew(-2deg); + } + + 100% { + -webkit-transform: skew(0); + transform: skew(0); + } +} + +@keyframes wobble-bottom { + 16.65% { + -webkit-transform: skew(-12deg); + -ms-transform: skew(-12deg); + transform: skew(-12deg); + } + + 33.3% { + -webkit-transform: skew(10deg); + -ms-transform: skew(10deg); + transform: skew(10deg); + } + + 49.95% { + -webkit-transform: skew(-6deg); + -ms-transform: skew(-6deg); + transform: skew(-6deg); + } + + 66.6% { + -webkit-transform: skew(4deg); + -ms-transform: skew(4deg); + transform: skew(4deg); + } + + 83.25% { + -webkit-transform: skew(-2deg); + -ms-transform: skew(-2deg); + transform: skew(-2deg); + } + + 100% { + -webkit-transform: skew(0); + -ms-transform: skew(0); + transform: skew(0); + } +} + +.wobble-bottom { + display: inline-block; + -webkit-transform-origin: 100% 0; + -ms-transform-origin: 100% 0; + transform-origin: 100% 0; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.wobble-bottom:hover { + -webkit-animation-name: wobble-bottom; + animation-name: wobble-bottom; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +/* BORDER TRANSITIONS */ + +/* Border Fade */ + +.border-fade { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +.border-fade:hover { + box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +/* Hollow */ + +.hollow { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: background; + transition-property: background; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + /* Hack to improve performance on mobile/tablet devices */ + box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +.hollow:hover { + background: none; +} + +/* Trim */ + +.trim { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.trim:before { + content: ''; + position: absolute; + border: white solid 4px; + top: 4px; + left: 4px; + right: 4px; + bottom: 4px; + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: opacity; + transition-property: opacity; +} + +.trim:hover:before { + opacity: 1; +} + +/* Outline Outward */ + +.outline-outward { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.outline-outward:before { + content: ''; + position: absolute; + border: #ececec solid 4px; + top: 0; + right: 0; + bottom: 0; + left: 0; + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-property: top right bottom left; + transition-property: top right bottom left; +} + +.outline-outward:hover:before { + top: -8px; + right: -8px; + bottom: -8px; + left: -8px; +} + +/* Outline Inward */ + +.outline-inward { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.outline-inward:before { + content: ''; + position: absolute; + border: #ececec solid 4px; + top: -16px; + right: -16px; + bottom: -16px; + left: -16px; + opacity: 0; + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transition-property: top right bottom left; + transition-property: top right bottom left; +} + +.outline-inward:hover:before { + top: -8px; + right: -8px; + bottom: -8px; + left: -8px; + opacity: 1; +} + +/* Round Corners */ + +.round-corners { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: border-radius; + transition-property: border-radius; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.round-corners:hover { + border-radius: 1em; +} + +/* SHADOW/GLOW TRANSITIONS */ + +/* Glow */ + +.glow { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.glow:hover { + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); +} + +/* Box Shadow Outset */ + +.box-shadow-outset { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.box-shadow-outset:hover { + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); +} + +/* Box Shadow Inset */ + +.box-shadow-inset { + display: inline-block; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: box-shadow; + transition-property: box-shadow; + box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); +} + +.box-shadow-inset:hover { + box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0); + /* Hack to improve aliasing on mobile/tablet devices */ +} + +/* Float Shadow */ + +.float-shadow { + display: inline-block; + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.float-shadow:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + /* W3C */ + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform opacity; + transition-property: transform opacity; +} + +.float-shadow:hover { + -webkit-transform: translateY(-5px); + -ms-transform: translateY(-5px); + transform: translateY(-5px); + /* move the element up by 5px */ +} + +.float-shadow:hover:before { + opacity: 1; + -webkit-transform: translateY(5px); + -ms-transform: translateY(5px); + transform: translateY(5px); + /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ +} + +/* Hover Shadow */ + +@keyframes hover { + 50% { + -webkit-transform: translateY(-3px); + -ms-transform: translateY(-3px); + transform: translateY(-3px); + } + + 100% { + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + } +} + +@-webkit-keyframes hover-shadow { + 0% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + opacity: .4; + } + + 50% { + -webkit-transform: translateY(3px); + transform: translateY(3px); + opacity: 1; + } + + 100% { + -webkit-transform: translateY(6px); + transform: translateY(6px); + opacity: .4; + } +} + +@keyframes hover-shadow { + 0% { + -webkit-transform: translateY(6px); + -ms-transform: translateY(6px); + transform: translateY(6px); + opacity: .4; + } + + 50% { + -webkit-transform: translateY(3px); + -ms-transform: translateY(3px); + transform: translateY(3px); + opacity: 1; + } + + 100% { + -webkit-transform: translateY(6px); + -ms-transform: translateY(6px); + transform: translateY(6px); + opacity: .4; + } +} + +.hover-shadow { + display: inline-block; + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.hover-shadow:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%); + /* W3C */ + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform opacity; + transition-property: transform opacity; +} + +.hover-shadow:hover { + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + -webkit-animation-name: hover; + animation-name: hover; + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +.hover-shadow:hover:before { + opacity: .4; + -webkit-transform: translateY(6px); + -ms-transform: translateY(6px); + transform: translateY(6px); + -webkit-animation-name: hover-shadow; + animation-name: hover-shadow; + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -webkit-animation-delay: .3s; + animation-delay: .3s; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-direction: alternate; + animation-direction: alternate; +} + +/* Shadow Radial */ + +.shadow-radial { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.shadow-radial:before, +.shadow-radial:after { + pointer-events: none; + position: absolute; + content: ''; + left: 0; + width: 100%; + -moz-box-sizing: border-box; + box-sizing: border-box; + background-repeat: no-repeat; + height: 5px; + opacity: 0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: opacity; + transition-property: opacity; +} + +.shadow-radial:before { + bottom: 100%; + background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); +} + +.shadow-radial:after { + top: 100%; + background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); + background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%); +} + +.shadow-radial:hover:before, +.shadow-radial:hover:after { + opacity: 1; +} + +/* SPEECH BUBBLES */ + +/* Bubble Top */ + +.bubble-top { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.bubble-top:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + left: -webkit-calc(50% - 10px); + left: calc(50% - 10px); + border-width: 0 10px 10px 10px; + border-color: transparent transparent #ececec transparent; + -webkit-transition-property: top; + transition-property: top; +} + +.bubble-top:hover:before { + top: -10px; +} + +/* Bubble Right */ + +.bubble-right { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.bubble-right:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: right; + transition-property: right; + top: -webkit-calc(50% - 10px); + top: calc(50% - 10px); + right: 0; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent #ececec; +} + +.bubble-right:hover:before { + right: -10px; +} + +/* Bubble Bottom */ + +.bubble-bottom { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.bubble-bottom:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: bottom; + transition-property: bottom; + left: -webkit-calc(50% - 10px); + left: calc(50% - 10px); + bottom: 0; + border-width: 10px 10px 0 10px; + border-color: #ececec transparent transparent transparent; +} + +.bubble-bottom:hover:before { + bottom: -10px; +} + +/* Bubble Left */ + +.bubble-left { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.bubble-left:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: left; + transition-property: left; + top: -webkit-calc(50% - 10px); + top: calc(50% - 10px); + left: 0; + border-width: 10px 10px 10px 0; + border-color: transparent #ececec transparent transparent; +} + +.bubble-left:hover:before { + left: -10px; +} + +/* Bubble Float Top */ + +.bubble-float-top { + display: inline-block; + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.bubble-float-top:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + left: -webkit-calc(50% - 10px); + left: calc(50% - 10px); + top: 0; + border-style: solid; + border-width: 0 10px 10px 10px; + border-color: transparent transparent #ececec transparent; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: top; + transition-property: top; +} + +.bubble-float-top:hover { + -webkit-transform: translateY(5px) translateZ(0); + -ms-transform: translateY(5px) translateZ(0); + transform: translateY(5px) translateZ(0); +} + +.bubble-float-top:hover:before { + top: -10px; +} + +/* Bubble Float Right */ + +.bubble-float-right { + display: inline-block; + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.bubble-float-right:before { + pointer-events: none; + position: absolute; + z-index: -1; + top: -webkit-calc(50% - 10px); + top: calc(50% - 10px); + right: 0; + content: ''; + border-style: solid; + border-width: 10px 0 10px 10px; + border-color: transparent transparent transparent #ececec; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: right; + transition-property: right; +} + +.bubble-float-right:hover { + -webkit-transform: translateX(-5px); + -ms-transform: translateX(-5px); + transform: translateX(-5px); +} + +.bubble-float-right:hover:before { + right: -10px; +} + +/* Bubble Float Bottom */ + +.bubble-float-bottom { + display: inline-block; + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.bubble-float-bottom:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + left: -webkit-calc(50% - 10px); + left: calc(50% - 10px); + bottom: 0; + border-style: solid; + border-width: 10px 10px 0 10px; + border-color: #ececec transparent transparent transparent; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: bottom; + transition-property: bottom; +} + +.bubble-float-bottom:hover { + -webkit-transform: translateY(-5px) translateZ(0); + -ms-transform: translateY(-5px) translateZ(0); + transform: translateY(-5px) translateZ(0); +} + +.bubble-float-bottom:hover:before { + bottom: -10px; +} + +/* Bubble Float Left */ + +.bubble-float-left { + display: inline-block; + position: relative; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.bubble-float-left:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: -webkit-calc(50% - 10px); + top: calc(50% - 10px); + left: 0; + border-style: solid; + border-width: 10px 10px 10px 0; + border-color: transparent #ececec transparent transparent; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: left; + transition-property: left; +} + +.bubble-float-left:hover { + -webkit-transform: translateX(5px); + -ms-transform: translateX(5px); + transform: translateX(5px); +} + +.bubble-float-left:hover:before { + left: -10px; +} + +/* CURLS */ + +/* Curl Top Left */ + +.curl-top-left { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.curl-top-left:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + left: 0; + background: white; + /* IE9 */ + background: -webkit-linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); + background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000'); + /*For IE7-8-9*/ + z-index: 1000; + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width height; + transition-property: width height; +} + +.curl-top-left:hover:before { + width: 25px; + height: 25px; +} + +/* Curl Top Right */ + +.curl-top-right { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.curl-top-right:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + right: 0; + background: white; + /* IE9 */ + background: -webkit-linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); + background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); + box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width height; + transition-property: width height; +} + +.curl-top-right:hover:before { + width: 25px; + height: 25px; +} + +/* Curl Bottom Right */ + +.curl-bottom-right { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.curl-bottom-right:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + right: 0; + background: white; + /* IE9 */ + background: -webkit-linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); + background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); + box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width height; + transition-property: width height; +} + +.curl-bottom-right:hover:before { + width: 25px; + height: 25px; +} + +/* Curl Bottom Left */ + +.curl-bottom-left { + display: inline-block; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + +.curl-bottom-left:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + left: 0; + background: white; + /* IE9 */ + background: -webkit-linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); + background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%); + box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-property: width height; + transition-property: width height; +} + +.curl-bottom-left:hover:before { + width: 25px; + height: 25px; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..5839000 --- /dev/null +++ b/index.html @@ -0,0 +1,134 @@ + + + + + Hover.css + + + + + +

Hover.css

+

A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.

+ +

+ Download on GitHub +
+ +
+ +

2D Transforms

+ + Grow + Shrink + Pulse + Pulse Grow + Pulse Shrink + Push + Pop + Rotate + Grow Rotate + Float + Sink + Hover + Hang + Skew + Skew Forward + Wobble Horizontal + Wobble Vertical + Wobble Top + Wobble Bottom + + + +

Border Transitions

+ + Border Fade + Hollow + Trim + Outline Outward + Outline Inward + Round Corners + + + +

Shadow and Glow Transitions

+ + Glow + Box Shadow Outset + Box Shadow Inset + Float Shadow + Hover Shadow + Shadow Radial + + + +

Speech Bubbles

+ + Bubble Top + Bubble Right + Bubble Bottom + Bubble Left + Bubble Float Top + Bubble Float Right + Bubble Float Bottom + Bubble Float Left + + + +

Curls

+ + Curl Top Left + Curl Top Right + Curl Bottom Right + Curl Bottom Left + +
+ + +
+
+

About Hover.css

+ +

All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS and SASS flavours.

+ +

For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, please read the FAQ.

+ +

Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.

+ +

License

+ +

hover.css is open source, and made available under a MIT License. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files. + +

Placing author information in your stylesheet, credits page or humans.txt is much appreciated.

+
+ +
+ + + + + + + +
+ +
+ +

Created by Ian Lunn - Front End Web Developer

+
+ +
+ + + \ No newline at end of file diff --git a/license.txt b/license.txt new file mode 100644 index 0000000..1e54d37 --- /dev/null +++ b/license.txt @@ -0,0 +1,9 @@ +The MIT License (MIT) + +Copyright (c) 2014 Ian Lunn + +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. \ No newline at end of file diff --git a/logo-transparent.png b/logo-transparent.png new file mode 100644 index 0000000..7eecc29 Binary files /dev/null and b/logo-transparent.png differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..38e1479 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "Hover.css", + "version": "0.1.0", + "author": "Ian Lunn", + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-sass": "~0.6.0", + "grunt-contrib-watch": "~0.5.3", + "grunt-autoprefixer": "~0.4.1", + "grunt-contrib-cssmin": "~0.7.0", + "grunt-contrib-connect": "~0.5.0" + }, + "dependencies": { + "load-grunt-tasks": "~0.2.0" + } +} diff --git a/scss/hover.scss b/scss/hover.scss new file mode 100644 index 0000000..fdfb11b --- /dev/null +++ b/scss/hover.scss @@ -0,0 +1,1342 @@ +/* + * Hover.css (http://ianlunn.co.uk/) + * Version: 1.0 + * Author: Ian Lunn @IanLunn + * Author URL: http://ianlunn.co.uk/ + * Github: https://github.com/IanLunn/Hover + + * Made available under a MIT License: + * http://www.opensource.org/licenses/mit-license.php + + * Hover.css Copyright Ian Lunn 2014. + */ + + +// Default options +$defaultDuration: .3s; +$primaryColour: #ececec; +$secondaryColour: #666; +$shadowColour: rgba(0, 0, 0, .6); + + + +// As is often the case, some devices/browsers need additional code to get CSS to work +// in the most desired way. These mixins are used to quickly drop in hacks for each element +@mixin hideTapHighlightColor() { + //Prevent highlight colour when element is tapped + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +@mixin hardwareAccel() { + //Improve performance on mobile/tablet devices + transform: translateZ(0); +} + +@mixin improveAntiAlias() { + //Improve aliasing on mobile/tablet devices + box-shadow: 0 0 1px rgba(0, 0, 0, 0); +} + + + +/* Default styles for the demo buttons */ +.button { + margin: .4em; + padding: 1em; + cursor: pointer; + background: $primaryColour; + text-decoration: none; + color: $secondaryColour; +} + + +/* 2D TRANSITIONS */ + +/* Grow */ +.grow { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: scale(1.1); + } +} + + +/* Shrink */ +.shrink { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: scale(.9); + } +} + + +/* Pulse */ +@keyframes pulse { + 25% { + transform: scale(1.1); + } + + 75% { + transform: scale(.9); + } +} + +.pulse { + display: inline-block; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + animation-name: pulse; + animation-duration: 1s; + animation-timing-function: linear; + animation-iteration-count: infinite; + } +} + + +/* Pulse Grow */ +@keyframes pulse-grow { + to { + transform: scale(1.1); + } +} + +.pulse-grow { + display: inline-block; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + animation-name: pulse-grow; + animation-duration: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } +} + + +/* Pulse Shrink */ +@keyframes pulse-shrink { + to { + transform: scale(.9); + } +} + +.pulse-shrink { + display: inline-block; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + animation-name: pulse-shrink; + animation-duration: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } +} + + +/* Push */ +@keyframes push { + 50% { + transform: scale(.8); + } + + 100% { + transform: scale(1); + } +} + +.push { + display: inline-block; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + animation-name: push; + animation-duration: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: 1; + } +} + + +/* Pop */ +@keyframes pop { + 50% { + transform: scale(1.2); + } + + 100% { + transform: scale(1); + } +} + +.pop { + display: inline-block; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + animation-name: pop; + animation-duration: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: 1; + } +} + + +/* Rotate */ +.rotate { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: rotate(4deg); + } +} + + +/* Grow Rotate */ +.grow-rotate { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: scale(1.1) rotate(4deg); + } +} + + +/* Float */ +.float { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: translateY(-5px); + } +} + + +/* Sink */ +.sink { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: translateY(5px); + } +} + + +/* Hover */ +@keyframes hover { + 50% { + transform: translateY(-3px); + } + + 100% { + transform: translateY(-6px); + } +} + +.hover { + display: inline-block; + transition-duration: .5s; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: translateY(-6px); + animation-name: hover; + animation-duration: 1.5s; + animation-delay: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } +} + + +/* Hang */ +@keyframes hang { + 50% { + transform: translateY(3px); + } + + 100% { + transform: translateY(6px); + } +} + +.hang { + display: inline-block; + transition-duration: .5s; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: translateY(6px); + animation-name: hang; + animation-duration: 1.5s; + animation-delay: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } +} + + +/* Skew */ +.skew { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: skew(-10deg); + } +} + + +/* Skew Forward */ +.skew-forward { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: transform; + transform-origin: 0 100%; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + transform: skew(-10deg); + } +} + + +/* Wobble Vertical */ +@keyframes wobble-vertical { + 16.65% { + transform: translateY(8px); + } + + 33.3% { + transform: translateY(-6px); + } + + 49.95% { + transform: translateY(4px); + } + + 66.6% { + transform: translateY(-2px); + } + + 83.25% { + transform: translateY(1px); + } + + 100% { + transform: translateY(0); + } +} + +.wobble-vertical { + display: inline-block; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + animation-name: wobble-vertical; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + } +} + + +/* Wobble Horizontal */ +@keyframes wobble-horizontal { + 16.65% { + transform: translateX(8px); + } + + 33.3% { + transform: translateX(-6px); + } + + 49.95% { + transform: translateX(4px); + } + + 66.6% { + transform: translateX(-2px); + } + + 83.25% { + transform: translateX(1px); + } + + 100% { + transform: translateX(0); + } +} + +.wobble-horizontal { + display: inline-block; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + animation-name: wobble-horizontal; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + } +} + + +/* Wobble Top */ +@keyframes wobble-top { + 16.65% { + transform: skew(-12deg); + } + + 33.3% { + transform: skew(10deg); + } + + 49.95% { + transform: skew(-6deg); + } + + 66.6% { + transform: skew(4deg); + } + + 83.25% { + transform: skew(-2deg); + } + + 100% { + transform: skew(0); + } +} + +.wobble-top { + display: inline-block; + transform-origin: 0 100%; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + animation-name: wobble-top; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + } +} + + +/* Wobble Bottom */ +@keyframes wobble-bottom { + 16.65% { + transform: skew(-12deg); + } + + 33.3% { + transform: skew(10deg); + } + + 49.95% { + transform: skew(-6deg); + } + + 66.6% { + transform: skew(4deg); + } + + 83.25% { + transform: skew(-2deg); + } + + 100% { + transform: skew(0); + } +} + +.wobble-bottom { + display: inline-block; + transform-origin: 100% 0; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + animation-name: wobble-bottom; + animation-duration: 1s; + animation-timing-function: ease-in-out; + animation-iteration-count: 1; + } +} + + + + +/* BORDER TRANSITIONS */ + +/* Border Fade */ +.border-fade { + display: inline-block; + $borderWidth: 4px; + + transition-duration: $defaultDuration; + transition-property: box-shadow; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + box-shadow: + inset 0 0 0 $borderWidth $primaryColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + + &:hover { + box-shadow: + inset 0 0 0 $borderWidth $secondaryColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + } +} + + +/* Hollow */ +.hollow { + display: inline-block; + $borderWidth: 4px; + + transition-duration: $defaultDuration; + transition-property: background; + + transform: translateZ(0); /* Hack to improve performance on mobile/tablet devices */ + box-shadow: + inset 0 0 0 $borderWidth $primaryColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + + &:hover { + background: none; + } +} + + +/* Trim */ +.trim { + display: inline-block; + $outerBorderWidth: 4px; + $innerBorderWidth: 4px; + + position: relative; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + content: ''; + position: absolute; + border: white solid $innerBorderWidth; + top: $outerBorderWidth; + left: $outerBorderWidth; + right: $outerBorderWidth; + bottom: $outerBorderWidth; + opacity: 0; + transition-duration: $defaultDuration; + transition-property: opacity; + } + + &:hover:before { + opacity: 1; + } +} + + +/* Outline Outward */ +.outline-outward { + display: inline-block; + $outerBorderWidth: 4px; + $innerBorderWidth: 4px; + + position: relative; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + content: ''; + position: absolute; + border: $primaryColour solid $outerBorderWidth; + top: 0; + right: 0; + bottom: 0; + left: 0; + transition-duration: .3s; + transition-property: top right bottom left; + } + + &:hover:before { + top: -($outerBorderWidth + $innerBorderWidth); + right: -($outerBorderWidth + $innerBorderWidth); + bottom: -($outerBorderWidth + $innerBorderWidth); + left: -($outerBorderWidth + $innerBorderWidth); + } +} + + +/* Outline Inward */ +.outline-inward { + display: inline-block; + $outerBorderWidth: 4px; + $innerBorderWidth: 4px; + + position: relative; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + content: ''; + position: absolute; + border: $primaryColour solid $outerBorderWidth; + top: -($outerBorderWidth + $innerBorderWidth) * 2; + right: -($outerBorderWidth + $innerBorderWidth) * 2; + bottom: -($outerBorderWidth + $innerBorderWidth) * 2; + left: -($outerBorderWidth + $innerBorderWidth) * 2; + opacity: 0; + transition-duration: .3s; + transition-property: top right bottom left; + } + + &:hover:before { + top: -($outerBorderWidth + $innerBorderWidth); + right: -($outerBorderWidth + $innerBorderWidth); + bottom: -($outerBorderWidth + $innerBorderWidth); + left: -($outerBorderWidth + $innerBorderWidth); + opacity: 1; + } +} + + +/* Round Corners */ +.round-corners { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: border-radius; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + border-radius: 1em; + } +} + + + + +/* SHADOW/GLOW TRANSITIONS */ + +/* Glow */ +.glow { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: box-shadow; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + box-shadow: 0 0 8px $shadowColour; + } +} + + +/* Box Shadow Outset */ +.box-shadow-outset { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: box-shadow; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:hover { + box-shadow: 2px 2px 2px $shadowColour; + } +} + + +/* Box Shadow Inset */ +.box-shadow-inset { + display: inline-block; + transition-duration: $defaultDuration; + transition-property: box-shadow; + + box-shadow: inset 0 0 0 $shadowColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + + @include hideTapHighlightColor(); + @include hardwareAccel(); + + &:hover { + box-shadow: inset 2px 2px 2px $shadowColour, + 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ + } +} + + +/* Float Shadow */ +.float-shadow { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */ + transition-duration: $defaultDuration; + transition-property: transform opacity; + } + + &:hover { + transform: translateY(-5px); /* move the element up by 5px */ + + &:before { + opacity: 1; + transform: translateY(5px); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */ + } + } +} + + +/* Hover Shadow */ +@keyframes hover { + 50% { + transform: translateY(-3px); + } + + 100% { + transform: translateY(-6px); + } +} + +@keyframes hover-shadow { + 0% { + transform: translateY(6px); + opacity: .4; + } + + 50% { + transform: translateY(3px); + opacity: 1; + } + + + 100% { + transform: translateY(6px); + opacity: .4; + } +} + +.hover-shadow { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: 100%; + left: 5%; + height: 10px; + width: 90%; + opacity: 0; + background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */ + transition-duration: $defaultDuration; + transition-property: transform opacity; + } + + &:hover { + transform: translateY(-6px); + animation-name: hover; + animation-duration: 1.5s; + animation-delay: $defaultDuration; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + + &:before { + opacity: .4; + transform: translateY(6px); + animation-name: hover-shadow; + animation-duration: 1.5s; + animation-delay: .3s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + } + } +} + + +/* Shadow Radial */ +.shadow-radial { + display: inline-block; + position: relative; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before, + &:after { + pointer-events: none; + position: absolute; + content: ''; + left: 0; + width: 100%; + box-sizing: border-box; + background-repeat: no-repeat; + height: 5px; + opacity: 0; + transition-duration: $defaultDuration; + transition-property: opacity; + } + + &:before { + bottom: 100%; + background: radial-gradient(ellipse at 50% 150%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%); + } + + &:after { + top: 100%; + background: radial-gradient(ellipse at 50% -50%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%); + } + + &:hover:before, + &:hover:after { + opacity: 1; + } +} + + + +/* SPEECH BUBBLES */ + +$tipWidth: 10px; //the width of the speech bubble tip +$tipHeight: 10px; //the height of the speech bubble tip +$tipColour: $primaryColour; + +/* Bubble Top */ +.bubble-top { + display: inline-block; + position: relative; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + transition-duration: $defaultDuration; + left: calc(50% - #{$tipWidth}); + border-width: 0 $tipWidth $tipHeight $tipWidth; + border-color: transparent transparent $tipColour transparent; + transition-property: top; + } + + &:hover:before { + top: -($tipHeight); + } +} + + +/* Bubble Right */ +.bubble-right { + display: inline-block; + position: relative; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + transition-duration: $defaultDuration; + transition-property: right; + top: calc(50% - #{$tipHeight}); + right: 0; + border-width: $tipHeight 0 $tipHeight $tipWidth; + border-color: transparent transparent transparent $tipColour ; + } + + &:hover:before { + right: -($tipWidth); + } +} + + +/* Bubble Bottom */ +.bubble-bottom { + display: inline-block; + position: relative; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + transition-duration: $defaultDuration; + transition-property: bottom; + left: calc(50% - #{$tipWidth}); + bottom: 0; + border-width: $tipHeight $tipWidth 0 $tipWidth; + border-color: $tipColour transparent transparent transparent; + } + + &:hover:before { + bottom: -($tipHeight); + } +} + + +/* Bubble Left */ +.bubble-left { + display: inline-block; + position: relative; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + border-style: solid; + transition-duration: $defaultDuration; + transition-property: left; + top: calc(50% - #{$tipHeight}); + left: 0; + border-width: $tipHeight $tipWidth $tipHeight 0; + border-color: transparent $tipColour transparent transparent; + } + + &:hover:before { + left: -($tipWidth); + } +} + + +/* Bubble Float Top */ +.bubble-float-top { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + left: calc(50% - #{$tipWidth}); + top: 0; + border-style: solid; + border-width: 0 $tipWidth $tipHeight $tipWidth; + border-color: transparent transparent $tipColour transparent; + transition-duration: $defaultDuration; + transition-property: top; + } + + + &:hover { + transform: translateY(5px) translateZ(0); + } + + &:hover:before { + top: -($tipHeight); + } +} + +/* Bubble Float Right */ +.bubble-float-right { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + top: calc(50% - #{$tipHeight}); + right: 0; + content: ''; + border-style: solid; + border-width: $tipHeight 0 $tipHeight $tipWidth; + border-color: transparent transparent transparent $tipColour; + transition-duration: $defaultDuration; + transition-property: right; + } + + &:hover { + transform: translateX(-5px); + } + + &:hover:before { + right: -($tipWidth); + } +} + + +/* Bubble Float Bottom */ +.bubble-float-bottom { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + left: calc(50% - #{$tipWidth}); + bottom: 0; + border-style: solid; + border-width: $tipHeight $tipWidth 0 $tipWidth; + border-color: $tipColour transparent transparent transparent; + transition-duration: $defaultDuration; + transition-property: bottom; + } + + &:hover { + transform: translateY(-5px) translateZ(0); + } + + &:hover:before { + bottom: -($tipHeight); + } +} + + +/* Bubble Float Left */ +.bubble-float-left { + display: inline-block; + position: relative; + transition-duration: $defaultDuration; + transition-property: transform; + + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + z-index: -1; + content: ''; + top: calc(50% - #{$tipHeight}); + left: 0; + border-style: solid; + border-width: $tipHeight $tipWidth $tipHeight 0; + border-color: transparent $tipColour transparent transparent; + transition-duration: $defaultDuration; + transition-property: left; + } + + &:hover { + transform: translateX(5px); + } + + &:hover:before { + left: -($tipWidth); + } +} + + + +/* CURLS */ + +// Curl dimensions +$curlWidth: 25px; +$curlHeight: 25px; + +// Curl colours +$revealAreaColour: white; // reveal area behind the curl +$curlLineColour: #aaa; // crease line +$curlTransitionColour: #ccc; // colour transitioning from crease line to final colour +$curlLastColour: white; // final colour of the back of the curl + + +/* Curl Top Left */ +.curl-top-left { + display: inline-block; + position: relative; + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + left: 0; + background: $revealAreaColour; /* IE9 */ + background: linear-gradient( + 135deg, + $revealAreaColour 45%, + $curlLineColour 50%, + $curlTransitionColour 56%, + $curlLastColour 80% + ); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ + + z-index: 1000; + box-shadow: 1px 1px 1px rgba(0, 0, 0, .4); + transition-duration: $defaultDuration; + transition-property: width height; + } + + &:hover:before { + width: $curlWidth; + height: $curlHeight; + } +} + + +/* Curl Top Right */ +.curl-top-right { + display: inline-block; + position: relative; + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + top: 0; + right: 0; + background: $revealAreaColour; /* IE9 */ + background: linear-gradient( + 225deg, + $revealAreaColour 45%, + $curlLineColour 50%, + $curlTransitionColour 56%, + $curlLastColour 80% + ); + box-shadow: -1px 1px 1px rgba(0, 0, 0, .4); + transition-duration: $defaultDuration; + transition-property: width height; + } + + &:hover:before { + width: $curlWidth; + height: $curlHeight; + } +} + + +/* Curl Bottom Right */ +.curl-bottom-right { + display: inline-block; + position: relative; + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + right: 0; + background: $revealAreaColour; /* IE9 */ + background: linear-gradient( + 315deg, + $revealAreaColour 45%, + $curlLineColour 50%, + $curlTransitionColour 56%, + $curlLastColour 80% + ); + box-shadow: -1px -1px 1px rgba(0, 0, 0, .4); + transition-duration: $defaultDuration; + transition-property: width height; + } + + &:hover:before { + width: $curlWidth; + height: $curlHeight; + } +} + + + +/* Curl Bottom Left */ +.curl-bottom-left { + display: inline-block; + position: relative; + @include hideTapHighlightColor(); + @include hardwareAccel(); + @include improveAntiAlias(); + + &:before { + pointer-events: none; + position: absolute; + content: ''; + height: 0; + width: 0; + bottom: 0; + left: 0; + background: $revealAreaColour; /* IE9 */ + background: linear-gradient( + 45deg, + $revealAreaColour 45%, + $curlLineColour 50%, + $curlTransitionColour 56%, + $curlLastColour 80% + ); + box-shadow: 1px -1px 1px rgba(0, 0, 0, .4); + transition-duration: $defaultDuration; + transition-property: width height; + } + + &:hover:before { + width: $curlWidth; + height: $curlHeight; + } +} \ No newline at end of file