News

5 Quick CSS techniques for visual enhancement

Find out how to create zebra stripe table rows, pure CSS triangles, rounded boxes on hover and quick responsive images

css3logo

Zebra stripe table rows

Before CSS3, this technique required extra hard-coded classes on every other table row, or otherwise some kind of JavaScript solution.

This one uses the nth-child pseudo-class to target every other row. You can do this with the odd keyword, or the even keyword:

001 table tr:nth-child(odd) { 
 002 background-colour:
 003 lavender;
 004}

Pure CSS Triangle

With some border tricks and pseudo-elements you can create all kinds of shapes with just CSS. Here’s a simple triangle with a shadow:

001.triangle {
 002 width: 0; 
 003 height: 0; 
 004 border-left: 100px solid transparent;
 border-right: 100px solid transparent;
 005 border-bottom: 100px solid #ddd;
 006 margin: 50px auto;
 007 position: relative;
 008}
 009
 010.triangle:after {content: ‘’;
 011 position: absolute;
 012 top: -42px;
 013 left: -84px;
 014 z-index: -1;
 015 width: 0; 
 016 height: 0;
 017 border-left: 100px solid transparent;
 018 border-right: 100px solid transparent;
 019 border-bottom: 100px solid #ababab;
 020 margin: 50px auto;}

Rounded Box on Hover

Rounded corners are normally added to elements that are visible right on the page. But let’s not forget that this feature can also be added to a rollover effect, making a rounded box appear on hover so that it draws attention to a clickable area with a hyperlink:

001 .links a:link, .links
002a:visited {
 003 display: block;
 004 text-decoration: none;
 005 colour: #333;
 006 font-family: Arial, sans-serif;
 007 padding: 20px;}
 008.links a:hover, .links a:focus {background: #ccc;
 009 border-radius:
 010 30px;
 011}

Simple responsive images

A full-blown responsive images technique is certainly beyond this short tip. But keep in mind the usefulness of max-width: 100% and height: auto when designing responsive sites:

001 img {
 002 max-width: 100%;
 003 height: auto;
 004 }

This ensures that all images on the page will scale down proportionally when viewed on smaller screens.

Truncate a string

CSS3 includes a property called text-overflow that lets you define how overflow text is handled – whether it’s clipped or hidden via an ellipsis. You can hide overflow text like this:

001p {
 002 font-size: 30px;
 003 padding: 20px;
 004 white-space: nowrap;
 005 overflow: hidden;
 006 text-overflow: ellipsis;
 007}

For this to work, there needs to be hidden overflow and text that overflows for whatever reason.

×