Permalink
Browse files

initial commit

  • Loading branch information...
0 parents commit aec9740a789608abed0928a0ff7f10b619b53e67 @sydlawrence committed Feb 18, 2011
Showing with 630 additions and 0 deletions.
  1. 0 README
  2. +73 −0 index.html
  3. +16 −0 jquery.shadow/jquery-1.5.min.js
  4. +139 −0 jquery.shadow/jquery.shadow.css
  5. +86 −0 jquery.shadow/jquery.shadow.js
  6. +11 −0 main.js
  7. +47 −0 style.css
  8. +258 −0 test.html
0 README
No changes.
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title></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" />
+
+ <link rel="stylesheet" href="style.css" />
+ <script src="main.js"></script>
+
+
+
+
+</head>
+<body>
+ <div class="container">
+ <h1>CSS drop-shadows without images</h1>
+
+ <div class="box standard">
+ <p><code>$('.box.standard')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow();</code></p>
+ </div>
+
+ <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>
+
+ <div class="box raised">
+ <p><code>$('.box.raised')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow('raised');</code></p>
+ </div>
+
+ <div class="box sides-vt-1">
+ <p><code>$('.box.sides-vt-1')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow({type:'sides', sides:'vt-1'});</code></p>
+ </div>
+
+ <div class="box sides-vt-2">
+ <p><code>$('.box.sides-vt-2')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow({type:'sides', sides:'vt-2'});</code></p>
+ </div>
+
+ <div class="box sides-hz-1">
+ <p><code>$('.box.sides-hz-1')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow({type:'sides', sides:'hz-1'});</code></p>
+ </div>
+
+ <div class="box sides-hz-2">
+ <p><code>$('.box.sides-hz-2')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow({type:'sides', sides:'hz-2'});</code></p>
+ </div>
+
+
+ <div class="box rotated">
+ <p><code>$('.box.rotated')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow({type:'rotated',<br/>rotate:'-5deg'});</code></p>
+ </div>
+
+ <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>
+
+ <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>
+ <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+</body>
+</html>

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,139 @@
+/* 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;
+}
+
+.jquery-shadow:before,
+.jquery-shadow:after {
+ content:"";
+ position:absolute;
+ z-index:-2;
+}
+
+
+
+/* Lifted corners */
+
+
+.jquery-shadow-lifted:before,
+.jquery-shadow-lifted:after {
+ bottom:15px;
+ left:10px;
+ width:50%;
+ height:20%;
+ max-width:300px;
+ -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+ -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+ box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+ -webkit-transform:rotate(-3deg);
+ -moz-transform:rotate(-3deg);
+ -ms-transform:rotate(-3deg);
+ -o-transform:rotate(-3deg);
+ transform:rotate(-3deg);
+}
+
+.jquery-shadow-lifted:after {
+ right:10px;
+ left:auto;
+ -webkit-transform:rotate(3deg);
+ -moz-transform:rotate(3deg);
+ -ms-transform:rotate(3deg);
+ -o-transform:rotate(3deg);
+ transform:rotate(3deg);
+}
+
+/* Perspective */
+
+.jquery-shadow-perspective:before {
+ left:80px;
+ bottom:5px;
+ width:50%;
+ height:35%;
+ max-width:200px;
+ -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
+ -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
+ box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
+ -webkit-transform:skew(50deg);
+ -moz-transform:skew(50deg);
+ -ms-transform:skew(50deg);
+ -o-transform:skew(50deg);
+ transform:skew(50deg);
+ -webkit-transform-origin:0 100%;
+ -moz-transform-origin:0 100%;
+ -ms-transform-origin:0 100%;
+ -o-transform-origin:0 100%;
+ transform-origin:0 100%;
+}
+
+.jquery-shadow-perspective:after {
+ display:none;
+}
+
+
+/* Side shadows */
+
+.jquery-shadow-sides:before {
+ top:10px;
+ bottom:10px;
+ left:0;
+ right:50%;
+ -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
+ -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
+ box-shadow:0 0 15px rgba(0,0,0,0.6);
+ -moz-border-radius:10px / 100px;
+ border-radius:10px / 100px;
+}
+
+.jquery-shadow-sides-vt-2:before {
+ right:0;
+}
+
+.jquery-shadow-sides-hz-1:before {
+ top:50%;
+ bottom:0;
+ left:10px;
+ right:10px;
+ -moz-border-radius:100px / 10px;
+ border-radius:100px / 10px;
+}
+
+.jquery-shadow-sides-hz-2:before {
+ top:0;
+ bottom:0;
+ left:10px;
+ right:10px;
+ -moz-border-radius:100px / 10px;
+ border-radius:100px / 10px;
+}
+
+ /* Raised shadow - no pseudo-elements needed */
+
+.jquery-shadow-raised {
+ -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+ -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+ box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+}
+
+/* Rotated box */
+
+.jquery-shadow-rotated :first-child:before {
+ content:"";
+ position:absolute;
+ z-index:-1;
+ top:0;
+ bottom:0;
+ left:0;
+ right:0;
+ background:#fff;
+ -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;
+}
@@ -0,0 +1,86 @@
+/**
+ * @preserve Copyright 2011 Syd Lawrence ( www.sydlawrence.com ).
+ * Version: 0.1
+ *
+ * Licensed under MIT and GPLv2.
+ *
+ * Usage: $('.box').shadow(options);
+ *
+ */
+
+
+
+
+(function( $ ){
+
+
+ $.fn.shadow = function(options) {
+ if (typeof options !== "object")
+ options = {type:options};
+
+
+ options = $.extend({}, $.fn.shadow.defaults, options);
+ var els = this;
+
+
+ els.addClass('jquery-shadow');
+ els.addClass('jquery-shadow-'+options.type);
+
+
+ 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;
+
+
+ }
+ $.fn.shadow.borderRadius(this,options.radius);
+
+ return this;
+
+ };
+
+ $.fn.shadow.lifted = function(els,options) {
+
+ }
+
+ $.fn.shadow.rotated = function(els,options) {
+ 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) {
+ }
+
+ $.fn.shadow.sides = function(els,options) {
+ els.addClass('jquery-shadow-sides-'+options.sides);
+ }
+
+ $.fn.shadow.borderRadius = function(els,radius) {
+ els.css('-moz-border-radius',radius)
+ .css('border-radius',radius);
+ }
+
+ $.fn.shadow.defaults = {
+ type:'standard',
+ radius:4,
+ sides:'',
+ rotate:'-3deg'
+ };
+
+
+})( jQuery );
+
11 main.js
@@ -0,0 +1,11 @@
+$(document).ready(function() {
+ $('.box.standard').shadow();
+ $('.box.lifted').shadow('lifted');
+ $('.box.perspective').shadow('perspective');
+ $('.box.raised').shadow('raised');
+ $('.box.sides-vt-1').shadow({type:'sides',sides:'vt-1'});
+ $('.box.sides-vt-2').shadow({type:'sides',sides:'vt-2'});
+ $('.box.sides-hz-1').shadow({type:'sides',sides:'hz-1'});
+ $('.box.sides-hz-2').shadow({type:'sides',sides:'hz-2'});
+ $('.box.rotated').shadow({type:'rotated',rotate:'-5deg'});
+});
@@ -0,0 +1,47 @@
+body {
+ padding:20px 0 30px;
+ font:12px/1.5 Arial, sans-serif;
+ text-align:center;
+ color:#333;
+ background:#FAF0D9;
+}
+
+a {
+ font-weight:bold;
+ color:#346AA8;
+}
+
+a:hover,
+a:focus,
+a:active {
+ text-decoration:none;
+}
+
+.container {
+ position:relative;
+ z-index:1;
+ width:600px;
+ padding:20px;
+ margin:0 auto;
+ background:#FAF0D9;
+}
+
+.container:after {
+ content:"";
+ display:block;
+ clear:both;
+ visibility:hidden;
+ height:0;
+ font-size:0;
+}
+
+
+.box {
+ float:left;
+ height:80px;
+ width:40%;
+ padding:1em;
+ margin:2em 10px 4em;
+ background:#fff;
+}
+
Oops, something went wrong.

0 comments on commit aec9740

Please sign in to comment.