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

CSS 3 Drop Down Menu (1307)

Related Posts

• Slick, CSS 3 Image Drop Shadows Mon 18 Apr 2011
• Simple Utility Icons - Free Sun 22 Aug 2010
• Sugar Glider – Free WordPress Theme Wed 09 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

So, to achieve the desired effect, put this in your style.css:

li.even	{
	list-style: none;
	background: #FFFF;
}
li.odd	{
	list-style: none;
	background: #F9F9F9;
}

Add in a few other styling elements, such as borders and clever margins, and you can get some really slick results.

Related Posts

• Quick Tip: Remove right margin from column post layout with php Sat 08 May 2010
• Add Scripts and Styles to Specific Admin Pages Only Thu 30 Jun 2011
• Give Away: 3 Free Copies of Font Uploader for WordPress Mon 02 May 2011

It’s really simple.

Your original style looks something like:

div  {
   color: #666;
   border: 1px solid red;
}

But, thanks to the inline styles, the above don’t actually appear. By adding [style] to the end of div, the nasty inline styles will be over written.

div[style]  {
   color: #666;
   border: 1px solid red;
}

This trick works in all browsers except IE 6 (no surprise).

Related Posts

• Add Scripts and Styles to Specific Admin Pages Only Thu 30 Jun 2011
• Quick Tip: Remove right margin from column post layout with php Sat 08 May 2010
• Alternate Your Comment Colors Mon 08 Mar 2010