BY  gostrowski  ON  11-11-2013 10:08 AM

Transitions

Transitions allow for an element to gradually change from one style to another. All we have to specify is which properties we want the transition to affect and the amount of time the transition will take. While being just a subtle change in our CSS, the below example of social icons takes on a whole new look with the added transition.

See the Pen bpItK by Greg Ostrowski (@onethru2) on CodePen

Here are two other example of a subtle transition. Adding a transition smooths out an otherwise rigid change of states between the standard button and one that has been pressed down.

See the Pen Ibnzd by Greg Ostrowski (@onethru2) on CodePen

See the Pen Bgway by Greg Ostrowski (@onethru2) on CodePen

Transform

One type of transformation is rotate. Rotate, in its simplest form, rotates an element. However, it can also be applied with transitions, creating simple animations. For example, hover over the below image.

See the Pen Aczfh by Greg Ostrowski (@onethru2) on CodePen

Other transforms include scale, translate, and scale.

Columns

Columns solves the issue of dividing a single body of text into multiple columns. This used to require either backend or javascript code to split the body of text into separate elements, which isn't a dynamic approach and isn't a good design if you want to have a responsive site. This now allows CSS to split your text up for you, saving time and effort. Columns allows you to define how many columns you want the element to be divided into, the padding between the columns, and how wide each column should be.

See the Pen lwHyJ by Greg Ostrowski (@onethru2) on CodePen

Resize

The main use of resize is with <textarea>. It prevents or allows the resizing of the element in the specified direction: horizontal, vertical, both, or none. This can prove to be usefull when you want to keep the textarea within a predefined space.

See the Pen jlFGH by Greg Ostrowski (@onethru2) on CodePen