Permalink
Browse files

adding code coloring to the readme

  • Loading branch information...
1 parent 8e8262d commit b6375de6ac7147a33e32375327a24a95296a9aa2 @heygrady committed Jan 27, 2012
Showing with 75 additions and 69 deletions.
  1. +75 −69 readme.md
View
144 readme.md
@@ -8,80 +8,86 @@ This library is a `text-shadow` polyfill for Internet Explorer 9 and below. It u
## Usage
It is recommended to use this library with a feature detection library such as [Modernizr](http://www.modernizr.com/docs/#textshadow).
- if (!Modernizr.textshadow) {
- // [default] reading the current style automatically
- $('h1').textshadow();
-
- // creates the HTML structure but doesn't try to apply the styles
- $('h1').textshadow({useStyle: false});
-
- // normal
- $('h1').textshadow('2px 2px 2px #000');
-
- // multiple shadows
- $('h1').textshadow('2px 2px 2px #0f0, 4px 4px 2px #f00, 6px 6px 2px #00f');
-
- // rgba
- $('h1').textshadow('2px 2px 2px rgba(0, 0, 0, 0.5)');
-
- // hsla
- $('h1').textshadow('2px 2px 2px hsla(0, 100%, 54%, .5)');
- }
+```javascript
+if (!Modernizr.textshadow) {
+ // [default] reading the current style automatically
+ $('h1').textshadow();
+
+ // creates the HTML structure but doesn't try to apply the styles
+ $('h1').textshadow({useStyle: false});
+
+ // normal
+ $('h1').textshadow('2px 2px 2px #000');
+
+ // multiple shadows
+ $('h1').textshadow('2px 2px 2px #0f0, 4px 4px 2px #f00, 6px 6px 2px #00f');
+
+ // rgba
+ $('h1').textshadow('2px 2px 2px rgba(0, 0, 0, 0.5)');
+
+ // hsla
+ $('h1').textshadow('2px 2px 2px hsla(0, 100%, 54%, .5)');
+}
+```
### Required CSS
There is a corresponding css file that provides base styles for the new elements used. It must be included in the document as well.
- <!doctype html>
- <html>
- <head>
- ...
- <link rel="stylesheet" href="jquery.textshadow.css">
- <script src="js/libs/modernizr-1.7.min.js"></script>
- </head>
- <body>
- ...
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
- <script src="jquery.textshadow.js"></script>
- <script>
- if (!Modernizr.textshadow) {
- $('h1').textshadow();
- }
- </script>
- </body>
- </html>
-
+```html
+<!doctype html>
+<html>
+<head>
+ ...
+ <link rel="stylesheet" href="jquery.textshadow.css">
+ <script src="js/libs/modernizr-1.7.min.js"></script>
+</head>
+<body>
+ ...
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
+ <script src="jquery.textshadow.js"></script>
+ <script>
+ if (!Modernizr.textshadow) {
+ $('h1').textshadow();
+ }
+ </script>
+</body>
+</html>
+```
+
### Specifying Custom CSS
For performance and flexibility reasons, it's best to use CSS rather than JS to apply the shadow styles. Particularly when there are hover states or nested elements that need a different shadow applied. Overall the browser will perform better applying the filter properties from CSS rather than from JavaScript.
- <!doctype html>
- <html>
- <head>
- ...
+```html
+<!doctype html>
+<html>
+<head>
+ ...
- <link rel="stylesheet" href="jquery.textshadow.css">
- <style>
- h1 {
- text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5); /* left top blur color */
- }
- h1 .ui-text-shadow-copy {
- color: #000; /* color */
- filter:
- progid:DXImageTransform.Microsoft.Alpha(opacity=50) /* RGBA alpha */
- progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=2); /* blue */
- left: 1px; /* left - blur */
- top: 1px; /* top - blur */
- }
- </style>
- <script src="js/libs/modernizr-1.7.min.js"></script>
- </head>
- <body>
- ...
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
- <script src="jquery.textshadow.js"></script>
- <script>
- if (!Modernizr.textshadow) {
- $('h1').textshadow({useStyle: false});
- }
- </script>
- </body>
- </html>
+ <link rel="stylesheet" href="jquery.textshadow.css">
+ <style>
+ h1 {
+ text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5); /* left top blur color */
+ }
+ h1 .ui-text-shadow-copy {
+ color: #000; /* color */
+ filter:
+ progid:DXImageTransform.Microsoft.Alpha(opacity=50) /* RGBA alpha */
+ progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=2); /* blue */
+ left: 1px; /* left - blur */
+ top: 1px; /* top - blur */
+ }
+ </style>
+ <script src="js/libs/modernizr-1.7.min.js"></script>
+</head>
+<body>
+ ...
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
+ <script src="jquery.textshadow.js"></script>
+ <script>
+ if (!Modernizr.textshadow) {
+ $('h1').textshadow({useStyle: false});
+ }
+ </script>
+</body>
+</html>
+```

0 comments on commit b6375de

Please sign in to comment.