Productivedreams.com ProductiveDreams - Everything that web designers need, owned by Gopal Raju

A blog to keep you updated on the latest design trends.
RSS

Posts Tagged ‘Tutorials’

Making gallery submissions easy for designers

Filed Under
08 Mar 2010
Submitting designs to galleries has always been a hectic task for designers. Do you agree with me? This post is to give you an overview on the procedure I follow to make this easy. If you have better ideas please do contribute via the comment form below.

Requirements
1. Firefox Sorry IE users!
2. InFormEnter AddOn for firefox
3. Details about your logo/website (will explain this below)
4. Image of your logo in various dimensions (will explain this as well)

gallery-submission-firefox

I assume that you’ve already read my post – 22 Sites & Galleries to submit your logos. In this post I’ll walk you through my logo design submission process, which can be made use for CSS gallery submissions as well.

Step 1: Bookmarking the gallery forms

(more…)
5 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.

PNG Image
Colorful PNG Image


Desaturated GIF 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


			

			




		
		
				

	
	

















	



 Copyright 2006-2010 ProductiveDreams. All Rights Reserved. About Gopal Raju. Hosted by MediaTemple