https://github.com/binarybrain/punches

Create punches in your web pages with CSS3.
https://github.com/binarybrain/punches

Last synced: about 2 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 (about 12 years ago)
• Default Branch: master
• Last Pushed: 2012-12-26T20:02:37.000Z (about 12 years ago)
• Last Synced: 2024-10-16T11:49:10.447Z (3 months 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.

![Punches Screenshot](https://github.com/BinaryBrain/Punches/blob/master/readme-images/screenshot2.png?raw=true)

_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.