Quick Tips Of The Week – September 22nd 2009
Quick tips of the week for designers is round again, I will be posting five great tips that I discover during the week and share them with you! This week learn how to fix PNG issues with IE6, where to get a ready made 960 grid layout, create your own fonts, rounding corners using CSS and rotating objects using CSS!
#1
Everyone has issues with IE, many people have switched other to browsers such as Firefox, unfortunately many people still use Internet Explorer therefore designers still have to cater for it. One of the recurring problem people tend to get is with PNG images, especially in IE6. PNG images display a grey area where it should be transparent.
Well here is one of the easiest and quickest ways to overcome this; its called the DD_belatedPNG Fix. You just simply download and insert some simple JS add some tag classes to the images and your done. Download it here.
#2
Whenever you come to design a new site in Photoshop or any design software of your choice you really should be using the “960 grid system“. Here is a great little download for the grid system that caters templates for Fireworks, InDesign, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio and Expression Design.
#3
Have you ever wanted to create your own font? You think its too complex to do it yourself? Well fontcapture.com is a fantastic web service that is currently in beta stage, yet works perfectly to let you create your own font.
First simply download the PDF, print it off and fill it in. Then scan it into your computer and upload it to the service. They will then process it and create you a downloadable font. Definitely check the out.
#4
Webkit 3.0 capable browsers such as Firefox and Safari now have the capability to round edges using pure CSS. Up until recently if you ever wanted a round corner/box you need to use images. Not any more, this simple piece of CSS will do it for you! Please note that browsers such as the dreaded IE don’t support this; it will simply show as a standard square box.
#roundcorner {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
As of now the “border-radius” code isn’t supported, however it will be in the near future so it doesn’t hurt just to put it in there!
#5
Heres another little webkit 3.0 CSS tip for you! Rotating objects using pure CSS. Just simply use this “transform” code to do so. You can see a really good example of this used in a tutorial over at Line25.com
#rotate {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
Again note that this won’t work in IE browsers, or any others that don’t support the webkit abilities.
Please let me know what you think of this weeks top tips, or if you have any of your own please contact me with them and they will be included in next weeks issue!
Similar Posts
