Workshop

Free Wallpaper Generator!

Filed Under

09 Nov 2008

It’s been so long since I worked on photoshop droplets and actions. So just thought of creating a custom droplet for my readers. Droplets are used to apply actions to one or more images, or a folder of images. All you have to do is, drag the images or the images folder onto the Droplet icon. Yes, it is that simple!

I’ve used Adobe Photoshop CS3 to create this droplet which helps you generate custom artistic wallpapers in seconds. I believe, this is the first of its kind on the web. A sample wallpaper has been included as well.

Note: The quality of the wallpaper depends upon the image used.

Wallpaper Generator

Installation and Usage Instructions:

1. Download the zip
2. Decompress
3. There are two folders, one for the MAC and the other for Windows users.
4. Move the droplet (File Name: pd-wallpaper) to the folder of your choice.
5. Drop your images on the droplet
6. Your custom wallpaper will appear in your desktop

So what are you waiting for? Drag n drop n enjoy!!

Download Free PD Wallpaper Generator Version 1.0

16 Comments

IE CSS hack without using any hacks!

Filed Under

04 Oct 2008

A few days back while working for a MAJOR client (sorry, can’t mention their name), I discovered something new (I hope it’s new ) – A pure CSS based image replacement solution for IE. This method is helpful especially to solve the PNG issue in IE6. I know there are many CSS hacks available out there to solve the PNG transparency issue, but this method doesn’t need any hacks!! Interesting isn’t it?

Step-1: Let’s review the HTML part first.

HTML
01 
02 <html>
03  
04 <head>
05 <title>ProductiveDreams</title>
06 <link href=”style.css” rel=”stylesheet” type=”text/css”/>
07 </head>
08  
09 <body>
10 <div class=”bg-image”></div>
11 </body>
12  
13 </html>
14

The following are the images that I've used for this tutorial. The image without saturation is a .gif and the colored one is a .png. You may right click and save the image.

Colorful PNG Image

Desaturated GIF Image

Step-2: The stylesheet

I included the following code in the stylesheet

CSS
01 body{
02 background:#000;
03 text-align:center;
04 }
05  
06 div.bg-image{
07 background:transparent url(images/pd.png) no-repeat center !important;
08 width:134px;
09 height:134px;
10 }

Let me walk you through the CSS. The first part simply applies a background color to the body and center aligns the div element. In the second part, I've specified the width and height of the div (134px) based on the image dimensions and have given the .png as the background image. Everything works fine?

Step-3: Solution for IE

This the most interesting part that does the magic.

I added another line of CSS code just below
background:transparent url(images/pd.png) no-repeat center !important;
and the following is the code
background-image:url(images/pd.gif);

Check out the result in IE! Awesome.... isn't it? In all other browsers except IE you will see the colorful png image.

Consolidating the entire thing

So. the final css would look like:

CSS
01 body{
02 background:#000;
03 text-align:center;
04 }
05  
06 div.bg-image{
07 background:transparent url(images/pd.png) no-repeat center !important;
08 background-image:url(images/pd.gif);
09 width:134px;
10 height:134px;
11 margin:0px auto;
12 }

For your ease, I have attached the sample files as a zip. Feel free to download it

and do let me know your feedbacks.

Download CSS Solution for image replacement

23 Comments

Min-width issue in IE6

Filed Under

23 Sep 2008

This is something for those who care for IE6 and not W3C Standards. Recently I worked on a project, for which the layout was liquid and one of the requirements was to use a minimum width of 1000px. Is that a problem? Not at all.

The problem was to make it compatible on all major browsers, including IE6 !!!!!. I wonder why people still use IE.

As usual, I started searching for the solution on the right top of my Firefox window (yes, google!) and found a few websites which had discussions on the same topic. Most of them had lengthy posts and not the real solution. After going through a couple of sites, I concluded with the following solution. I hope this would help those who come across the same problem.

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

Just add the above line in your CSS. Replace 1000px with the min-width value and replace 1002 with a value slightly greater than the min-width. To define the max-width, just replace the "<" with ">".

Known Issues:

Only works with JavaScript enabled browsers
Not W3C valid

That's all! I don't want this post to be lengthy like the others I went through

5 Comments

Pages (2) « 1 2

M	T	W	T	F	S	S
« Mar
			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

Productivedreams.com

Workshop

Free Wallpaper Generator!

IE CSS hack without using any hacks!

Step-1: Let’s review the HTML part first.

Step-2: The stylesheet

Step-3: Solution for IE

Consolidating the entire thing

Min-width issue in IE6

Known Issues:

Twitter Status

For email updates

About me: Gopal Raju

Blogroll

Friends

Top Commenters - Love my readers

Blogroll

Featured In

Friends

Posts by Date

01
02	<html>
03
04	<head>
05	<title>ProductiveDreams</title>
06	<link href=”style.css” rel=”stylesheet” type=”text/css”/>
07	</head>
08
09	<body>
10	<div class=”bg-image”></div>
11	</body>
12
13	</html>
14

01	body{
02	background:#000;
03	text-align:center;
04	}
05
06	div.bg-image{
07	background:transparent url(images/pd.png) no-repeat center !important;
08	width:134px;
09	height:134px;
10	}

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