Web Development Blog

I’ve been kind of a dick lately ranting in the last few posts so decided I should be nicer. Here are some free smilies for your wordpress blogs (or what ever you want to use them for). These are fun to make! Learn how to make and install them here.

Download SquareSmilies in zip format:
Square Smilies (43)

icon	text	text	full text	icon	full text
	:)	:-)	:smile:		:lol:
	:D	:-D	:grin:		:oops:
	:(	:-(	:sad:		:cry:
	:o	:-o	:eek:		:evil:
	8O	8-O	:shock:		:twisted:
	:?	:-?	:???:		:roll:
	8)	8-)	:cool:		:!:
	:x	:-x	:mad:		:?:
	:P	:-P	:razz:		:idea:
	:|	:-|	:neutral:		:arrow:
	;)	;-)	:wink:		:mrgreen:

No Comments yet »

I was in need of doing some browser testing tonight and I thought I’d share the free sites that can be used for checking your web designs across multiple browsers and platforms.

browsershots.org
This is definitely the coolest free browser testing tool. There are lots of browsers and platforms (mostly Unix based) to choose from and the service is fast. If you need to check on alot of browsers at once then this is the place to go. It’s also open source in case you want to start your own browser testing network.

browsrcamp.com
Need to see how your site looks on Safari? You can test it out here.

ipinfo.info/netrenderer/
And this one will show you how your website looks in different versions of IE. It has a cool mixed and difference feature that will overlay IE 6 and IE 7 on top of each other. This one doesn’t make an image of the entire page like the two previous ones do.

That’s all of the free ones that I know about.

4 Comments »

After IE 7 came out with 24 bit PNG support, I really wanted to figure out how to use PNGs better in my designs. However, the 50-60% of people still using IE 6 just didn’t seem to justify going in new directions with PNGs. I knew you could make PNGs work in IE 6, but I always thought it was difficult and buggy. Well, as I found out, its not as hard as I thought. This tutorial will show you just how easy it is and how you can do things with your designs that are impossible without PNGs. I assume you have a pretty good knowledge of css, and will be able to use the source code of the examples as a tutorial.

I’ll start off with the examples. Click here to see the most awesome use of PNGs for backgrounds ever. Don’t blame me if your eyes pop right out your head

As you can see from the examples the big deal with using PNGs is that you can mix two or more background ‘effects’. All of the examples utilize a gradient fade in a background div, along with a gradient fade around the square that represents where the page content would go. Examples 2 and 3 throw a pattern on the body background and mix all three images seamlessly. As far as I know, there is no other way to do this with centered page content, a fade around the content, and a pattern in the background that is not horizontal stripes.

So how is it done??

Read on to find out…

Pages: 1 2 3

5 Comments »