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

HTML5 audio and video

<video width=”640″ height=”480″ controls autoplay preload=”auto” loop poster=”myVideoPoster.jpg”> <source src=”video/myVideo.mp4″ type=”video/mp4″> <source src=”video/myVideo.ogv” type=”video/ogg”> <object width=”640″ height=”480″ type=”application/x-shockwave-flash” data=”myFlashVideo.SWF”> <param name=”movie” value=”myFlashVideo.swf” /> <param name=”flashvars” value=”controlbar=over&amp;image=myVideoPoster.jpg&amp;file=video/myVideo.mp4″ /> <img src=”myVideoPoster.jpg” width=”640″ height=”480″ alt=”__TITLE__” title=”No video playback capabilities, please download the video below” /> </object> <p> <b>Download Video:</b> MP4 Format: <a href=”http://myVideo.mp4″>”MP4″</a> Ogg Format: <a href=”http://myVideo.ogv”>”Ogg”</a> </p> […]

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.

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

Javascript patterns: namespacing your objects.

Avoid clustering the global scope. Start with uppercase (recommended): var MYAPP = MYAPP || {}; To be able to construct objects with several levels of deepness, use the following utility function: var UTILITIES = UTILITIES || {}; UTILITIES.namespace = function (ns_string) { var parts = ns_string.split(‘.’), parent = MYAPP, i; // strip redundant leading global […]