From efbb55f11c605ae19295f1fdcc4fa86fed800cb6 Mon Sep 17 00:00:00 2001 From: peachananr Date: Fri, 2 Aug 2013 21:21:45 +0700 Subject: [PATCH] Fix documentation and add minified version --- README.md | 22 +++++----------------- jquery.flatshadow.min.js | 1 + 2 files changed, 6 insertions(+), 17 deletions(-) create mode 100644 jquery.flatshadow.min.js diff --git a/README.md b/README.md index b879e69..8f4f2a9 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ A small jQuery plugin that will automatically cast a shadow creating depth for y Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com) ## Usage -To use `jquery.flatshadow.js` on your website, simply include the latest jQuery library found here together with `jquery.flatshadow.js` into your document's `` and call the function like this: +To use this on your website, simply include the latest jQuery library found here together with `jquery.flatshadow.js` into your document's ``, follow by the html markup and a function call as follows: ````html
FLAT
@@ -13,25 +13,13 @@ To use `jquery.flatshadow.js` on your website, simply include the latest jQuery ````javascript $(".flat-icon").flatshadow({ - color: "#2ecc71", - angle: "SE", - fade: true, - boxShadow: "#d7cfb9" + color: "#2ecc71", // Background color of elements inside. (Color will be random if left unassigned) + angle: "SE", // Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW. (Angle will be random if left unassigned) + fade: true, // Gradient shadow effect + boxShadow: "#d7cfb9" // Color of the Container's shadow }); ```` -### Color -The color option allows you to assign a background color to all your elements at once. Color will be random if empty. - -### Angle -The angle option allows you to assign the direction (N, NE, E, SE, S, SW, W and NW ) of the shadow of the elements inside. Angle will be random if empty. - -### Fade -The fade option will turn the flat shadow effect into a gradient shadow effect. - -### boxShadow -The boxShadow allows you to apply the same shadow effect to the container of the elements. The option accept a 6 hex color code. For example, "#000000". - ## Further Customization With `jquery.flatshadow.js`, you can apply each individual elements with different effect by simply add a `data-color` and `data-angle` to your mark up as follows: diff --git a/jquery.flatshadow.min.js b/jquery.flatshadow.min.js new file mode 100644 index 0000000..19ac352 --- /dev/null +++ b/jquery.flatshadow.min.js @@ -0,0 +1 @@ +!function(e){function s(e,t){e=e.replace("#","");r=parseInt(e.substring(0,2),16);g=parseInt(e.substring(2,4),16);b=parseInt(e.substring(4,6),16);result="rgba("+r+","+g+","+b+","+t/100+")";return result}function o(e,t){e=String(e).replace(/[^0-9a-f]/gi,"");if(e.length<6){e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]}t=t||0;var n="#",r,i;for(i=0;i<3;i++){r=parseInt(e.substr(i*2,2),16);r=Math.round(Math.min(Math.max(0,r+r*t),255)).toString(16);n+=("00"+r).substr(r.length)}return n}var t=new Array("#1ABC9C","#2ecc71","#3498db","#9b59b6","#34495e","#f1c40f","#e67e22","#e74c3c");var n=new Array("NE","SE","SW","NW");var i={fade:false,color:"random",boxShadow:false,angle:"random"};e.fn.flatshadow=function(r){var u=e.extend({},i,r);return this.each(function(){el=e(this);if(u.fade==true){width=Math.round(el.outerWidth()/3);height=Math.round(el.outerHeight()/3)}else{width=Math.round(el.outerWidth());height=Math.round(el.outerHeight())}if(u.boxShadow!=false){var r=u.boxShadow}if(u.color!="random"&&!el.attr("data-color")){var i=u.color}else{var i=t[Math.floor(Math.random()*t.length)];if(el.attr("data-color")){var i=el.attr("data-color")}}if(u.angle!="random"&&!el.attr("data-angle")){var a=u.angle}else{var a=n[Math.floor(Math.random()*n.length)];if(el.attr("data-angle")){var a=el.attr("data-angle")}}var f=o(i,-.3);var l="";if(u.boxShadow!=false){var c=""}else{var c="none"}switch(a){case"N":for(var h=1;h<=height;h++){if(u.boxShadow!=false)c+="0px "+h*2*-1+"px 0px "+s(r,50-h/height*100);if(u.fade!=false){var p=s(f,100-h/height*100)}else{var p=f}l+="0px "+h*-1+"px 0px "+p;if(h!=height){l+=", ";c+=", "}}break;case"NE":for(var h=1;h<=height;h++){if(u.boxShadow!=false)c+=h*2+"px "+h*2*-1+"px 0px "+s(r,50-h/height*100);if(u.fade!=false){var p=s(f,100-h/height*100)}else{var p=f}l+=h+"px "+h*-1+"px 0px "+p;if(h!=height){l+=", ";c+=", "}}break;case"E":for(var h=1;h<=width;h++){if(u.boxShadow!=false)c+=h*2+"px "+"0px 0px "+s(r,50-h/width*100);if(u.fade!=false){var p=s(f,100-h/height*100)}else{var p=f}l+=h+"px "+"0px 0px "+p;if(h!=width){l+=", ";c+=", "}}break;case"SE":for(var h=1;h<=height;h++){if(u.boxShadow!=false)c+=h*2+"px "+h*2+"px 0px "+s(r,50-h/height*100);if(u.fade!=false){var p=s(f,100-h/height*100)}else{var p=f}l+=h+"px "+h+"px 0px "+p;if(h!=height){l+=", ";c+=", "}}break;case"S":for(var h=1;h<=height;h++){if(u.boxShadow!=false)c+="0px "+h*2+"px 0px "+s(r,50-h/height*100);if(u.fade!=false){var p=s(f,100-h/height*100)}else{var p=f}l+="0px "+h+"px 0px "+p;if(h!=height){l+=", ";c+=", "}}break;case"SW":for(var h=1;h<=height;h++){if(u.boxShadow!=false)c+=h*2*-1+"px "+h*2+"px 0px "+s(r,50-h/height*100);if(u.fade!=false){var p=s(f,100-h/height*100)}else{var p=f}l+=h*-1+"px "+h+"px 0px "+p;if(h!=height){l+=", ";c+=", "}}break;case"W":for(var h=1;h<=height;h++){if(u.boxShadow!=false)c+=h*2*-1+"px "+"0px 0px "+s(r,50-h/height*100);if(u.fade!=false){var p=s(f,100-h/height*100)}else{var p=f}l+=h*-1+"px "+"0px 0px "+p;if(h!=height){l+=", ";c+=", "}}break;case"NW":for(var h=1;h<=height;h++){if(u.boxShadow!=false)c+=h*2*-1+"px "+h*2*-1+"px 0px "+s(r,50-h/height*100);if(u.fade!=false){var p=s(f,100-h/height*100)}else{var p=f}l+=h*-1+"px "+h*-1+"px 0px "+p;if(h!=height){l+=", ";c+=", "}}break}el.css({background:i,color:o(i,1),"text-shadow":l,"box-shadow":c})})}}(window.jQuery) \ No newline at end of file