with just a few simple tricks, you can make your web based interfaces more usable and more visually appealing.
you don’t have to be a web dev guru to build great applications. here are a few simple css tricks every php / web developer should know.
it’s not easy being a web developer – in addition to a server-side language, we also have to learn a markup language, yet another (client-side) language and a presentation system. as a result, we tend to focus on what we’re closest to – the business logic – and neglect the front-end.
here’s a quick preview of how we’re going to transform our page:
-
styling form inputs, buttons
when you pop an <input> onto your page, it’s at the mercy of the end user’s system for appearance, behaviour – even size. for example, firefox handles unstyled inputs differently from ie, and both take many cues from the local os styling; the same goes for safari. this is okay on modern oses — if you aren’t concerned with controlling your visuals — but quite a few users still run “classic” interfaces, and it’s especially annoying for buttons. here are some basic styles you should consider for your inputs.
input {
padding:3px;
border:1px solid #f0f0f0;
}
these will first add a bit of padding to your text boxes and buttons, and set in stone your border color to a soft gray. in particular, most browsers will render a clean rectangular button with this style present. consider defining a width in pixels or percents (if inside a container) as well.
-
styling tables
remember to style tables nicely, with table row hover colors, reasonable borders and maybe even striped tables. after all, tables can be dull and boring:
heading 1 |
heading 2 |
value |
value |
value |
value |
there are two key areas to this: using semantic markup, and taking advantage of css selectors. let’s first fix up our table html:
heading 1 |
heading 2 |
value |
value |
value |
value |
and then add some styles:
table {
border-collapse: collapse;
border: 1px solid #ccc;
font-size: 12px;
}
table thead td {
font-weight: bold;
background: #e1e1e1;
}
table tbody tr:hover td {
background-color: #f3f3f3;
}
table td {
padding: 5px 10px;
}
first, notice the use of border collapse – this prevents the blocky double-borders on cells. next, we take advantage of our <thead> and <tbody> to apply a background color to our header row, but a hover effect on body rows. the :hover is on the table row, but the actual background needs to be applied to the cell. finally, we add a neat padding that keeps text in order. a smaller font size on your table will also cut it down to size and fit more figures on a page.
-
button links
often you want a button-style link to execute a simple action or lead the user to another page. let’s create a simple “next” link with this markup:
we can then style it nicely with this css:
a.button {
background: #aaa;
color: #fff;
padding: 3px 5px;
}
a.button:hover {
background: #888;
}
we first set a simple background color on the anchor to make it stand out, and ensure the text is still visible. however, feedback is important here – by adding a simple hover color, we make it clear that this is an interface element and not some ordinary link.
-
typography
it isn’t hard to use simple, clean text on your pages, as opposed to the serif-heavy fonts ie and firefox will default to on win/linux. try adding this to your main stylesheet:
body {
font-family: arial;
font-size: 95%;
}
arial isn’t terribly fantastic, but it isn’t too bad either. (verdana is also a standard option.) by explicitly setting a font here, you avoid leaving at the mercy of the browser/os, especially when you may not have testing machines of a particular os available (e.g. os x).
with all these techniques in play, we have a nice and usable interface:
Comentários recentes