Thursday, 21 October 2010

jQuery Text Shadows

The latest text-shadow attributes of course, don't work in IE. There is a way of producing text shadows without using images and that is through a jQuery plugin. You can get the plugin from here http://justinshearer.com/solidShadow/
It's not subtle. There is no opacity, but if you are careful about the width, direction and colours of your shadow, the appearance is very useable. Here is an example of how to use it...

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadows</title>
<style type="text/css">
h1
{
text-align: center;
font-size: 8em;
}
</style>
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://justinshearer.com/solidShadow/jquery.solidShadow.js"></script>
<script>
$(document).ready(function()
{
$('h1').solidShadow('inline','#000000','#CCCCCC','right',3);
});
</script>
</head>
<body>  
<h1>Header 2</h1>
</body>
</html>

No comments:

Post a Comment