CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
CSS3 transitions are effects that let an element gradually change from one style to another.

transition: property_name duration timing_function delay;

To do this, you must specify two things:

  • Specify the CSS property you want to add an effect to
  • Specify the duration of the effect

Transition effect on the width property, duration: 2 seconds:

.moduleDefault {
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 and above */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */

Note: If the duration is not specified, the transition will have no effect, because default value is 0.

The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

.moduleDefault:hover {
width: 300px;

Multiple changes:
You can also add a transitional effect for more than one style, add more properties, separated by commas.

Add effects on the width, height, and the transformation:

transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;

Note: These properties are not supported in IE

Boilerplate CSS Media Queries

Media Queries are now becoming quite common practice in web design. They allow you to change the CSS of the different elements on your web page depending on the size of the screen the visitor currently can see.

Below is a media query boilerplate you can use to change the design of your depending on if the user is using an iPad,iPhone or other smart phones. This snippet even allows you to change the design if the device is landscape or portrait.

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */

/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */

/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */

/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */

/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */

/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */

/* iPhone 4 ———– */
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */

CSS3 – Substring matching attribute selectors

[att^=val] : Represents an element with the att attribute whose value begins with the prefix “val”.

[att$=val] : Represents an element with the att attribute whose value ends with the suffix “val”.

[att*=val] : Represents an element with the att attribute whose value contains at least one instance of the substring “val”.

This whole group of selectors is new, and the selectors in it let developers match substrings in the value of an attribute.

Assume that we have an HTML document that contains the following markup structure:
<div id=”nav-primary”></div>
<div id=”content-primary”></div>
<div id=”content-secondary”></div>
<div id=”tertiary-content”></div>
<div id=”nav-secondary”></div>

By using the substring matching attribute selectors we can target combinations of these structural parts of the document.

The following rule will set the background colour of all div elements whose id begins with “nav”:
div[id^=”nav”] { background:#ff0; }

In this case the selector will match div#nav-primary and div#nav-secondary.

To target the div elements whose id ends with “primary”, we could use the following rule:
div[id$=”primary”] { background:#ff0; }

This time the selector will match div#nav-primary and div#content-primary.

The following rule will apply to all div elements whose id contain the substring “content”:
div[id*=”content”] { background:#ff0; }

The elements that will be affected by this rule are div#content-primary, div#content-secondary, and div#tertiary-content.

The substring matching attribute selectors are all fully supported by the latest versions of Mozilla, Chrome, Firefox, Safari and Opera.

Reference: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

HTML5 Reset Stylesheet

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {

body {

footer,header,hgroup,menu,nav,section {

nav ul {

blockquote, q {

blockquote:before, blockquote:after,
q:before, q:after {

a {

/* change colours to suit your needs */
ins {

/* change colours to suit your needs */
mark {

del {
text-decoration: line-through;

abbr[title], dfn[title] {
border-bottom:1px dotted;

table {

/* change border colour to suit your needs */
hr {
border-top:1px solid #cccccc;
margin:1em 0;

input, select {

Reference: http://code.google.com/p/html5resetcss/downloads/list

How to add icons using CSS Attribute Selector?

CSS Attribute Selector
CSS Attribute selectors are very powerful giving you many options to control styles of different elements e.g. you can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

Supported Browsers

CSS Code
padding:5px 0 5px 30px;
background:url(doc_icon.png) no-repeat left center;
font:normal 14px arial;

<a href=”example.doc”>Doc File</a>

Essential Firefox Add-ons for Web Developers

Firefox has some cool add-ons which make the job of website designers much easier. These add-ons are definitely going to improve your work-flow and enhance your overall internet browsing experience. Don’t miss this chance to work quicker and better!

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Web Developer
The Web Developer extension adds a menu and a toolbar with various web developer tools.

Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.

FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.

Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.

CSS Validator
Validates a page using the W3C CSS Validator.

HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

W3C Offline Page validator
Validates the source of a HTML/XHTML page via the W3C Markup Validation Service using the direct-input form.

Allows you to customize the way a webpage displays using small bits of JavaScript.

Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout.

HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.

A simple CSS property viewer.

IE NetRenderer

If you are like me and design your sites for Firefox then this is a great tool for you. IE NetRenderer will create you an image of how the website looks in IE 5.5, 6, 7 and 8 so you can get an idea of whether or not it looks right in IE.

Foxy SEO Tool
Foxy SEO Tool offers tools for search engine optimization (SEO), web traffic and page analysis for webmasters and web professionals.

Useful jQuery Plugins

Quick and powerful, jQuery can help designers and developers create awesome interactive websites that are appealing and accessible to the widest range of browsers. For your audience, the visit to your site will be both exciting and entertaining. Navigation, galleries and slideshows, are hot points for a site to shine.

Here are 35 useful fresh jQuery plugins focusing on navigation, gallery and slideshows, calendars, tab browsing and further resources to reduce time and effort while increasing your audience.

Direct Link: 35 Fresh and Useful jQuery Plugins