Added warp shadow.

Author: Robbie McCorkell

css/style.css

@@ -77,17 +77,57 @@ h4 {
 
 /* Gallery */
 
-.gallery a {
-	margin: 0 10px;
+ul.gallery {
+	margin: 30px 0px;
+	position: relative;
+	list-style: none;
+	z-index: 1;
+	overflow: hidden;
 }
 
-.gallery img {
-	border-radius: 5px;
-	box-shadow: 3px 3px 3px #888888;
+ul.gallery li {
+	position: relative;
+	float: left;
+	width: 200px;
+	height: 120px;
+	padding: 0;
+	border: 1px solid #efefef;
+	margin: 0 30px 30px 0;
+	background: #fff
+	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
+	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
+/* 	border-radius: 5px; */
 }
 
-.gallery {
-	margin: 30px 0px;
+ul.gallery li:before, ul.gallery li:after {
+	content: '';
+	z-index: -1;
+	position: absolute;
+	left: 10px;
+	bottom: 10px;
+	width: 70%;
+	max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
+	max-height: 100px;
+	height: 55%;
+	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+	-webkit-transform: skew(-15deg) rotate(-6deg);
+	-moz-transform: skew(-15deg) rotate(-6deg);
+	-ms-transform: skew(-15deg) rotate(-6deg);
+	-o-transform: skew(-15deg) rotate(-6deg);
+	transform: skew(-15deg) rotate(-6deg);
+}
+
+ul.gallery li:after {
+	left: auto;
+	right: 10px;
+	-webkit-transform: skew(15deg) rotate(6deg);
+	-moz-transform: skew(15deg) rotate(6deg);
+	-ms-transform: skew(15deg) rotate(6deg);
+	-o-transform: skew(15deg) rotate(6deg);
+	transform: skew(15deg) rotate(6deg); 
 }
 
 /* Fix for table padding from screen.css */

index.html

@@ -46,21 +46,21 @@ <h3>Software Development</h3>
 			</div>
 				<div class="span-4"><img class="client_logo" src="images/decibel/decibel.png" /></div>
 				<div class="span-20 last"><h4 id="decibel_name">Decibel Music Systems Ltd</h4></div>
-			<div class="span-24 gallery">
-				<a href="images/decibel/artmanager1.jpg" rel="lightbox[Decibel]" title="Grid view for easy viewing of huge artwork database."><img src="images/decibel/artmanager1_thumb.jpg" class="thumbnail" alt="" /></a>
-				<a href="images/decibel/artmanager2.jpg" rel="lightbox[Decibel]" title="Full size view of single artwork."><img src="images/decibel/artmanager2_thumb.jpg" class="thumbnail" alt="" /></a>
-				<a href="images/decibel/artmanager3.jpg" rel="lightbox[Decibel]" title="Find images from Discogs.com for that album release, or search across multiple releases."><img src="images/decibel/artmanager3_thumb.jpg" class="thumbnail" alt="" /></a>
-			</div>
+			<ul class="span-24 gallery">
+				<li><a href="images/decibel/artmanager1.jpg" rel="lightbox[Decibel]" title="Grid view for easy viewing of huge artwork database."><img src="images/decibel/artmanager1_thumb.jpg" class="thumbnail" alt="" /></a></li>
+				<li><a href="images/decibel/artmanager2.jpg" rel="lightbox[Decibel]" title="Full size view of single artwork."><img src="images/decibel/artmanager2_thumb.jpg" class="thumbnail" alt="" /></a></li>
+				<li><a href="images/decibel/artmanager3.jpg" rel="lightbox[Decibel]" title="Find images from Discogs.com for that album release, or search across multiple releases."><img src="images/decibel/artmanager3_thumb.jpg" class="thumbnail" alt="" /></a></li>
+			</ul>
 
 			<div class="span-24">
 				<h3>Web Design</h3>
 				<hr>
 			</div>
 			<div class="span-4"><img class="client_logo" src="images/pt/presentthinking.png"/></div>
 			<div class="span-20 last"><h4 id="pt_name">Present Thinking Ltd</h4></div>
-			<div class="span-24 gallery">
-				<a href="images/pt/homepage.jpg" rel="lightbox[PT]" title="Present Thinking Homepage"><img src="images/pt/homepage_thumb.jpg" class="thumbnail" alt="" /></a>
-			</div>
+			<ul class="span-24 gallery">
+				<li><a href="images/pt/homepage.jpg" rel="lightbox[PT]" title="Present Thinking Homepage"><img src="images/pt/homepage_thumb.jpg" class="thumbnail" alt="" /></a></li>
+			</ul>
 		</div>
 	</div>
 </body>