https://github.com/binarybrain/punches
Create punches in your web pages with CSS3.
https://github.com/binarybrain/punches
Last synced: 5 months ago
JSON representation
Create punches in your web pages with CSS3.
- Host: GitHub
- URL: https://github.com/binarybrain/punches
- Owner: BinaryBrain
- Created: 2012-11-22T14:34:47.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2012-12-26T20:02:37.000Z (over 13 years ago)
- Last Synced: 2025-02-01T04:29:36.934Z (over 1 year ago)
- Size: 7.27 MB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Punches
=======
Punches is a tool to create holes in your web pages. It works only with some CSS3 and a few lines of HTML.
Result
------
Here's an example of what you can do with Punches.
_Note: It uses only two images. The black background and the brushed metal._
Usage
-----
You only need the _punches.less_ file to make it work.
Other files are for example and testing purpose.
### HTML
```
```
### LESS
First of all, you have to import the style file.
Then, you just have to call the mixin.
```
@import "punches";
#your-punch {
//.punch(@size: 100px, @left: 0px, @top: 0px, @background: none, @grid: false, @z-index: 0);
.punch(150px, 20px, 20px, black);
}
```
You can see that every parameters have default values. So, you can just call `.punch;` if you want to.
Dependencies
------------
Punches needs [LESS](http://lesscss.org) to work.
Example
-------
To see the example, just download the folder _example_.
Note that the less code has been already compiled for you.