HTML

As stated above, this layout required that each product column be spit out in one big list. To achieve this zigzag effect, the first list item of every 26 items must be floated to the right.

<ul class="prodlist">
    <!--List #1 Large/Float Right-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #2~13 Small/Float Left-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
    <!--List #14 Large/Float Left-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #15~26 Small/Float Left-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
    <!--List #27 Large/Float Right-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #28~39 Small/Float Left-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
</ul>

CSS

Style the columns using a list and take note of the last line of CSS using :nth-child(N). To read further on how the :nth-child(N) works, take a look at Chris Coyier’s article.

ul.prodlist {
	margin: 0; padding: 0;
	list-style: none;
}
ul.prodlist li {
	margin: 10px; padding: 0;
	float: left;
}
ul.prodlist li img {float: left;}
ul.prodlist li:nth-child(26n+1) {float: right;}

Browser Support?

Almost all modern browsers support :nth-child(N) except our red headed step child Internet Explorer. To cater for IE, we can write a quick line of jQuery.

jQuery – IE Support

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Directly after the line where you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. All we do now is add a float: right; to the :nth-child(26n+1).

$(document).ready(function() {
	$('ul.prodlist li:nth-child(26n 1)').css({'float' : 'right'});
});

Conclusion

I decided to call this post advanced columns since it was out of the norm for me to style columns this way, but as you can see the technique of achieving this effect was quite simple. I also thought this was a good example of how to use the :nth-child(N) in a real life example, I hope you can take something from this tutorial and learn to use pseudo-selectors for your future projects. Props to the design/dev team at Johnny Cupcakes for coming up with a complex and unique layout.

Related Articles

• :nth-child(N) – Site Point
• How nth-child Works – CSS Tricks
• :nth-child() – Quirks Mode

Related Posts

• Popout Details on Hover w/ CSS
• Inline Modal Window w/ CSS and jQuery
• Automatic Image Slider w/ CSS & jQuery
• Facebook Style Footer Admin Panel Part 2
• Facebook Style Footer Admin Panel Part 1

His style is a mixture of glitched out hiphop, downtempo, funk, and jazz, in my opinion great music to just zone out and design to. Being influenced by a variety of music scenes, his combination of styles really makes his sounds unique and stands out from the rest.

“The sound and style that I am going for has been developing and evolving since the first time I produced a piece of music and it continues to with every new track as well. That is one thing that really excites me about music, the continual evolution of creativity in individuals and in the collective of all artists.” – Pretty Lights

“My intention was to get as many people to hear and hopefully enjoy my music as possible, I had no idea that it would actually create a means for me to make a living off of my music thru touring. I continue to give my albums away for free because I want to make an impact on the transformation of the music industry and hopefully discover a new model for lasting success and longevity as an independent musician.” – Pretty Lights

Below are some tracks off of his older albums. He releases all of his albums for free so go check out the download page and peep them all out.

For those of you in Southern California, he will be performing at the Santa Barbara West Beach Festival in September!

Like What You Hear?

• Official Site
• Myspace Music
• Facebook Fan Page
• Exclusive Interview & Live Performance

Related Posts

• Inspiration Fridays – Ronald Jenkees
• The Glitch Mob
• Dub FX – The Future of Beat Boxing

Vandelay Premier was created by Steven Snell of Vandelay Design and serves as a membership-based community for designers. They provide web and graphic designers with premium-quality design resources that make their lives easier, plus they offer career resources to help designers and freelancers with all facets of career and business. Members also get other perks like access to the exclusive marketplace discounts on products and services relevant to web designers.

» Visit Vandelay Premier

Membership Details

• Provides a variety of premium quality design resources including textures, brushes, vectors, PSD files and more.
• Provides career resources, such as interviews, reports, and short e-books to help designers with the business and career aspect of design.
• Will be updated with new items multiple times per week.
• Resources from a variety of talented designers.
• Members have access to a marketplace with discounts on products and services like hosting, PSD to HTML coding, WordPress themes, stock photos, and much more.
• Cost is $9 per month or $79 per year (For those who want to purchase a membership).

How to Enter?

Since this blog is dedicated to sharing my experiences, to enter, share one experience/advice that you feel benefited you in your career. For students, it can be an experience/advice that benefited you in school. The contest will end on Friday August 13th, 2010.

1. Drop your REAL name
2. Use a legit email account where we can contact you
3. Share an experience/adivce.

Popular Posts

• Simple Tabs w/ CSS & jQuery
• Fancy Thumbnail Hover Effect w/ jQuery
• Mega Drop Down Menus w/ CSS & jQuery
• Simple Page Peel Effect with jQuery & CSS
• Simple Toggle with CSS & jQuery

HTML

The columns are made up of unordered list items, within each list item is the thumbnail image and the details of the item wrapped in a class of "info".

<ul class="columns">
    <li>
    	<a href="#"><img src="thumbnail.jpg" alt="" /></a>
        <div class="info">
            <h2>Title</h2>
            <p>Short Description</p>
        </div>
    </li>
</ul>

CSS

Start by styling the list items. Notice we add position: relative; to the list item, and on hover we raise the z-index to 99 so it lifts over the other elements.

/*--Column Styles--*/
ul.columns {
	width: 960px;
	list-style: none;
	margin: 0 auto; padding: 0;
}
ul.columns li {
	width: 220px;
	float: left; display: inline;
	margin: 10px; padding: 0;
	position: relative;
}
ul.columns li:hover {z-index: 99;}

We add a position: relative; to the image as well, so we can control the z-index value on hover. What we want to do here is to lower the opacity of the image by default to 30% then on hover, turn up the opacity to 100% and lift the image by increasing the z-index value to 999. This will allow the thumbnail to sit on top of the .info elements.

/*--Thumbnail Styles--*/
ul.columns li img {
	position: relative;
	filter: alpha(opacity=30);
	opacity: 0.3;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*--IE8 Specific--*/
}
ul.columns li:hover img{
	z-index: 999;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

Use absolute positioning to shift the .info class -10px to the left and -10px to the top. Since .info is using an absolute positioning, we must have enough top padding so the content within does not overlap the thumbnail. To do this, the top padding is measured by adding 10px to the height of the thumbnail (200px in my demo). Some CSS3 was added for the rounded corners. We will hide .info by default, and show it on hover.

/*--Details Style--*/
ul.columns li .info {
	position: absolute;
	left: -10px; top: -10px;
	padding: 210px 10px 20px;
	width: 220px;
	display: none;
	background: #fff;
	font-size: 1.2em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
ul.columns li:hover .info {display: block;}

ul.columns li h2 {
	font-size: 1.2em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px 0;
}
ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;}

Final Thoughts

Go ahead and experiment with this technique! If you have any questions or concerns please don’t hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover issue.

Related Posts

• Advanced Columns w/ CSS
• Inline Modal Window w/ CSS and jQuery
• Automatic Image Slider w/ CSS & jQuery
• Facebook Style Footer Admin Panel Part 2
• Facebook Style Footer Admin Panel Part 1

I wanted to share a piece of history with legendary skater Rodney Mullen from South Bay Los Angeles. I chose to feature him since he is considered one of the most important and influential skaters in skateboarding’s history. Rodney Mullen was primarily known for his freestyle tricks, but later on he had a huge impact on street skating. Creating street skating foundations like the flat ground ollie, kick flip, heel flip, 360 flip, and many more, he took skateboarding to a new level.

“Do what you love and try not to look at what other people occupy themselves with. Most people seem restless and bounce around too much to focus or even pay attention enough to themselves to figure out exactly what they really do love, as opposed to what the people that surround them are doing.”
- Rodney Mullen

Skateboarding was once looked at as just a fad in the 70′s-80′s but since the 90′s it has become a prime extreme sport, and I hope it continues to grow and inspire the next generation to continue.

Like What You See?

• Rodney Mullen Interview – Talking with The King of Skateboarding
• Rodney Mullen on Facebook
• Almost Skateboards
• Globe Shoes
• Tensor Trucks
• Rodney Mullen on Wikipedia
• Rodney Mullen Fan Site

Other Resources on History of Skateboarding

• Epicly Later’d – Guy Mariano Video 1 of 4
• Epicly Later’d – Guy Mariano Video 2 of 4
• Epicly Later’d – Guy Mariano Video 3 of 4
• Epicly Later’d – Guy Mariano Video 4 of 4
• History of Street Skateboarding

Related Posts

• Inspiration Fridays – Ronald Jenkees
• Exit Through The Gift Shop
• The Glitch Mob
• Dub FX – The Future of Beat Boxing
• Search Engine Rap Battle

Hosted by Dan Benjamin and Jeffrey Zeldman, it’s filled with great resources from top professionals telling their stories and perspectives on the industry and their craft.

I’ve actually liked it so much that I have been listening to their show in my car while driving to work. The great thing is that you can download each interview and take them with your in your ipod/MP3 player. If you haven’t tuned in yet, go do it now. Enjoy!

Popular Posts

• Simple Tabs w/ CSS & jQuery
• Fancy Thumbnail Hover Effect w/ jQuery
• Mega Drop Down Menus w/ CSS & jQuery
• Simple Page Peel Effect with jQuery & CSS
• Simple Toggle with CSS & jQuery

1. Fill Base Layer

Create a new document and create a new layer. Fill the the new layer with the base color of your choice. In my example I used blue (#142e51) for my base color.

3. Create Noise Layer

Create a new layer and fill this layer with white (#ffffff). Then add your noise filter to this layer (Filter > Noise > Add Noise…).

You can set the amount to 25%. The higher you go, the more noisy it will get. I like to keep mine minimal and not too harsh.

You will notice when you add noise, there are many small pixalated colors scattered on your layer. To make this gray scale, you must adjust your noise layer saturation level (Layer > New Layer Adjustment > Hue/Saturation…) or short cut (Ctrl + U) on a PC.

The window will popup to adjust your saturation. Turn the saturation level all the way down to -100.

4. Blend

Now its time to blend the two layers together. You can do this by selecting the noise layer and experimenting with your blending mode. Since I used dark blue for my base color, I invert my noise layer (Image > Adjustments > Invert) first before I experiment with my blending mode.

Note* if you chose a light base color, you can simply change your blending mode to multiply and adjust your opacity settings to get the effect to your liking without inverting your layer.

Once you inverted your noise layer, now go ahead and experiment with the blending mode. I chose the Linear Dodge mode with the opacity set to 45%.

Final

Here is the final image. I would like to encourage you to experiment and have fun with this technique!

Inspiration – Examples in the Real World

Related Articles

• Noise and textures
• Web Design: Grain Texture

Related Posts

• Cropping Backgrounds of Vehicles
• Glossy & Beveled Buttons – Photoshop Tutorial
• Have Fun w/ Borders – Beveled, Pressed, & More!
• CSS Sprites w/out Using Background Images
• Simple Accordion w/ CSS and jQuery

The site is packed with great interviews from a variety of people with different backgrounds and specialties, definitely a great place to subscribe to and check out for updates.

If anyone is interested you can check out my interview here.

Related Posts

• Quick Interview @ PV.M Garage
• Quick Interview with Yours Truly

Light Shadow

A simple light shadow effect can be achieved with using shades of grey with borders. With CSS3 you can achieve a real shadow effect using box shadow, but this is a clean and simple way that works in all browsers.

CSS

.shadow {
	padding: 20px;
	border: 1px solid #f0f0f0;
	border-bottom: 2px solid #ccc;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Pressed

The pressed effect is very similar to the CSS Letter Press technique but we rely solely on border colors to achieve the effect. Add some CSS3 rounded corners and you can achieve a very clean pressed look to your layouts.

CSS

.pressed {
	color: #fff;
	padding: 20px;
	background: #111;
	border: 1px solid #000;
	border-right: 1px solid #353535;
	border-bottom: 1px solid #353535;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

Beveled

This technique is very similar to your double border technique commonly used with images. With a little bit of tinkering, you can achieve a subtle beveled effect using the outline property.
CSS

img.light {
	outline: 1px solid #ddd;
	border-top: 1px solid #fff;
	padding: 10px;
	background: #f0f0f0;
}
img.dark {
	outline: 1px solid #111;
	border-top: 1px solid #555;
	padding: 10px;
	background: #333;
}

Indented Lines

I use this technique often when creating vertical menus and lists. Its a simple combination of top and bottom borders with different shades of the background color. Keep in mind the first-child and last-child CSS selectors are not supported by older browsers. You can read more about this here. To get around it, you can use some jQuery to support older browsers.
CSS

#indented ul{
	margin: 20px 0; padding: 0;
	list-style: none;
}
#indented ul li {
	border-top: 1px solid #333;
	border-bottom: 1px solid #111;
}
#indented ul li:first-child {border-top: none;}
#indented ul li:last-child {border-bottom: none;}
#indented ul li a {
	padding: 10px;
	display: block;
	color: #fff;
	text-decoration: none;
}
#indented ul li a:hover {background: #111;}

Related Articles

• Quick Tip: Multiple Borders with Simple CSS
• Multiple Backgrounds and Borders with CSS 2.1
• CSS Trick: Creating a Body-Border
• Creating Shapes With CSS Borders
• CSS SPEECH BUBBLE

Related Posts

• Correcting Orphans w/ Overflow
• Noise Texture in Photoshop
• CSS Sprites w/out Using Background Images
• Simple Accordion w/ CSS and jQuery
• Mastering CSS : Getting Started – Guest Post

“Ronald Jenkees first gained fame on the site YouTube when he posted a series of videos of himself playing his Korg Triton LE and/or Yamaha Motif XS8 keyboards, often accompanied by beats he composed using FL Studio. The performances were often improvised and are influenced primarily by hip-hop and jazz.”

Like What You Hear?

• Official Website and Blog
• Youtube Channel
• LastFM Radio

Related Posts

• The Glitch Mob
• Dub FX – The Future of Beat Boxing
• Inspiration Fridays – Pretty Lights
• Inspiration Fridays – Rodney Mullen
• Exit Through The Gift Shop