CSS: Utilities

/* _____ UTILITIES _____ */ .oldSchool{width:750px;} .gs960{width:960px;} .liquid{width:auto;margin:0;} .sidebar{width: 300px} .clear{clear:both;}/* Layouts */ .line:after,.lastUnit:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;font-size:xx-large;content:” x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x […]

CSS3: Background gradients

The best way to produce your background gradients is using generators: http://www.colorzilla.com/gradient-editor/ background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%); The first argument (90 deg) indicates the direction of the gradient. By default is from top to bottom. The second is the starting color, and the third (0%) is where the starting color start changing […]

CSS3: box-shadow property

-ms-box-shadow: 0px 3px 5px #444444; -moz-box-shadow: 0px 3px 5px #444444; -webkit-box-shadow: 0px 3px 5px #444444; box-shadow: 0px 3px 5px #444444; First setting is horizontal offset, second is vertical offset, third is blur, and fourth is color. And actually, there is an optional argument, spread, between blur and color. It is used to control how long the shadow […]

CSS3: Multi-columns based on CSS

Given the following HTML: <div id=”main” role=”main”> <p>lloremipsimLoremipsum dolor sit amet, consectetur // LOTS MORE TEXT // </p> <p>lloremipsimLoremipsum dolor sit amet, consectetur // LOTS MORE TEXT // </p> </div> #main { column-width: 12em; /* Will produce several columns the size of 12em, automatically adjusting the number of columns as the viewport adjust */ column-gap: […]

CSS3: Rounded corners

.round{ -moz-border-radius: 10px; /* Mozilla (e.g Firefox) */ -webkit-border-radius: 10px; /* Webkit (e.g. Safari and Chrome) */ border-radius: 10px; /* W3C */ } This is the whole enchilada with yet more browsers support: .round{ -khtml-border-radius: 10px; /* Konqueror */ -rim-border-radius: 10px; /* RIM */ -ms-border-radius: 10px; /* Microsoft */ -o-border-radius: 10px; /* Opera */ -moz-border-radius: […]

CSS3: background gradients

You don’t need no stinky images: background-color: #42c264; background-image: -webkit-linear-gradient(#4fec50, #42c264); background-image: -moz-linear-gradient(#4fec50, #42c264); background-image: -o-linear-gradient(#4fec50, #42c264); background-image: -ms-linear-gradient(#4fec50, #42c264); background-image: -chrome-linear-gradient(#4fec50, #42c264); background-image: linear-gradient(#4fec50, #42c264); Where: The first entry is for old browsers (solid color). In between parentesis are the starting and ending colors.