As you would be aware, I redesigned the PD logo recently and updated my twitter theme based on the new logo. The next thing that sprang in my mind was to design a wallpaper for my readers and here it goes. This one was created from scratch using Photoshop.

Both Standard (1024×768 and 1600×1200) and Wide versions (1280×800 and 1920×1200) has been included in the zip file.

Preview

Please do let me know (via the comments section) if you need this wallpaper in a different resolution

If you are looking for a definition of parallax, here it goes. As far as the web (especially design) industry is concerned, parallax is the arrangement/animation of images in a way that lets you feel the distance between them.

For example, imagine that you are looking through the window of a moving vehicle. You will see the objects closer to you moving faster compared to the distant ones. The sun stays still while the trees, buildings and other objects move.

In this post I would like to walk you through different posts, examples and tutorials that would help you achieve this effect.

This technique was initially used in 2d video games and now mostly seen in single page portfolio websites and website headers.

2. Parallax in use

I would like to show you a few hand-picked websites that uses parallax before I proceed.

Eric J – This is one of my favorite websites using Parallax in the way it should be. The motion of the wheel and the smoke that comes out of the silencer as the scooter moves adds up to the parallax feel.

Markus Neidel – This is an awesome 3d vertical parallax (flash).

Silverback – To see the effect in this site, you would have to resize your browser window and notice the header region.

Umaghet Zeggen – All you need to do is move your mouse (towards any direction).

Squaredeye – Resize your browser window and notice the movement of clouds in the header. A css based parallax.

Dezignus – Move your mouse over the header region (towards any direction).

3. Now, how do I create Parallax?

Let’s see how to create this effect using javascript, flash and other frameworks.

Using JQuery

You’d probably be aware, I am a JQuery fan and for that reason I would like to first list down the methods using JQuery to achieve the Parallax effect.

These tutorials use jparallax – a jQuery plugin to create parallax

Create a Parallax Website Header

Using Mootools

Not familiar with JQuery huh? Here goes a tutorial that uses mParallax a mootools adaptation similar to jParallax.

Another demo using Mootools

Using Scriptaculous

This one uses scriptaculous another popular javascript framework.

Using Javascript – A Vertical Parallax

Using pure CSS

Unlike the ones above, this would work only when the user re-sizes the browser window. This is achieved using css positioning.

A tutorial on how to create the Silverback Parallax (shown above) using CSS.

Examples of and How to Create the CSS Parallax Effect

This is a really interesting one! A parallax illusion with CSS

Parallax using Flash

A step by step tutorial by webdesignerwall.

Creating parallax with flash cs4

Are you an AfterEffects freak?

If so, this tutorial is for you. Create a Realistic Camera Move with Parallax.

So, that’s all about Parallax. I hope this post was informative

Paper Planes in websites

Please share your thoughts on this trend using the comment form below

Page Peel Icons

The icons are transparent PNGs and the available dimensions are 128 x 128 and 64×64

Preview

Thanks guys! Feel free to use the comment form, if you want me to add a service to this iconset.

In one of my previous trend reviews, I had mentioned about the cofeecup trend. What if you drop the cofee on your table or paper? yes, it becomes another trend

Do you think adding some coffee stains to your design would make it look better? Here goes a list of hand-picked designs that proves it! I’ve included links to tutorials on how to create such stains in photoshop as well.

Stains in websites

Coffeenatic

iSpoil

teh C peng

The Greg Brady Project

The Piss Biscuit

Mike Desjardins

What would you need to create these cool hot stains?

Photoshop brushes

Now, how to create these brushes?

Coffee stain social networking iconset

Wallpaper

wallpaper

And finally, a twitter theme

I hope you enjoyed this post. Stay tuned!

This post is about 10 commonly used css properties that were impossible to implement in IE6. While redesigning ProductiveDreams, I came across a few css compatibility issues with IE6 and had to spend hours searching the solution for each issue.

So I just thought of putting them together to save your time. These css hacks (I would rather call them ’solutions’ since, not all of them are purely css based) solves the major compatibility issues in IE6.

1. Rounded or Curved Corners

As you would know, all modern browsers support border radius. Curved corner is something that was merely impossible to achieve in IE6. Recently I came across an htc file (especially for IE) developed by Remiz from HTMLRemix.com, which solves this issue.

The first thing to do while using htc is to add the correct MIME type for htc behavior on your server. This is REALLY important before you proceed. The following are steps:

For more details on how to add MIME type visit Microsoft Support

All you need to do is download the htc from HTMLremix or Alternate Link and include the following code in your CSS.

CSS
1
2
.div_class_name{
3
behavior:url(border-radius.htc);
4
}
5

Jquery Alternative: jQuery Corner a jQuery plugin that creates crossbrowser compatible rounded corners!

2. The popular PNG transparency issue

Every designer would have faced this issue, obviously! Though there are a number of javascript based solutions, I couldn't find anything that supports background position. As far as I know all JS based solutions end up with the same result. This is something that worked flawlessly for me. All other solutions are based on this filter.

Preview

CSS
1
2
.class_name{
3
_background:none;
4
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image_name.png', sizingMethod='scale');
5
}
6

HTC Alternative:If the solution above doesn't work for you, you may try this htc alternate.

Known Issues:
1. Doesn't support CSS Sprites: If you are using sprites, then just forget this hack. Background positions doesn't work with PNG hacks .

If you need background-position support for PNG, then go for DD_belated

The best solution is to use a .gif or png-8. Check out the best way to do this without using hacks!

3. Opacity

This is pretty much straight forward and easy to achieve compared to the other hacks.

Preview

CSS
1
2
.opacity_div {
3
  filter: alpha(opacity = 50);
4
}
5

4. Fixed position

All browsers support the css property 'position:fixed', but not IE6. I had to find a solution for this since the social icons in this blog are having a fixed position.

Preview

CSS
1
2
* html .fixed_div{ 
3
position: absolute; /* position fixed for IE6 */ 
4
top: expression(104+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
5
left: expression(15+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px'); 
6
} 
7

Just change the top(104) and left(15) values, to position the element.

This method works very well, but you would notice a jerk while scrolling the page. So here goes a fix for that.

CSS
1
2
* html { 
3
background-image: url(image.jpg); 
4
} 
5

All you need is a 1px x 1px image. This might sound weird but it works!

5. Min-width & Max-width

This is simple as well and was already posted on ProductiveDreams

Preview

CSS
1
2
.div_class_name{
3
width: expression(document.body.clientWidth < 1000? "1000px" : "auto");
4
}
5

CSS
1
2
.div_class_name{
3
width: expression(document.body.clientWidth > 1000? "1000px" : "auto");
4
}
5

Jquery Alternative: This is an alternative solution for the hack above. JQminmax is a cool plugin which allows you to set minimum and maximum values for both width and height.

6. Hover for non anchor elements

Unfortunately, IE6 supports :hover, only for anchor tags. That means css based dropdowns would not work in IE6. CSShover.htc is the best solution for this. You may download the htc file from xs4all.nl

Preview

CSS
1
2
body { 
3
behavior: url("csshover3.htc"); 
4
} 
5

As I mentioned previously, don't forget to add the correct MIME type for htc behavior on your server. This is the key.

7. Min-height & Max-height

Preview

This is not really a hack since it uses valid css.

CSS
1
2
.div_class_name{
3
min-height: 140px;
4
height: auto !important;
5
height: 140px;
6
}
7

CSS
1
2
.div_class_name{
3
 height: expression( this.scrollHeight > 199 ? "200px" : "auto" );
4
}
5

8. Bicubic scaling for images

One line code that solves the image scaling issue in IE6 and 7. Hats off to Chris Coyier for coming up with this solution.

CSS
1
2
img {
3
 -ms-interpolation-mode: bicubic; 
4
}
5

9. Negative text indent for input buttons

Negative text indent is normally used to hide the text value inside buttons, which lets you use custom background images for them. For some reason, IE doesn't support negative text indent for input buttons. For more details about this issue check out this post

Preview

CSS
01
02
input.button {
03
width:114px;
04
height:37px;
05
border: none;
06
background: transparent url(images/button_image.gif) no-repeat center;
07
overflow: hidden;
08
text-indent: -999px;
09
}
10

10. Text shadow

The shadow filter is one of the useful filters for IE.

Preview

CSS
1
2
.text_shadow{
3
filter: Shadow(Color=#999999, Direction=135, Strength=5);
4
height: 1%;
5
}
6

This is the third time I’m redesigning PD (I would rather call this a facelift). I’ve used some jquery to make things lively

So what are the major changes?

1. The Global Search

Type something(meaningful) on the Search field on the top right and wait for a second or two.

2. My social network

This section lets you to connect with me. Be my friend!

3. The Twitter Bird

I don’t want to explain this. Just move your mouse over the twitter bird.

4. The JQuery(moving) tabs

A simple JQuery animation.

5. Digg and Retweet buttons

You can see this in the post detail pages.

6. Calendar – shows posts of the current month

7. The Page peel icons

These icons already existed in the previous design but still I think it’s worth a mention.

8. Top Commenters

I love my readers and especially those who take the pain to comment or thank me for my efforts.

Now it’s time to let me know your opinion. Do you think this design is better than the previous one? Feel free to comment here

This blog is nothing without its readers. I would also like to thank my twitter followers who were helping to spread the word.

Update: Wow! I won another Contest! The GrandZine Contest! I am really excited since I was not even aware of this contest

I received many emails requesting for those social media icons that are peaking through the left hand side of this page (or any post page on ProductiveDreams). So I thought of putting together a set of social icons for my dear readers. The set contains 16 social icons in (transparent)PNG format.

Preview

PagePeel - A Free Social Media Iconset

What are you waiting for? Get ready to peel your web pages!!!

If you like my website, please vote for “Productive Dreams”. I’m joining in under “Best Grunge” category.