Archive for the ‘Tutorials’ Category
I’m a huge, huge fan of the latest Firefox release. But I was really, really disapointed that a LOT of my very favorite (and most used!) plugins were incompatible. The plugin I felt most lost without was Aardvark, which I use every single day, practically all day long to aid me in development, editing and design.
Aardvark is a simple little Firefox plugin that when activated (right click and choose “Start Aardvark”) lets you highlight each elements on the page with a red border - not only that, a tab appears on the border with the element and id/class that is associated with it.
This plugin is critical for me (along with Firebug) when diagnosing layout problems.
Rounded corners are a great design element to escape from the blocky/boxiness a lot of web designers fall victim to. I remember the first time I created my own rounded corner box using Photoshop and HTML/CSS. What a thrill :) A lot of people shy away from it because it SEEMS a lot more difficult than it really is.
I’m going to show two ways to create this effect using Photoshop (or the graphic editor of your choice) and HTML/CSS. There are other ways to create this effect using just CSS - but I really am not a big fan of it because it creates a lot more empty divs than this method. Yes if images are off you will lose this effect - but I’m willing to sacrifice that.
Like I said I’m going to demonstrate two ways to accomplish this. The first is using just a flat rounded corner image with no other effects. The second will have a box with a drop shadow, border and gradient. :) So let’s start easy!
There are probably a million different ways to do this, but I’m going to show the way that I have preferred to do it, combined with my favorite centering position method.
So the simple way to do this is as follows:
If you’re not using CSS Sprites (also known as the CSS Image Replacement Method) you should be. Many coders seem to fear this easy and basic way to use images with CSS and I’m not sure why.
The benefits of CSS Sprites are plentiful, but you (and your visitors) will benefit from this method ten-fold. For the coder it’s less slicing and cropping of images, and for the user it rids us of that annoying image loading flash when you use CSS to replace background images.
I’ll take you through some quick steps to get started with CSS Sprites.
What’s worse than spending a week coding a brand new design to realize that your site looks like a bloody mess in IE6? Luckily we have a valid way to fix these problems without having to use hacks in our CSS and destroy the completed design that looks good in all other browsers.
IE Conditionals are an easy and awesome (and valid!!) way to insert any IE specific styles* into your code. You can specify styles for just IE6, just IE7 or for both. Not only that you can specifiy styles to affect all versions of IE below any version number. (*actually these conditionals can be used for anything that you want to display to IE specifically)
