By
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.
