Beautify Your Text with CSS Rules - Kerning.js
File Size: | 17.2 KB |
---|---|
Views Total: | 1304 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Kerning.js is a small and smart Javascript Library that makes it easy to beautify your text with some CSS Rules.
How to use it:
1. The CSS
p { visibility: hidden; -word-transform: -transform-group(rotate(10deg)) -transform-group(rotate(-10deg)); font-size: 5em; color: #bd4932; text-shadow: 0 3px 5px rgba(189, 75, 50, 0.5); margin: 200px 0 0; } h1 { visibility: hidden; /* You can skip -transform-groups if you don't use spaces in the transforms, and limit each letter to a single transform. */ -letter-transform: -letter-repeats(even: rotate(5deg), odd: rotate(-5deg)); -letter-color: if-font('Helvetica Neue': -letter-repeats(even: #db9e36, odd: #bd4932)); -letter-kern: -letter-pairs('Ke': 2px, 'g.': 1px, '.j': -13px); /* Try removing "Helvetica Neue" from the body selector above and see what happens. */ font-size: 9em; font-size: if-font('Helvetica Neue': 10em); font-weight: 700; font-weight: if-font('Helvetica Neue': 400); text-shadow: 0 3px 5px rgba(189, 75, 50, 0.5); }
2. Markup
<p>This is</p> <h1>Kerning.js</h1>
3. Include jQuery Library and Kerning.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="kerning.js"></script>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.