HTML and CSS: general site architecture and good practices

CSS organization: Base/ – reset.css (or normalize.css) – layout.css (any grid system you are throwing in goes here) – typography.css (your fonts stuff) – utilities.css (OOCSS stuff, things that may be easier to just define a class for instead of rules below, like .left { float: left}, or .mtl { margin-top: 20px } See this […]

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 […]

CSS: Transitions, Animations and Transformations.

Some examples here Transitions: when a certain CSS property change, the change won’t happen abruptly, but overtime: #box { transition-property: opacity, left; transition-duration: 3s, 5s; } So when element #box experience a change in opacity or left, the change will take 3 and 5 seconds respectively. Here’s an example of all the transition properties: #content […]