You’ve seen it done in programs like Adobe Dreamweaver, but believe it or not, there aren’t a whole lot of decent CSS generators in the flavor of my new tool (that I could find with a thorough Google search at least).

The Meta Titan CSS Builder provides a human readable interface for generating your selector (class/id/tag) code with valid syntax on the fly. Fill out the form, press build, copy the code, paste it into your stylesheet. I believe it will improve your productivity, especially if you’re a beginner / intermediate user and haven’t memorized all of the property names and appropriate values.

Give it a try, and a bookmark - click here!

This is the product of about 1 weeks worth of casual coding. I’m planning a version 2 that cleans up the interface a bit, and I’ll be taking suggestions on what I can approve.

Everyone knows that the best traffic you can get is organic, meaning people who come to your site naturally with genuine interest. Search engines like Google & Yahoo are notorious for placing a high value on the amount of websites that are linking to you. While their algorithms haven’t been completely unraveled yet, SEO specialists have a pretty good idea of how to make your site rank higher, and it usually starts with link building (assuming you have quality content first of course!).

The amount of links your site has indexed in Google & Yahoo can change often, so checking can be an arduous task. Luckily there are a ton of tools out there for this, but you’re not here for that, are you? You’re here because you want the code to run your own service, or maybe you want your own local copy of it, or maybe you just want to see how it works. The script below will check your backlinks in Google and Yahoo, as well as your Alexa rating. Feel free to modify and redistribute (non-commercially) as you see fit.

Live Demo | View Source Online

A complete reference of every HTML tag available, good for any web developer - new or experienced. Several tags that have been deprecated have been omitted from the list. Click on each tag for more information and sample usages. This took about 4 hours, I hope you find it useful
(more…)

Whether you’re making an application or a web design, it’s useful to have a collection of high quality icons handy. Your users will appreciate the professional touch and ease of navigation that they bring. Over the years I’ve collected a ton of sets, I spent a couple hours digging through them all and compiling this. All downloads are hosted on my server in their original unaltered archives and include a mirror to the author’s website if applicable, this is a proactive measure in case their sites ever disappear.
(more…)

If you’re somewhat new to making websites, or if you’re like me and find yourself making new websites on a regular basis, whether it’s for work or something else, you might find this useful. I find it a chore to constantly make the same files when making a new website, so I’ve put together a basic startup kit that contains all the files/folders I usually need to get going with the development. Here’s what’s included:

index.php > With doctype & appropriate head tags defined.
robots.txt > With major search engines allowed by default, cgi-bin disallowed.
style/global.css > With a couple basic preset classes.
style/index.html > Blank file to disable directory browsing.
images/spacer.gif > 1×1 pixel transparent gif.
images/index.html > Blank file to disable directory browsing.

Download: http://www.metatitan.com/files/sitestartup.zip

Extract the zip and use these files as a starting point when making websites. There isn’t instruction included with these files, if you know what you’re doing you’ll know what to do with them. If not, I’ll probably have a guide for this eventually.

So you want to make rollovers and not have to deal with messy javascript? Good choice, CSS can do this for you. We’re going to show the top 50% of an image, and when you put your mouse over it, we’ll change to the bottom 50%. This is better than traditional rollovers in that we’re not calling a 2nd external image every time someone rolls over it.

You’ll need to make an image with twice the height of the original and have the rollover on the bottom half. Here’s the image I’ll work with in this example:

Once you have your rollover ready, we’ll start by pasting the following into your CSS stylesheet. Our image above is 200×100 pixels so we’ll define those dimensions below, except 1/2 the height, so 50px. Change the background image URL to where you uploaded it on your webserver.

Save your stylesheet and insert the following code wherever you want your rollover to appear in your document.

You can implement the basic concept a number of different ways than described above, try it out and see what works best for your project. Our final product will look and function like:

You’ve just made an awesome PNG image with alpha transparency, it looks great in FireFox, but your excitement receives a swift kick in the butt when you test it out in Internet Explorer. Don’t worry, there’s a very easy way to make IE 5.5+ obey your transparency needs. All the guides out there can be really overwhelming, so I’ll make this as quick and painless as possible so you can get on with your day.

First let’s grab the fix by Angus Turnbull and a blank “spacer.gif” image, you’ll need to right click / save as and upload these files somewhere on your web server:
http://www.metatitan.com/files/iepng.htc
http://www.metatitan.com/images/spacer.gif

Open the iepng.htc file and near the top edit the path to spacer.gif to where you uploaded it on your web server. Now add this into your CSS stylesheet and change #yourclass to the class you’re working with, and the URL to where you uploaded it.

Now we can have transparent pngs like so:

This can make backgrounds defined in “#yourclass” transparent as well. You can mess around it, and define the behavior in a different way if that works better for your project, it’s quite flexible and easy to work with.

Quick Mask is a tool in Adobe Photoshop that allows you to easily isolate an area of the layer you’re working on. This translates to being able to take a man out of 1 picture so that you can place him in different picture, among other nifty things. Like most Photoshop tools, there’s 1 way to do it, and then there’s 100 other ways. In this tutorial I’ll be teaching you the method that I use on a regular basis to quickly use the… quick… mask.

Here’s the image we’ll work with.

Our goal here will be to extract Construction Man and the paper he’s holding and place him on a new image. Let’s start by firing up Photoshop, opening this image, and switching to Quick Mask Mode. This can be done by pressing “Q” on your keyboard or clicking the following button on your Tools window (Window > Tools if you don’t have this open).

Now select the “Paint Bucket Tool”, and fill in your entire picture, it doesn’t matter what color. If you are in quick mask mode, you’ll see a red overlay appear on your picture.

Select the “Polygonal Lasso Tool” and its sub-option “Add to Selection” (the depressed options are shown below). Zoom in real close so you have a precise environment to work in, and begin selecting an area of the man’s lag with the P.Lasso tool. Once you have a nice chunk, press your delete key and you’ll see the red overlay disappear and the colors of his pants will appear. The beauty of the lasso tool is you can cut him out piece by piece at your own pace, give it a few tries, it shouldn’t take long to master this tool.

Your image should look like the following once you have fully cut out Construction Man using the P.Lasso tool. If you’ve made a mistake, you can choose the brush tool to fill in the red overlay.

Now let’s exit Quick Mask Mode (Press “Q” or click the button again). You should now have the entire man selected, press “CTRL+C” and “CTRL+V”, this will paste the extracted Construction Man on a new layer by himself, leaving the original picture intact below it. You can now move Construction Man wherever he pleases, like so:

Have fun with it! It’s a really useful tool for any graphic designer.