CSS Volume 3

By Bullfrog | April 12, 2013

Cascading Style Sheets (or CSS) are documents that are used to control the presentation of elements on a web page. CSS has gone through several revisions since its official publication in 1996, and the current specification is known as CSS2.1. CSS3 is the next CSS specification that will be officially released (at some undisclosed future date) but much of its functionality is available in modern browsers.

Vender Specific Prefixes

It is important to note that many CSS3 properties require vendor-specific prefixes. These prefixes, -moz- for Firefox, -o- for Opera, and -webkit- for Chrome and Safari, should always be used when applying CSS3 effects. Once a CSS3 module reaches Candidate Recommendation (CR) status, these prefixes are no longer required, but you may still choose to include them to maintain compatibility with older browsers.

I will not be using vendor-specific prefixes in my code examples in the interest of space and readability.

CSS3 Transitions

CSS3 transitions allow you to add an effect when changing from one style to another, such as when a user hovers over a link. There are four transition properties, all of which can be combined into a single declaration.

li {
  width: 100px;
  height: 100px;
  margin: 20px 20px 35px 0;
  transition: width 0.5s, height 0.5s, margin 0.5s;
}
li:hover {
  width: 140px;
  height: 140px;
  margin: 0 0 0 -20px;
}

For more information on the individual properties, please visit W3Schools.

CSS3 Multiple Columns

Traditionally, if you wanted to have your text displayed in multiple columns, you had to manually divide the content and place it into separate block-level elements and have them floated next to one another. Thanks to the magic of CSS3, you can now have automatically adjusting columns inside of a single element.

p {
  column-count: 2;
  column-gap: 40px;
  column-rule: 2px solid #333;
}

For more information on the individual properties, please visit W3Schools.

CSS3 Backgrounds

Using CSS2.1, the use of backgrounds is very limited. You can only have one background image, and that image cannot be resized. CSS3 comes to the rescue and removes both of these limitations.

In the example below, two images are used four times as background images. In the case of overlapping background images, the background image that is defined first is placed on top. Background sizes must be defined in the same order that the background images are declared.

blockquote.backgrounds {
  height: 200px;
  background:
    url('bullfrog.png') no-repeat 20px 60px,
    url('lily-pad.jpg') no-repeat 150px 60px,
    url('bullfrog.png') no-repeat 400px 30px,
    url('lily-pad.jpg') no-repeat 380px 10px;
  background-size:
    100px 100px,
    100px 100px,
    150px 150px,
    200px 200px;
}

I love CSS3.

::