Permalink
Browse files

ready for first releast

  • Loading branch information...
1 parent aec9740 commit 7922ecf2a2b5b3c1a9e4b1d8353b33757784704d @sydlawrence committed Feb 18, 2011
Showing with 89 additions and 300 deletions.
  1. +6 −0 README
  2. +15 −7 index.html
  3. +13 −5 jquery.shadow/jquery.shadow.css
  4. +21 −28 jquery.shadow/jquery.shadow.js
  5. +34 −2 style.css
  6. +0 −258 test.html
View
6 README
@@ -0,0 +1,6 @@
+Adapted from Nicholas Gallagher's CSS drop shadows without images demo
+http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+
+The purpose of this is to make it easier, as you don't need to remember the specific css class names.
+
+However, this is extremely bad practice... and should not be used for a production site, but feel free to use it for prototyping....
View
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
- <title></title>
+ <title>jQuery Shadow Plugin</title>
<script src="jquery.shadow/jquery-1.5.min.js"></script>
<script src="jquery.shadow/jquery.shadow.js"></script>
<link rel="stylesheet" href="jquery.shadow/jquery.shadow.css" />
@@ -16,7 +16,7 @@
</head>
<body>
<div class="container">
- <h1>CSS drop-shadows without images</h1>
+ <h1>jQuery Shadow Plugin</h1>
<div class="box standard">
<p><code>$('.box.standard')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow();</code></p>
@@ -25,9 +25,7 @@
<div class="box lifted">
<p><code>$('.box.lifted')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow('lifted');</code></p>
</div>
-
-
-
+
<div class="box perspective">
<p><code>$('.box.perspective')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow('perspective');</code></p>
</div>
@@ -60,14 +58,24 @@
<div class="box rotated lifted">
<p><code>.rotated.lifted</code></p>
</div>
- <div style="clear:both;float:none;"
<div class="box rotated perspective">
<p><code>.rotated.perspective</code></p>
</div>
+
+ <div class="box rotated raised">
+ <p><code>.rotated.raised</code></p>
+ </div>
</div>
- <a href="http://twitter.com/share" class="twitter-share-button" data-text="Demo: CSS boxs without images" data-count="horizontal" data-via="necolas">Tweet</a>
+ <p>Adapted from <a href="http://nicolasgallagher.com/css-drop-shadows-without-images/demo/" target="_BLANK">Nicholas Gallagher's CSS drop shadows without images demo</a></p>
+
+ <a href="http://twitter.com/share" class="twitter-share-button" data-text="Demo: jquery shadows" data-count="horizontal" data-via="necolas">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+
+ <div class="ribbon">
+ <a href="#" rel="me">Download the code</a>
+ </div>
+
</body>
</html>
@@ -1,11 +1,20 @@
+/**
+ * @preserve Copyright 2011 Syd Lawrence ( www.sydlawrence.com ).
+ * Version: 0.1
+ *
+ * Licensed under MIT and GPLv2.
+ *
+ * For use with jquery.shadow plugin
+ *
+ * Adapted from Nicholas Gallagher's CSS drop shadows without images demo
+ * http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ *
+ */
+
/* Shared styles */
.jquery-shadow {
position:relative;
-}
-
-.jquery-shadow {
- position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
@@ -22,7 +31,6 @@
/* Lifted corners */
-
.jquery-shadow-lifted:before,
.jquery-shadow-lifted:after {
bottom:15px;
@@ -4,83 +4,76 @@
*
* Licensed under MIT and GPLv2.
*
+ * Adapted from Nicholas Gallagher's CSS drop shadows without images demo
+ * http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
+ *
* Usage: $('.box').shadow(options);
*
*/
-
-
-
(function( $ ){
$.fn.shadow = function(options) {
+
+ // options could just be the type
if (typeof options !== "object")
options = {type:options};
-
-
+
+ // set up the options using the defaults
options = $.extend({}, $.fn.shadow.defaults, options);
+
var els = this;
-
+ // add the necessary css classes
els.addClass('jquery-shadow');
els.addClass('jquery-shadow-'+options.type);
-
+ // some require extras js
switch(options.type) {
- case 'lifted' :
- $.fn.shadow.lifted(this,options);
- break;
- case 'raised' :
- $.fn.shadow.raised(this,options);
- break;
case 'sides' :
$.fn.shadow.sides(this,options);
break;
case 'rotated' :
$.fn.shadow.rotated(this,options);
- break;
-
-
+ break;
}
+
+ // for good measure :)
$.fn.shadow.borderRadius(this,options.radius);
return this;
-
};
- $.fn.shadow.lifted = function(els,options) {
-
- }
-
+ // rotate these bad boys
$.fn.shadow.rotated = function(els,options) {
+
+ // one property to rule them all, if only!
els.css('-webkit-transform','rotate('+options.rotate+')')
.css('-moz-transform','rotate('+options.rotate+')')
.css('-ms-transform','rotate('+options.rotate+')')
.css('-o-transform','rotate('+options.rotate+')')
.css('transform','rotate('+options.rotate+')');
-
- }
-
- $.fn.shadow.raised = function(els,options) {
}
+ // sides have funky stuff
$.fn.shadow.sides = function(els,options) {
els.addClass('jquery-shadow-sides-'+options.sides);
}
+ // border-radius goodness..
$.fn.shadow.borderRadius = function(els,radius) {
els.css('-moz-border-radius',radius)
.css('border-radius',radius);
}
+ // these are the defaults :)
$.fn.shadow.defaults = {
- type:'standard',
+ type:'standard', // AVAILABLE standard, lifted, perspective, raised, sides
radius:4,
- sides:'',
+ sides:'', // used when type = "sides", AVAILABLE vt-1, vt-2, hz-1, hz-2
rotate:'-3deg'
};
-
})( jQuery );
View
@@ -1,9 +1,42 @@
+.ribbon {
+ background-color: #1a1a1e;
+ overflow: hidden;
+ /* top left corner */
+ position: absolute;
+ font-size:16px;
+ left: -4.2em;
+ top: 3em;
+ /* 45 deg ccw rotation */
+ -moz-transform: rotate(-45deg);
+ -webkit-transform: rotate(-45deg);
+ /* shadow */
+ -moz-box-shadow: 0 0 1em #888;
+ -webkit-box-shadow: 0 0 1em #888;
+}
+.ribbon a {
+ border: 1px solid #3a3a3e;
+ color: #fff;
+ display: block;
+ font: bold 100% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
+ margin: 0.05em 0 0.075em 0;
+ padding: 0.5em 3.5em;
+ text-align: center;
+ text-decoration: none;
+ /* shadow */
+ text-shadow: 0 0 0.5em #444;
+}
+
+.ribbon a:hover {
+ color:#346AA8;
+}
+
+
body {
padding:20px 0 30px;
font:12px/1.5 Arial, sans-serif;
text-align:center;
color:#333;
- background:#FAF0D9;
+ background:#f3f3f1;
}
a {
@@ -23,7 +56,6 @@ a:active {
width:600px;
padding:20px;
margin:0 auto;
- background:#FAF0D9;
}
.container:after {
Oops, something went wrong.

0 comments on commit 7922ecf

Please sign in to comment.