mirror of https://github.com/IanLunn/Hover.git
First commit
This commit is contained in:
Ian Lunn
parent
d0ee5bf30e
commit
28f2cd96bd
|
|
@ -0,0 +1,17 @@
|
|||
lib-cov
|
||||
*.seed
|
||||
*.log
|
||||
*.csv
|
||||
*.dat
|
||||
*.out
|
||||
*.pid
|
||||
*.gz
|
||||
|
||||
pids
|
||||
logs
|
||||
results
|
||||
|
||||
npm-debug.log
|
||||
node_modules
|
||||
|
||||
.sass-cache
|
||||
|
|
@ -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']);
|
||||
};
|
||||
90
README.md
90
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
|
||||
<a class="button">Add to Basket</a>
|
||||
```
|
||||
|
||||
Example element after applying hover.css effect:
|
||||
|
||||
```html
|
||||
<a class="button grow">Add to Basket</a>
|
||||
```
|
||||
|
||||
###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 `<head>` of the HTML page you'd like to add hover.css effects to:
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link href="css/hover-min.css" rel="stylesheet">
|
||||
</head>
|
||||
```
|
||||
|
||||
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
|
||||
<a class="button">Add to Basket</a>
|
||||
```
|
||||
|
||||
Example element after applying hover.css effect:
|
||||
|
||||
```html
|
||||
<a class="button grow">Add to Basket</a>
|
||||
```
|
||||
|
||||
|
||||
##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.
|
||||
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,134 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hover.css</title>
|
||||
<link href="css/demo-page.css" rel="stylesheet" media="all">
|
||||
<link href="css/hover.css" rel="stylesheet" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Hover.css</h1>
|
||||
<p class="intro">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.<p>
|
||||
|
||||
<div class="aligncenter">
|
||||
<a class="button cta hover-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a>
|
||||
</div>
|
||||
|
||||
<div id="effects">
|
||||
|
||||
<h2>2D Transforms</h2>
|
||||
|
||||
<a rel="grow" class="button grow">Grow</a>
|
||||
<a rel="shrink" class="button shrink">Shrink</a>
|
||||
<a rel="pulse" class="button pulse">Pulse</a>
|
||||
<a rel="pulse-grow" class="button pulse-grow">Pulse Grow</a>
|
||||
<a rel="pulse-shrink" class="button pulse-shrink">Pulse Shrink</a>
|
||||
<a rel="push" class="button push">Push</a>
|
||||
<a rel="pop" class="button pop">Pop</a>
|
||||
<a rel="rotate" class="button rotate">Rotate</a>
|
||||
<a rel="grow-rotate" class="button grow-rotate">Grow Rotate</a>
|
||||
<a rel="float" class="button float">Float</a>
|
||||
<a rel="sink" class="button sink">Sink</a>
|
||||
<a rel="hover" class="button hover">Hover</a>
|
||||
<a rel="hang" class="button hang">Hang</a>
|
||||
<a rel="skew" class="button skew">Skew</a>
|
||||
<a rel="skew-forward" class="button skew-forward">Skew Forward</a>
|
||||
<a rel="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>
|
||||
<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>
|
||||
<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
|
||||
<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>
|
||||
|
||||
|
||||
|
||||
<h2>Border Transitions</h2>
|
||||
|
||||
<a rel="border-fade" class="button border-fade">Border Fade</a>
|
||||
<a rel="hollow" class="button hollow">Hollow</a>
|
||||
<a rel="trim" class="button trim">Trim</a>
|
||||
<a rel="outline-outward" class="button outline-outward">Outline Outward</a>
|
||||
<a rel="outline-inward" class="button outline-inward">Outline Inward</a>
|
||||
<a rel="round-corners" class="button round-corners">Round Corners</a>
|
||||
|
||||
|
||||
|
||||
<h2>Shadow and Glow Transitions</h2>
|
||||
|
||||
<a rel="glow" class="button glow">Glow</a>
|
||||
<a rel="box-shadow-outset" class="button box-shadow-outset">Box Shadow Outset</a>
|
||||
<a rel="box-shadow-inset" class="button box-shadow-inset">Box Shadow Inset</a>
|
||||
<a rel="float-shadow" class="button float-shadow">Float Shadow</a>
|
||||
<a rel="hover-shadow" class="button hover-shadow">Hover Shadow</a>
|
||||
<a rel="shadow-radial" class="button shadow-radial">Shadow Radial</a>
|
||||
|
||||
|
||||
|
||||
<h2>Speech Bubbles</h2>
|
||||
|
||||
<a rel="bubble-top" class="button bubble-top">Bubble Top</a>
|
||||
<a rel="bubble-right" class="button bubble-right">Bubble Right</a>
|
||||
<a rel="bubble-bottom" class="button bubble-bottom">Bubble Bottom</a>
|
||||
<a rel="bubble-left" class="button bubble-left">Bubble Left</a>
|
||||
<a rel="bubble-float-top" class="button bubble-float-top">Bubble Float Top</a>
|
||||
<a rel="bubble-float-right" class="button bubble-float-right">Bubble Float Right</a>
|
||||
<a rel="bubble-float-bottom" class="button bubble-float-bottom">Bubble Float Bottom</a>
|
||||
<a rel="bubble-float-left" class="button bubble-float-left">Bubble Float Left</a>
|
||||
|
||||
|
||||
|
||||
<h2>Curls</h2>
|
||||
|
||||
<a rel="curl-top-left" class="button curl-top-left">Curl Top Left</a>
|
||||
<a rel="curl-top-right" class="button curl-top-right">Curl Top Right</a>
|
||||
<a rel="curl-bottom-right" class="button curl-bottom-right">Curl Bottom Right</a>
|
||||
<a rel="curl-bottom-left" class="button curl-bottom-left">Curl Bottom Left</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<div class="about">
|
||||
<h2>About Hover.css</h2>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h3>License</h3>
|
||||
|
||||
<p>hover.css is open source, and made available under a <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
|
||||
|
||||
<p>Placing author information in your stylesheet, credits page or humans.txt is much appreciated.</p>
|
||||
</div>
|
||||
|
||||
<div class="social aligncenter">
|
||||
<div class="social-button">
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Hover&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="social-button">
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Hover&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="social-button">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
</div>
|
||||
|
||||
<div class="social-button">
|
||||
<a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @IanLunn</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="author">
|
||||
<a class="logo" href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn"><img class="hover" src="logo-transparent.png" width="60" height="60" /></a>
|
||||
<p class="credit">Created by <a href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn">Ian Lunn</a> - Front End Web Developer</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue