Archive for the ‘Tutorials’ Category
Pressed Button State With CSS
There is certain anchor state in CSS that I don’t see used very often — actually, it’s something I haven’t really used myself, but something which I now realize can be very useful. I’m talking about the “active” anchor state.
The active anchor state is the state an anchor (a link) is in when you click on it. The moment you click on a link, it becomes active. We all use the “hover” or “visited” states, but the active state can come in very handy when you’ve got custom styled buttons.
Scalable Content Box Using Only One Background Image
A colleague of mine was recently trying to cut down on image usage when working on a web design project. He asked me whether it was possible to use one image for a vertically scalable content box that had both, a unique heading background, a border along the sides and a rounded off border in the footer.
I didn’t think about it very much and dismissed it as impossible or too fiddly. I’ve been thinking about it for a little bit now and realize I was wrong and there is actually a very easy way to do this. Whether the method is practical or not for production use I’m not sure — but at least this is something that can be done. Let me demonstrate how…
Let’s say we designed the following content box in Photoshop to be used in the sidebar of a website:
Not an unlikely example. The box above has three unique sections, the header at the top, the middle area which repeats itself, and a bottom section with the rounded off corners and a slight shadow.
De-clutter Your Interface With Hover Controls
One of the more challenging things as a user interface (UI) designer is to achieve a good balance between showing just enough controls on the screen to allow the user to perform their tasks quickly, and yet not so much that the whole interface looks overwhelming and complicated.
Too little controls will mean the user will have to access stuff through menubars and other navigation panels, wasting their time. Too many and the user will just get lost, unable to find the stuff they need.
Usability Tip: Automatically Select Form Input Field on Page Load
A lot of web services focus on search and information discovery. Their main interaction mechanism is the search input field. What’s surprising is that many new services fail to automatically select the search field for you when the page loads, requiring their visitors to either click on it to select it or tab down to it using the keyboard.
Usability Tip: Turn Inline Links Into Padded Blocks for Larger Clickable Areas
There’s a very quick usability trick you can do with the links on your site to make them easier to use. It’s something that I don’t see talked about very much, and a lot of sites don’t implement it. Link padding and blocks — that is, increasing the clickable area of your links to make them easier to click on.
How to Add Drop Shadows to Menus or Windows with CSS
As a followup to my previous post on adding shadows for greater usability, here’s one quick way to implement such shadows using only CSS. Note: I will assume you are fairly familiar with CSS layouts and Photoshop for this tutorial.
The Method
There are different ways of tackling the problem of adding shadows to menus and windows with CSS — this is just my take on it. It’s not the most straightforward task and you may be able to find more elegant solutions by experimenting yourself.
How to Use Photoshop Color Profiles for Web Images
I’ve noticed lately that some web designers don’t seem to be using color profiles correctly in Photoshop. If you’ve ever saved images for the web and discovered that they come out slightly lighter and more desaturated than what you saw when you worked on them, this guide is for you.
There are some blog posts that advocate disabling color profiles in web images to “fix” this problem. This isn’t the right way to go about it because modern browsers like Firefox 3 and Safari do use color profiles, so you can get much better results by using them correctly. What’s more, color profiles are dead simple to use. Here’s how…