CSS3 Examples

CSS3 techniques can be used to make beautiful enhancements and add streamlined visual functionality to pages. They need to be used judicously, however, to avoid being superfluous, distracting or garish.

The rules for all of the CSS3 examples that follow below are in the head tag of this individual html file. View the source code and you can see it all.

Basic CSS3 Technique Examples

Rounded corners and multiple columns

This box has some rounded corners on the top-left and bottom-right, and the text flows in multiple columns using the "column-count" property.

Dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin, erat et mattis pharetra, massa libero ornare ante, quis mattis ipsum dolor nec justo. Cras imperdiet imperdiet ante at vehicula. Mauris leo magna, fermentum eu aliquam ut, elementum sit amet metus. Etiam ac quam in tellus consectetur varius. Nunc ornare, orci in laoreet vehicula, augue felis ullamcorper magna, vel laoreet lectus justo sit amet risus. Proin nec lacus vel odio adipiscing mattis quis nec erat. Maecenas ac tortor sem. Ut vel purus et urna egestas imperdiet sit amet vel nunc.

Opacity

The box immediately below has an adjusted opacity. Resize the browser and notice that the box is see-through to whatever is underneath. Note that the entire box contents get screened back with use of the opacity rule:

The words in this paragraph are hard to see because they get screened back, too.

The words in this paragraph are *not* hard to see because the opacity value was added to an 'rgba' background color value, instead of the opacity being applied through it's own rule as in the example above. There is a great explanation of this efficient technique on css-tricks.com.

Text Shadows

The h2 tag in the white box below has a CSS3 text shadow applied in the css (instead of pulling in a graphic with the shadow already applied). This keeps the text.

there is a shadow/glow on this text made with css

Intermediate CSS3 Techniques: Transitions and Transforms (2-D and 3-D)

Transitions

“CSS transitions allow property changes in CSS values to occur smoothly over a specified duration.” —w3C

These navigation links have a soft transition applied to them on the hover state. Hover over them and notice how there is a smoothness that feels good to interact with:

Transforms

With transforms (2D and 3D), we can scale, rotate, skew, translate (i.e., move), spin, and stretch elements… A transform is an effect that lets an element change shape, size and position. Transforms can be used individually, or in combination with one another. Elements can also be transformed in 2D or 3D. Transitions are often used in combination with transforms to smooth out the change that occurs.

P.S. This section is built with grid (#Transform_examples {display: grid;}).

2-D Transforms

The examples below are 2D transforms that are activated by the hover state. Good article on 2D transforms by Rachel Cope on Thoughtbot here.

transform: scale This image has a scale transform, and a softening transition is applied to it on its hover state.

transform: rotate This image has a rotate transform, and a softening transition is applied to it on its hover state.

transform: skew This image has a skew transform, and a softening transition is applied to it on its hover state.

transform: translate This image has a translate transform — which means it *moves* the item — and a softening transition is applied to it on its hover state.

you can combine transforms This image scales up and rotates at the same time, and a softening transition is applied to it on its hover state.

opacity change This image has an opacity change (note: it’s not technically a transform), and a softening transition is applied to it on its hover state.

3-D Transforms

You can use this online tutorial by David DeSandro to go even further with 3D transforms; that is, transforms that seem to use volume in space: Intro to CSS3 3D Transforms. Use the menu on the upper-left side of the page to go through the demos.

Advanced CSS3 Techniques

An infinite array of rich effects is possible by mixing transitions, 2D and 3D transforms. The effects need to be used appropriately. Dan Cederholm's experimental site, Things We Left on the Moon, provides a good demonstration of many different CSS3 techniques. You can download and study the zipped folder of the html and CSS files for that site here.

CSS3 Animations: Keyframe Animation Example

This bell is moving using a keyframe animation so that hover doesn’t have to be used to activate the animation.

Check out the following links to see just some of what is possible in combining transitions, transforms and CSS3 animation rules:

Another great site with a strong design sensibility is Jongmin Kim’s experimental HTML5 site, Form Follows Function. Note: some of his demo examples also use javascript.

Test for Yourself

Test CSS3 techniques on your own by applying them to parts within one of our previously downloaded starter exercise pages, such as the navigation starter; for example you can try to: 1) create rounded corners on an element, or assign multiple columns with the column-count property on a passage of text; and/or, 2) test a color change with a transition on a link state in the navigation.