Archive for the ‘HTML/CSS’ 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.
CSS Tip: Improve the Look of Your Headlines Using Letter-Spacing
There is a term used in typography called kerning. Kerning refers to the adjustment of space between letters. Fonts are generally fairly well calibrated by default, but at larger sizes you can begin to see imbalances in spacing between letters.
Kerning is used a lot in the print industry, especially for headlines and logotypes; but it’s something that’s not widely used on the Web because of the lack of control we have over fonts.
CSS Tip: Remove the Mac OS X Glowing Blue Outline for Custom Styled Input Fields
One of the great things about the Web is that it’s cross platform. You can use your favorite system to browse the Web, be it Windows, Mac OS X or Linux. Some of these systems, namely Mac OS X, sometimes try a little too hard to control the user experience, and so you’ll find that things like buttons, drop down boxes and input fields look fairly different to those on other systems — even more so with the blue glow effect you get around input fields. This glow effect can cause problems if your input field is using custom images and CSS formatting.
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.
CSS Trick: Improve the Quality of Bold Text in Safari with text-shadow
OS X, the Mac operating system, has a pretty good font rendering engine — it adheres to the intended font proportions closely to create an image of the font on the screen that accurately depicts what you would see printed out on paper.
One complaint that I’ve read about often is that sometimes it makes the fonts a little too blurry or too fat — especially when they are bold. This is made worse when the font is colored in a light color and placed on a dark background.