The first step is to set up your HTML structure:

1
2
3
4
5
6

<div class="image-wrap">
	<div class="image-thumb">
		<img src="path/to/your/image.jpg">
	</div>
        <div class="image-shadow"></div>
</div>

Next, some basic CSS:

1
2
3
4
5
6
7

.image-wrap { position:relative; }
.image-thumb {
	height:180px; /*set this to the size of your image*/
	width:280px; /*set this to the size of your image*/
	z-index: 1;
	position: relative;
}

The next step is a little more complex and utilizes the :before and :after pseudo selectors to allow us to do super cool stuff

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

.thumb-shadow	{
	position: absolute;
	top: 0;
	left: 0;
	height:180px; /*this must be the same as declared above*/
	width:280px; /*this must be the same as declared above*/
	z-index: 0;
}
/*shadow*/
.image-shadow:after {
	content: '';
	position: absolute;
	background: #828282;
	width: 98%;
	height: 4px;
	bottom:3px;
	right: 2px;
	z-index: -1;
	-webkit-transform: rotate(2deg);
	box-shadow: 0 2px 5px #828282;
}
.image-shadow:before {
	content: '';
	position: absolute;
	background: #828282;
	width: 95%;
	height: 4px;
	bottom:3px;
	left: 2px;
	z-index: -1;
	-webkit-transform: rotate(-2deg);
	box-shadow: 0 2px 5px #828282;
}
/*end shadow*/

What we have done created two gray “stripes” that are slightly blurred, and then rotated them slightly to give the impression of a curved shadow. Pretty cool, huh?

This is a pretty simple application of this technique, and you could go much further and create more intricate shadows if you wanted.

Related Posts

• Freebie - CSS 3 Drop Down Menus Tue 22 Jun 2010

Well, one of the main problems coders will run into when creating the layout with CSS is how to make all the columns fit correctly, while retaining the correct margins.

What often happens is the first two columns look great, but then the third margin will screw up because the right-margin, for example, has pushed the column outside of the containing div. The problem looks something like this:

A friend / php developer showed me a sweet solution to this problem the other day, so I thought I’d post it here for all of you.

It works by adding a counter at the beginning of your column layout that starts at “0″, then with each column, a count of “1″ is added to the initial “0″. Then, when the count reaches “3″ (or however many columns your layout has), you add an additional CSS class that removes the right margin. And finally, you reset the counter so that the next row of columns begin at “0″.

It looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="row">
 <?php
   $i=0; //start the count at "0"
   if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   $i++; //add 1 to the total count
 ?>
  <div class="column <?php if($i===3){ echo 'column-right'; } ?>">
    <?php the_content(); //your post content 
    ?>
  </div>
 <?php
    if($i===3){ echo '<div style="clear:both; width: 100%;"></div>'; $i=0; } //reset the ount to "0" and clear the divs 
  ?>
 <?php endwhile; endif; ?>
</div>

The CSS looks like this:

1
2
3
4
5
6
7
8
9
10

.row {
   width: 100%;
}
.column {
   width: 33%;
   margin-right: 20px;
}
.column-right {
  margin-right: 0!important;
}

Enjoy!

Related Posts

• Get Page ID by Page Name Fri 15 Oct 2010
• Wordpress CMS Tips and Tricks - Part 3 Wed 19 May 2010
• Better Wordpress Post Excerpt - Revamped Thu 22 Apr 2010

Sprout Venture

Simon Ong

Davinci Graphics

Perq Works

Takashi Irie

Related Posts

• Designs of the Week 3-26-10 Fri 26 Mar 2010
• Give Away: 3 Free Copies of Font Uploader for WordPress Mon 02 May 2011
• Get Page ID by Page Name Fri 15 Oct 2010

nanyate

Allananova

Carol Rivello

Adaptik

Komodo Media

Just Coded

Rails on the Road

Related Posts

• Wordpress Designs of the Week 04-09-10 Fri 09 Apr 2010
• Give Away: 3 Free Copies of Font Uploader for WordPress Mon 02 May 2011
• Get Page ID by Page Name Fri 15 Oct 2010

Dilate Media

Graph Force

Eagle Bend Apostolic Church

Simple Station

Zefxis

Crafted Pixelz

Velox Media

Related Posts

• Sliding Contact Panel Mon 20 Sep 2010
• Wordpress Designs of the Week 04-09-10 Fri 09 Apr 2010
• Designs of the Week 3-26-10 Fri 26 Mar 2010

Cats Who Code

Design Informer

Ecoki

Sherier Designs

Simple Bits

Soh Tanaka

The Pixel

Think Design

Tutorial 9

Viget / Extend

Work Awesome

Related Posts

• Sliding Contact Panel Mon 20 Sep 2010
• Wordpress Designs of the Week 04-09-10 Fri 09 Apr 2010
• Designs of the Week 3-26-10 Fri 26 Mar 2010

Recently I was granted the Web Design Internship position for the non-profit organization Wuqu Kawoq, which is a small organization focused on providing basic health care services to the indigenous Kaqchikel Maya in Guatemala.

My main task will be to move their current (static) site to WordPress, giving it a much more manageable Content Management System.

The internship lasts until the end of Spring, 2010.

Related Posts

I accepted.

They needed their old website converted to a new design, one that matched a universal theme of the Unversity of Kansas’ website. Mostly this involved a lot of copy and paste from file to file, transfering new scripts to old shtml pages.

The conversion process took me a little over a week to complete, working two hours per day. Now all that work is done, I get to piddle around, making slight modifications and updates when needed, which is not very often. So that means it gives me lots of free time to mess around with new ideas and techniques, and, hopefully, more themes, tutorials and updates here.

Related Posts

• Wordpress Designs of the Week 04-09-10 Fri 09 Apr 2010