Rounded-Corner Elements

David Walsh Blog - MooTools Dojo jQuery David Walsh Blog

7 Quick CSS Enhancements for Better User Experience

The beauty in CSS is that a tiny directive can make a huge difference in how the page displays. Here are seven quick CSS snippets that will give your website more "pop" and make your user's experience more functional and enjoyable.

Change Text Highlight Color

copy::selection      { background:#c3effd; color:#000; /* Safari and Opera */ }
::-moz-selection  { background:#c3effd; color:#000; /* Firefox */ }

The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you'd like!

Prevent Firefox Scrollbar Jump

copyhtml { overflow-y:scroll; }

Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn't reach below the fold, thus creating an undesireable "jump." The above snippet prevents that.

Rounded-Corner Elements

copyinput    { -moz-border-radius:10px; -webkit-border-radius:10px; }

Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.

Print Page Breaks

copy.page-break    { page-break-before:always; }

Don't forget that many users print off your informational pages! The above CSS snippet allows you to set page breaks within each page.

Attribute-Specific Icons

copya[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }

Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.

CSS Pointer Cursors

copyinput[type=submit],label,select,.pointer  { cursor:pointer; }

New rule for you to live by: if the user is meant to click on any element, it should have the "pointer" cursor when the user mouses over it. Links, buttons, SELECT elements, etc.

display:block Links

copy#navigation li a  { display:block; }

When you've built a navigation menu with UL/LI/A elements, be sure to set each anchor 's display property to "block" so that the user doesn't necessarily need to hover over the anchor's text for the link to work.