JQuery Plugin update: Letterpress2
A While back I coded a plugin to apply the letterpress effect, since then I’ve decided that css’s text-shadow property was a better way to go, but some browsers don’t support text-shadow *cough* IE *cough* this is a slight mod to check for IE & apply the letterpress plugin to them, and use text-shadow on browsers that support it.
Here’s what it looks like:
and this is the code needed for this example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.letterpress2.js" type="text/javascript"></script>
<style>
.all {
font-family:Helvetica, Arial, Sans;
}
h1 {
background:#2bf;
}
h2 {
background:#f2b;
}
h3 {
background:#b2f;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("h1").letterpress({color: '#000', highlight: '#0ff', topOffset: '1px', leftOffset: '1px'});
$("h2").letterpress({color: '#000', highlight: '#f0f', leftOffset: '1px'});
$("h3").letterpress({color: '#000', highlight: '#f6f'});
$("h4").letterpress({topOffset: '2px', leftOffset: '2px'});
});
</script>
<div class="all">
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
</div>This is a CSS / Graphic effect that usually requires a bit of planning and is kind-of hard to throw into dynamic content, or content you have no control over the markup of. No extra tags, or css required. No duplicate text needed.
Here’s the basics:
$(".letterpress").letterpress();You can, however, edit the styles easily with these 5 options:
color, highlight, blur, topOffset, leftOffsetnote: The blur will only be applied if text-shadow is being used.
These attributes can be implemented like this:
$(".letterpress").letterpress({color: '#000', highlight: '#0ff', topOffset: '1px', blur: '1px', leftOffset: '1px'});