A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.
CSSgirl Dev & Design -
Master of CSS and Dirty Diapers
Category Archives: Web Design
Aug
Typography Essentials – Free Fonts, Tools and Tutorials
Aug
3
Another important aspect in web design (combined with the right color combinations and Photoshop essentials and brushes) is getting just the right typography for your design. There are many, many free fonts available as well as tools to build your own. Not only that but you can use free online resources to determine the name of that elusive font you’ve seen used elsewhere and want to grab it for yourself.
Once you find the font perfect for your project then you have to know how to use it. While some of the best resources about learning more about typography are books (Thinking with Type and The Elements of Typographic Style are two of my favorites) there are tons of online articles and tutorials written by people in the design industry that will help you better your typography.
How to Use CSS Sprites With Son of Suckerfish Drop Downs
Jun
22
So recently I was working on a project that required image based navigation AND drop down menus. From the get-go I decided to use CSS Sprites for the tabbed menu for the normal, active and hover styles. I also decided the best way to implement the drop down was to use the “Son of Suckerfish” drop down menus heavily modified from the original code to fit in with the original programming I had done for the menu.
I’ve explained before how to use CSS Sprites for changing images, so I won’t go into too many more details on how to accomplish this, but to recreate this for your own site you will need to create one sprite for your normal tab, hovered and current/active tab. That’s three sets of tabs in one file.
Rounded Corner Boxes With Expandable Heights Using CSS and Images
Jun
9
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!
Photoshop Essentials – Thousands of Free Brushes, Gradients, Layer Styles and More!
Jun
1
Photoshop is an amazingly powerful tool. It alone can allow you to create fantastic designs and photo manipulations. But, there are many, many other resources available to designers to enhance Photoshop and increase your productivity.
I’m talking about free gradients, patterns, brushes, layer styles and more that you can download and add on to Photoshop.