If a blog has a lot of (meaningful) comments it is often a sign of high-quality, engaging and maybe even controversial posts.

But how can you motivate people to comment on your blog posts and reward those that actually do?

Let Search Engines Follow Their Url

Wordpress applies by default a rel=”nofollow” attribute to all external links in your comment list. This prevents search engine robots from following and indexing those links. By installing Kimmo Suominen’s DoFollow Plugin you can change that and let your commenters have some of your link love.

Let Them Share Their Own Posts

By installing a plugin such as CommentLuv you give commenters that have a blog of their own the possibility to promote their latest posts. This will not only make your commenters happy, but can also be a valuable addition for all of your readers, considering that commenters often have a blog in the same or a similar niche.

Announce Your Top Commenters

You can reward the readers that leave the highest number of comments by featuring them separately. If you have a weekly or monthly roundup you could do so in those posts or you can simply display a list in your sidebar. The Show Top Commentators Widget Plugin is a great way to achieve that. A nice and easy way to say thank you.

Respond to Comments

This is actually a very basic and almost self-evident thing to do and I’m simply assuming that this is more or less common practice. Responding to comments, answering questions and clarifying things will show your readers that you actually read and care about their comments and opinions. Keep in mind to be polite even if you are criticized (that’s part of being a blogger as well).

Visit, Promote and Comment on Their Web Sites

When someone is leaving a comment on your blog you should definitely have a look at their web site (maybe you’ll discover your new favorite blog), promote it by tweeting, digging and co. and leave a comment on your own. Reciprocal commenting can result in new contacts and sometimes even friendships.

Thank Them with an Email

If you have an especially interesting and valuable comment that takes your post to a whole new level you might even consider writing a thank you mail to the respective commenter. It will surely be appreciated and with a little bit of luck evolve into an interesting conversation.

Don’t Overdo It

I recently saw a blog that offered the user who leaves the most comments in a certain month a free ad space for the following month (I unfortunately can’t find the link anymore, otherwise I would have posted it here). Even though this is an interesting approach, I think it overshoots the mark. When it comes down to it, commenting on a blog shouldn’t be a competition and your readers should leave a comment because they have something to say, not because they’re after a prize.

Conclusion

By applying only some of these ideas to your blog you make leaving a comment on your blog already much more attractive and rewarding for your readers. Writing a good and elaborate comment takes some time after all and you should show your commenters that you appreciate that.

Today we’re going to learn three different ways to create shadows in Photoshop, ranging from simple Drop Shadows to complex Caster Shadows. This is the second tutorial out of a series of tutorials that will teach Photoshop beginners how to apply various design effects to their designs.

Drop Shadows with Photoshop’s Blending Options

This type of shadow is the easiest to create, but also the most versatile due to its Blending Option nature. This shadow will often be all that is needed to give a design additional depth and with the right settings you can achieve some interesting results.

Step 1

Create a new document (Ctrl+J) and create a simple shape, a short text or any other element (you can paste an image for example) you would like to apply a Drop Shadow to (you can also open an existing document that already has elements in it). Right-click on your new layer in the Layer Palette and select Blending Options. A new window that presents you with a multitude of settings and panels will open.

Step 2

Select Drop Shadow out of the list of options (if you have Preview activated you should already see a simple Drop Shadow applied to your layer) and you’ll be presented with several different panels and sliders, which you can use to change the appearance of your Drop Shadow dramatically.

Here is a quick explanation of each setting:

• Blend Mode: The standard setting here is Multiply and for a simple shadow you usually don’t have to change this. Photoshop’s Blend Modes let you change how your layers (or in this case Drop Shadow) interacts with other layers. Blend Modes are a complex topic, but you can read this excellent explanation of each one of them.
• Color Field: To the right of the Blend Mode you have a little, black rectangle. By clicking on it you open a color picker and you can select a different color for your shadow. For regular shadows black (the default) is just fine, but in combination with the different Blend Modes you can achieve some really interesting effects (even though they often don’t have anything to do with classic shadows anymore).
• Opacity: Just like you can change the opacity of each layer in the Layers Palette you can also change the opacity of your drop shadow. It basically just influences how strong your shadow will appear. 75% is the standard setting, but you’ll change this setting rather often.
• Angle: This allows you to define the direction of the (imaginary) light that is falling on your layer and casts the shadow. This is pretty straightforward (e.g. if the light comes from the downer side (-90°) the shadow appears at the top of the layer, etc.) and its standard value of 120° often needs no change.
• Use Global Light: If this check box is activated Photoshop uses a document wide setting for the light direction. If you apply a drop shadow to more than one element (or other effects that use Global Light for their creation) and Use Global Light is activated all shadows will fall in the same direction. If you change the angle of your shadow while this Checkbox is activated the light direction of all shadows that use Global Light is changed. This allows you to give your document a consistent light direction. You can usually let this activated – only if you want shadows that fall in different directions you should deactivate it.
• Distance: This determines how far away the shadow is from the element it is applied to. A value of 0 places it directly under your element (and it appears on each side of your element), whereas a value of 20 makes it appear far away from your element. This is one of the core values you’ll manipulate to achieve different kinds of shadows and you won’t keep the standard value of 5 too often.
• Spread: The Spread lets you define how intense the shadow is. A high value will give your shadow a harder edge (and simulate very bright light). Even though this setting is not essential it can be useful in certain situations. Usually its default of 0 works just fine.
• Size: This defines the size of your shadow, mainly the size of its blur. The Size and Distance are what gives your shadow its essential look and the values you will influence the most in order to achieve different results.

There are several other settings (including the Contour), but these are only necessary for very complex shadows and you usually won’t need them. If you are interested you can read some more about the Contour setting. The Layer Knocks Out Drop Shadow let’s you decide whether or not the drop shadow can be seen below the layer if the layer’s fill opacity is below 100% (Example).

This is all there is to say about Photoshop’s Drop Shadow Blending Option. Have a look at the examples below to see how different settings influence the looks of the shadow:

And one more example with actual text and an icon:

Shadows with Gaussian Blur

Even though this kind of shadow is a little bit more complicated to create it gives you more flexibility and control over the shape and position of your shadow. The biggest advantage is that you can create shadows that aren’t following the outlines of an element or layer as well as your unrestricted regarding the position and distance to your original object.

Step 1

Create a new document once again and create or open an element of your choice in a new layer. Now select the Elliptic Marquee Tool (Shift+U) and create a relatively flat ellipse below your object. It should have a width similar to the one of the original element.

Step 2

Create a new layer (Ctrl+Shift+N), select the Paint Bucket Tool (G) and fill the selection with black.

Step 3

Go to Filter>Blur>Gaussian Blur and select a value somewhere between 3 and 10 pixels (due to Photoshop’s Preview Function you should see what looks best).

Step 4

Make sure that your shadow layer is placed below the original layer, arrange it appropriately and reduce the opacity of the shadow layer in the Layers Palette until you’re satisfied with the result.

This was only one simple example of what can be achieved with this kind of shadow. There are many tutorials out there that use this technique and by following them you’ll definitely find out how powerful Shadows that are created with Gaussian Blur really are. Check out: Create a Professional Web 2.0 Layout and 3D Wooden Box Photoshop Tutorial.

Below is one more example of this kind of shadow, this time applied to an icon:

Caster Shadows

The last type of shadow we’re presenting is also the most complicated. A Caster Shadow can give your creation a real 3D Look because it comes the closest to actual real-world shadows.

Step 1

Create a new document and add the object or text of your choice one last time. Duplicate the layer with your object (Ctrl+J), select the Paint Bucket Tool (G) and fill the copy of your object with black. Move the copy under the original layer in the Layers Palette.

Step 2

Select the duplicated, black layer and go to Edit>Transform>Distort (alternatively you can simply press Ctrl+T and hold down the Ctrl-key while transforming the layer) and distort the layer as shown in the picture below.

Step 3

It’s time for a Gaussian Blur again. Go to Filter>Blur>Gaussian Blur and apply a blur of 3-5 pixels to your shadow layer.

Now duplicate your blurred shadow layer (Ctrl+J), move the duplicated version under the original shadow and apply one more time a Gaussian Blur. This time choose a bigger value between 6 and 10 pixels.

Step 4

Because we want our shadow to become softer towards the end we’ll now add a smooth transition between our first and second shadow with the help of a Layer Mask.

Select the upper shadow (with the smaller Gaussian Blur) and add a Layer Mask (red circle in the image below) in the Layers Palette. Select the Gradient Tool (Shift+G), define a white to black gradient and add it as shown below (make sure you have the Layer Mask selected in the Layers Palette).

Step 5

Now you only have to reduce the opacity of the shadow layers based on your own preferences. In the example below I chose 70% for the upper shadow layer and 40% for the downer one. You should generally keep the opacity of the upper shadow higher than the opacity of the lower shadow.

Conclusion

Congratulations, by following this tutorial you learned three different techniques for the creation of shadows in Photoshop. There are many more ways to create shadows in Photoshop, but with above examples you should be able to create whatever shadow you may need throughout your work in Photoshop.

The best way to improve your skills in this area is to experiment and try out different settings and techniques.

One last piece of advice: In terms of web and graphic design you should use subtle shadows, rather than full-blown monsters – layer opacity is your biggest friend here.

In this Tutorial we’ll show you how to recreate 3 different, slick buttons that we created beforehand in Photoshop without the usage of any image in CSS3. We’ll use a multitude of CSS3 properties, such as @font-face, text- and box-shadow, gradients and border-radius.

Button #1

Photoshop

This simple, yet beautiful and effective button is based on a rounded, 250px wide and 34px high rectangle (the dimensions are the same for all buttons in this tutorial) with a border-radius of 5px. The following layer styles were applied to the button:

The font used for the text is Airstream, which is licensed for the usage with @font-face. Its size is set to 30px, a very light blue (#e5edff) is used as color and a simple drop-shadow (as shown below) is applied to it.

CSS3

Because the HTML part of the code is very simple I’m not giving any code examples for that. All you need is a HTML document that refers to your CSS file and has an input tag with an id (in our case a submit button with the id button1).

We start by defining our new, custom font-family with @font-face. Check out our 30 Beautiful and Free Fonts You Can Use with @font-face post to find out more about @font-face and how to implement it.

The styling of the input tag starts with some general and regular CSS properties such as height, width, border and background, followed by the CSS3 Styling.
We begin with the creation of a linear CSS3 Gradient for Firefox as well as Webkit Browsers.

After that we define the border-radius to achieve the rounded corners – this is simple and straightforward, it just needs to be defined separately for Firefox and Webkit Browsers.

Finally we’ll add a soft shadow around the button with box-shadow. The first value indicates the x-offset, the second the y-offset, followed by the blur radius and finally the shadow color.

Finally we only need to set our previously defined font-family (and appropriate fallbacks), its size, color and we’re also adding another CSS3 property: text-shadow.

Text-shadow works similar to box-shadow (x-offset, y-offset, blur radius, color), but in this specific case we used the RGBA model (another CSS3 feature) to define the color. This allows us to define a transparent color to get a softer color (rather than choosing a milder gray, which is absolutely not the same).

RGBA is based on the RGB color model and requires four values: The red, green and blue amounts (between 0 and 255) and the alpha channel (in decimal values, e.g. 0.1 = 10% opacity), which indicates the opacity.

@font-face {
  font-family: 'AirstreamRegular';
  src: url('fonts/Airstream.eot');
  src: local('Airstream Regular'), local('Airstream'), url('fonts/Airstream.ttf') format('truetype');
}

input#button1 {
  /* General Propertoes */
  height:34px;
  width:250px;
  border:1px solid #858fa6;
  background:#4a5775;
  /* CSS3 Styling */
  background:-moz-linear-gradient(top, #606c88, #3f4c6b);
  background:-webkit-gradient(linear, left top, left bottom, from(#606c88), to(#3f4c6b));
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  -moz-box-shadow:0px 0px 5px #000;
  -webkit-box-shadow:0px 0px 5px #000;
  box-shadow:0px 0px 5px #000;
  /* Text Styling */
  font-family:'AirstreamRegular', Georgia, 'Times New Roman', serif;
  color:#e5edff;
  font-size:30px;
  text-shadow:0px 0px 5px rgba(0, 0, 0, 0.75);
}

Now we have a beautiful button and all that’s missing is some interactivity. That’s why we’re going to define the hover, focus and active state of the button. You can let your creativity run free here and manipulate the values we defined to your own desires. By adding CSS3 transitions you can even add some animation.

Below I lightened the border color for the hover and focus states to highlight the button and reversed the gradient and smalled down the text-shadow in case the user clicks on the button.

input#button1:hover, input#button1:focus {
  border-color:#adbad9;
}
  
input#button1:active {
  background:-moz-linear-gradient(bottom, #606c88, #3f4c6b);
  background:-webkit-gradient(linear, left bottom, left top, from(#606c88), to(#3f4c6b));
  text-shadow:0px 0px 2px #000;
}

Button #2

Photoshop

The second button is a little more glossy and might even be a little bit outdated, but it is a great way to show a gradient with more than two colors. The dimensions are the same as the one’s of the first button (250px on 34px), but it uses a radius of 20px for its rounded corners and the following blending options:

This time we’re using the HighlandGothic font with a size of 20px and an orange color (#ff7d00). The following drop-shadow is applied to it:

CSS3

We start once again by defining a new font-family with @font-face, just as we did it with our first button, followed by some general CSS properties.

Next on the list is the more complex gradient with four color values, a bigger border-radius and a box-shadow, which actually is more of an outer glow than a shadow because it uses RGBA to define a white with an opacity of 50%.

The text is styled as before, but due to the negative y-offset of our text-shadow we achieve an effect that resembles an inner-shadow.

Finally we’re defining some styles for the different button states.

@font-face {
  font-family: 'HighlandGothicFLFRegular';
  src: url('fonts/HighlandGothicFLF.eot');
  src: local('HighlandGothicFLF Regular'), local('HighlandGothicFLF'), url('fonts/HighlandGothicFLF.ttf') format('truetype');
}

input#button2 {
  /* General Properties */
  height:34px;
  width:250px;
  border:1px solid #000;
  background:#717a77;
  /* CSS3 Styling */
  background:-moz-linear-gradient(bottom, #0a0809, #0a0f0b 50%, #6d7673 50%, #afbdc0);
  background:-webkit-gradient(linear, left bottom, left top, from(#0a0809), to(#afbdc0), color-stop(0.5, #0a0f0b), color-stop(0.5, #6d7673));
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  border-radius:20px;
  -moz-box-shadow:0px 0px 7px rgba(255, 255,255, 0.5);
  -webkit-box-shadow:0px 0px 7px rgba(255, 255,255, 0.5);
  box-shadow:0px 0px 7px rgba(255, 255,255, 0.5);
  /* Text Styling */
  color:#ff7d00;
  text-shadow:0px -1px 0px #000;
  font-family:'HighlandGothicFLFRegular', Impact, 'Arial Black', sans-serif;
  font-size:20px;
  padding-bottom:5px;
}

input#button2:hover {
  font-size:21px;
  -moz-box-shadow:0px 0px 7px rgba(255, 255,255, 1);
  -webkit-box-shadow:0px 0px 7px rgba(255, 255,255, 1);
  box-shadow:0px 0px 7px rgba(255, 255,255, 1);
}

input#button2:focus {
  -moz-box-shadow:0px 0px 7px rgba(255, 255,255, 0.75);
  -webkit-box-shadow:0px 0px 7px rgba(255, 255,255, 0.75);
  box-shadow:0px 0px 7px rgba(255, 255,255, 0.75);
}
  
input#button2:active {
  border-width:2px 1px 1px 2px;
  font-size:20px;
}

Button #3

Photoshop

Our last button basically explodes with subtlety (or is it implode?) and would fit perfectly into a very simple design without losing its attractiveness.
It has the original dimensions of 250px on 34px, uses a very small radius of 3px and the following layer styles:

Note this is the font we used, 24px the font-size and plain white (#fff) the color. A simple outer glow (see image below) helps the button to stand out on the dark background.

CSS3

The CSS is similar to the two other buttons, so I’m not going to repeat everything again.

The only difference is the usage of radial gradients instead of linear ones and the usage of a white with an opacity of 50% as text-shadow to recreate the outer glow of the text. The radial gradient is fairly simple to implement for Firefox and nearly impossible in Safari. If nobody is going to write a proper tutorial on how to do this soon I’ll have a deeper look into it and write one on my own.

@font-face {
  font-family: 'NotethisRegular';
  src: url('fonts/Note_this.eot');
  src: local('Note this Regular'), local('Notethis'), url('fonts/Note_this.ttf') format('truetype');
}

input#button3 {
  /* General Properties */
  height:34px;
  width:250px;
  border:1px solid #494949;
  background:#404040;
  /* CSS3 Styling */
  background:-moz-radial-gradient(bottom, #656565, #404040 60%);
  background:-webkit-gradient(radial, center bottom, 0, center 230, 230, from(#656565), to(#404040));
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  -moz-box-shadow:0px 0px 3px #000;
  -webkit-box-shadow:0px 0px 3px #000;
  box-shadow:0px 0px 3px #000;
  /* Text Styling */
  color:#fff;
  text-shadow:0px 0px 5px rgba(255, 255,255, 0.5);
  font-family:'NotethisRegular', Verdana, Arial, sans-serif;
  font-size:24px;
  padding-top:1px;
}
  
input#button3:hover, input#button3:focus {
  background:-moz-radial-gradient(bottom, #656565, #404040 80%);
  background:-webkit-gradient(radial, center bottom, 0, center 230, 250, from(#656565), to(#404040));
}

input#button3:active {
  -moz-box-shadow:0px 0px 2px #000;
  -webkit-box-shadow:0px 0px 2px #000;
  box-shadow:0px 0px 2px #000;
  text-shadow:0px 0px 8px rgba(255, 255,255, 1);
}

Conclusion

I think that this was quite a good demonstration of how powerful and versatile CSS3 actually is (or is going to be) and how we can avoid the usage of images and CSS sprites with a little bit of code.

These buttons will display properly and in their full beauty in the latest version of Safari, Chrome and Firefox (only 3.6, not 3.5, which doesn’t have support for CSS3 Gradients), but degrade more or less gracefully and display without the CSS3 features in all other browsers, including IE6 (the custom fonts work in all browsers though). Make sure to set regular background-colors before adding the gradients, so it will display properly in all browsers.

We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

Let’s start with the simple HTML-markup, which consists of simple, unordered list, filled with random content. If you want you can download the icons I used at Tutorial 9.

<body>
    <div id="wrapper">
        <ul id="index_cards">
            <li id="card-1">
                <h3>Card 1</h3>
                <img src="images/t9tuqui_trans.png" height="130" width="130" alt="Toucan" />
                <p>Name: Toucan<br />
                Age: 5<br />
                Size: 50 cm<br />
                Weight: 600 g<br />
                Food: Fruit<br />
                Toucan lives in southern and central America and loves to fly around</p>
            </li>
            <li id="card-2">
                <h3>Card 2</h3>
                <img src="images/t9foxy_trans.png" height="130" width="130" alt="Fox" />
                <p>Name: Fox<br />
                Age: 3<br />
                Size: 70 cm<br />
                Weight: 5.5 kg<br />
                Food: Meat<br />
                Fox lives in the northern hemisphere and loves to play seek and hide</p>
            </li>
            <li id="card-3">
                <h3>Card 3</h3>
                <img src="images/t9dog2_trans.png" height="130" width="130" alt="Dog" />
                <p>Name: Dog<br />
                Age: 8<br />
                Size: 120 cm<br />
                Weight: 10 kg<br />
                Food: Bones<br />
                Dog lives in a dog hut and loves to chew shoes, bark and go for walks</p>
            </li>
            <li id="card-4">
                <h3>Card 4</h3>
                <img src="images/t9penguino_trans.png" height="130" width="130" alt="Penguin" />
                <p>Name: Penguin<br />
                Age: 20<br />
                Size: 110 cm<br />
                Weight: 35 kg<br />
                Food: Fish<br />
                Penguin lives where it's cold and icy and loves to swim and dive</p>
            </li>
            <li id="card-5">
                <h3>Card 5</h3>
                <img src="images/t9lion_trans.png" height="130" width="130" alt="Lion" />
                <p>Name: Lion<br />
                Age: 12<br />
                Size: 190 cm<br />
                Weight: 180 kg<br />
                Food: Meat<br />
                Lions lives in Africa and loves to sleep most of the day and hunt sometimes</p>
            </li>
        </ul>
    </div>
</body>

Now the CSS. I’m using the Yahoo User Interface(YUI) 2 CSS Reset to achieve similar results in all browsers, then we’ll need to define the fonts we want to use with @font-face (for more information on @font-face have a look at our recent post 30 Beautiful and Free Fonts You Can Use with @font-face) and add some general CSS rules.

The fonts Note This and Kulminoituva, both of which are available in @font-face kits (with all necessary font-formats and preformatted CSS-file) on Font Squirrel, are the ones used in my example design.

/* @font-face definitions */

@font-face {
  font-family: 'KulminoituvaRegular';
  src: url('../fonts/kulminoituva.eot');
  src: local('Kulminoituva Regular'), local('Kulminoituva'), url('../fonts/kulminoituva.woff') format('woff'), url('../fonts/kulminoituva.ttf') format('truetype'), url('../fonts/kulminoituva.svg#Kulminoituva') format('svg');
}

@font-face {
  font-family: 'NotethisRegular';
  src: url('../fonts/Note_this.eot');
  src: local('Note this Regular'), local('Notethis'), url('../fonts/Note_this.woff') format('woff'), url('../fonts/Note_this.ttf') format('truetype'), url('../fonts/Note_this.svg#Notethis') format('svg');
}

/* General styling */

body {
  background:#202020;
  font-family: NotethisRegular, Verdana, Arial, sans-serif;
  font-size:125%;
  color:#202020;
}

h1, h2, h3, h4, h5, h6 {
  font-family: KulminoituvaRegular, "Arial Black", Gadget, sans-serif;
  font-size:1.5em;
}

#wrapper {
  width:760px;
  margin:0 auto;
  text-align:center;
  padding-top:50px;
}

Then we’ll need to style the index cards.
First we add some general CSS2.1 rules like the height, width, padding and border (You can choose whatever values you see fit). The background image is optional, but also makes the index cards look so much better (you can download it here). Make sure to set position:relative, display:block and float:left.

Additionally we’ll use some CSS3 stylings to kick our cards a notch up.

With the help of border-radius we achieve rounded corners, the px-value you assign will result in smaller or bigger rounded edges.

The box-shadow property allows us to add a drop shadow to the index cards; the first value determines the horizontal (x) offset, the second value the vertical (y) offset and the third value the size of the blur. The last value defines the color of the shadow. With the help of this property you are able to imitate nearly every drop shadow you can create in Photoshop.

The transition property allows us to define how and how long changes into different states (:hover, :active, etc.) will occur. The first value indicates the property your targeting (like this you can as an example have different animation effects for the growth and rotation of an element) , the second the time the transition will take and third defines the rendering of the animation (how the animation will transform over time).
Possible values for the third value are: linear, ease(default), ease-in, ease-out, ease-in-out and cubic-bezier, which allows you to define your own behavior. The transition property is currently only recognized by Safari and Chrome, but is planned for Firefox 3.6. For more information on CSS3 Animations visit the official Safari Blog.

/* Index Card Styling */
  
ul#index_cards {
  margin-top:50px;
  text-align:center;
}
  
ul#index_cards li {
  background:url(../images/card_bg.jpg) repeat;
  height:450px;
  width:130px;
  display:block;
  float:left;
  border:1px solid #666;
  padding:25px 10px;
  position:relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-box-shadow: 2px 2px 10px #000;
  -webkit-box-shadow: 2px 2px 10px #000;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
}

Now we have to add some individual styling to each card.
Arrange the cards with the help of top, right, bottom and left and then, with the help of transform:rotate add a rotation to the cards. Make sure that the values of the two outmost cards (1 and 5) and two inner cards (2 and 4) are opposing (e.g -20deg for Card 1 and 20 deg for Card 5).
You also need to assign different values to the z-index of the cards – use the values form the code below.

#card-1 {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  z-index:1;
  left:150px;
  top:40px;
}
  
#card-2 {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  z-index:2;
  left:70px;
  top:10px;
}
  
#card-3 {
  background-color:#69732B;
  z-index:3;
}
  
#card-4 {
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  z-index:2;
  right:70px;
  top:10px;
}
  
#card-5 {
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  z-index:1;
  right:150px;
  top:40px;
}

Now we only have to add the different hover states to the cards.
First we’ll assign a general hover state to all cards in which we assign a high z-index to the currently hovered card. Like this the appropriate card is always in front.

Then you have to add individual transform values to each card. This time we need to use the transform property’s scale function besides the rotate function.
In the code below each card is scaled up 110% (x1.1) and rotate 2 degrees (you have to consider the card’s original rotation though, e.g. from 10 degree to 12).

/* Hover States */
  
ul#index_cards li:hover {
  z-index:4;
}
  
#card-1:hover {
  -moz-transform: scale(1.1) rotate(-18deg);
     -webkit-transform: scale(1.1) rotate(-18deg); 
}
    
#card-2:hover {
  -moz-transform: scale(1.1) rotate(-8deg);
   -webkit-transform: scale(1.1) rotate(-8deg); 
}
  
#card-3:hover {
  -moz-transform: scale(1.1) rotate(2deg);
   -webkit-transform: scale(1.1) rotate(2deg); 
}
  
#card-4:hover {
  -moz-transform: scale(1.1) rotate(12deg);
   -webkit-transform: scale(1.1) rotate(12deg); 
}
  
#card-5:hover {
  -moz-transform: scale(1.1) rotate(22deg);
   -webkit-transform: scale(1.1) rotate(22deg); 
}

Finally you just have to add some styling to the content of the cards.
Despite the CSS-Reset we used there might be differences in the margin and padding of the custom @font-face fonts, there seem still to be some issues regarding cross-browser compatibility.

In my specific example I added rounded corners, a drop shadow and background to the featured images and some minor adjustments to the text.

/* Content Styling */
  
ul#index_cards li img {
  margin-top:7px;
  background:#eee;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-box-shadow: 0px 0px 5px #aaa;
  -webkit-box-shadow: 0px 0px 5px #aaa;
}
      
ul#index_cards li p {
  margin-top:4px;
  text-align:left;
  line-height:28px;  
}

As you see you can achieve great results with the help of CSS3.
I could imagine an interesting authors page or extensive navigation that use effects similar to this.

Unfortunately CSS3 effects aren’t supported in all current web browsers yet. Our specific example will look best in the latest versions of Safari and Chrome, followed by Firefox, which is missing the transition effect. Internet Explorer 8 and Opera have appropriate fallbacks (even though they’re not even close to the original effect), whereas it doesn’t work at all in Internet Explorer 7 and earlier versions.

If you want to find out more about CSS3 and discover some of the other advantages it offers you should check out css3.info.

But we have more than just a plain tutorial for you, we’ll also talk a little about the Mirror Effect and how and where to use it. Finally we also have a mini showcase of web sites that use the mirror effect.

The Tutorial

Step 1

Open a new document (you can choose the dimensions by yourself) and add the object or text of your choice in form of a new layer. I chose a styled-down version of the DesignLovr logo.

Step 2

Duplicate the layer (Ctrl+J) and flip the new layer by going to Edit>Transform>Flip Vertical.

Move the freshly flipped layer down until the bottom of the original layer and the top of the duplicated either touch or have only little space in between them (depending on which method you choose you get a slightly different Mirror Effect, just play a little around and see what you like).

Step 3

Now you have to add a layer mask to the duplicated layer by clicking on the little symbol at the bottom of the layer palette (see the red circle below). Select the Gradient Tool (Shift+G), choose black and white as colors in the Tool Option Window (it usually is placed directly above your canvas) and move the white stop to the left until a location of 50% is indicated (see screenshot below).

Now create the gradient by clicking on the lowest point of your duplicated layer (in my case it was the bottom of the D of DesignLovr) and pulling a straight line to the highest point (the end of the g in the example).

Step 4

The only thing left to do now is to lower the opacity of the duplicated layer in the Layers Palette (usually a value between 30% and 50% is good) and you’re done. Looks great, doesn’t it?

Final Result

In order to create an even stronger mirror impression you can also add a split gradient to the background as I did below.
You can achieve different results by playing with the distance between the two layers, the gradient you add to the layer mask and different opacity values.

I also prepared a version in which I used an icon (from the Smashing Retro Icon Set) instead of text, the process is the same.

Additional Info

The Mirror Effect had his big moment a few years ago during the Web2.0 boom. It was heavily (over)used on a great amount of web sites and is out of this reason a little bit frowned upon by many web designers nowadays. But that is no reason not to use this effect if it suits your design.

The mirror effect can help to give your design depth, realism and a polished, shiny look. As you will see in the showcase it is often (and should be) used very subtle and added rather to objects than text. It seems to be especially popular in the combination with iPhones (another, overused web trend).

Just do yourself and others the favor and use the effect only if it really fits rather than on your next grunge design.

The Showcase

The amount of web sites that use a mirror effect is much smaller than it was just a few years ago, but you can still find it on selected web sites.

In combination with a simple black or white background it adds an extra ounce of elegance (reminding one of shiny, polished surfaces) to a web site and can help to emphasize a product or object.

Enjoy!

960pixels

Cookmate

Filemaker

Maridaje Digital

Media Temple

MobileMySite

Newstream Design

Suki

Tanner + Tailor

VixML

Admittedly not every blogger is a born writer, but in order to successfully present your ideas and articles on your blog the following tips and ideas come definitely in handy.

Keep it short:

The internet is a fast-paced medium and no one actually has the time to read your posts in all their length and beauty because there are another 1000 posts and articles waiting to be read, tweets to be tweeted and profiles to be updated.

It’s great that you have an extensive knowledge of Photoshop, but if your posts deals with the Type Tool stick to it and don’t end up talking about the Pen Tool as well.

Only write about things that are relevant to the theme of your post and to your reader even when it is tempting to write about other, interesting things (consider writing a separate blog post or linking to other posts on the web that deal with the respective theme).

Once you are done writing consider as well to re-read the article and cut excrescent parts and sentences as well as to shorten other parts further down.

Keep it simple:

The internet is not only fast-paced, but also manifold and international. Keep in mind that not all your readers have the same educational background and might not even be native English speakers (as a matter of fact only 35% of all Internet users speak English). Don’t use complicated words (I’m not talking about technical terms related to the theme of your blog) and keep your sentences short and simple.

Make also sure that you double-check your grammar and spelling, especially if you aren’t a native English speaker yourself. Very few bloggers will be able to afford their own, professional proof-reader, but most Text-Editors come nowadays with a built-in spelling and grammar check (even Wordpress has one).

Provide your sources, examples and links:

In order to make your posts easier to understand as well as to provide your readers with an easy way to read more about the topic you should always provide your sources and links to related articles as well as concrete examples (if possible).

By providing links for further reading and the sources of your information you also help to enforce the first rule of keeping your post short – if interested your reader can easily find out more about specific issues.

Examples allow you to create a connection to the real world as well as they help to reinforce your point.

Support your post with graphical elements:

Another great way to make your post more interesting and to visualize your topic is the use of illustrations, images or other graphical elements.
If you can create illustrations and graphs yourself and have the time to do so then you definitely should, but there are also loads of great stock image sites, where you can buy great graphics and photographs (Completely free: stock.xchng or not so free: iStockphoto or dreamstime)

Choose wisely and creatively, but don’t try to force it if you don’t find a good match. Better go without an image than with an image that has nothing to do with your post.

Stick to your style:

Finally it is important that you stick to your writing style once you chose one.

Decide whether you write in the first person (as well whether or not you want to use singular or plural) or third, whether you write factual and serious or funny and casual, whether you address your readers directly or not and so on.

Don’t switch between different writing styles within a post. This only creates confusion and gives a very unprofessional impression.
You should apply this rule not only to individual posts, but to your whole blog. Consistency is very important in order for your blog to gain its own personality.

If you apply these simple tips to your blog posts and articles you can take them immediately to the next level. Your readers will surely appreciate your efforts and reward you with numerous comments, tweets and diggs.