Expanded Library

Creating Elegant Navigation Using CSS3 Transitions

by Susan Simkins

In this series of CSS tutorials we'll talk about a commonly overlooked element of design: what do elements look like between the change from one state to another? When creating a visual design for a website, it is really easy to overlook the interactive elements of a website. Software required: Brackets, Google Chrome.

What you'll learn

In this series of CSS tutorials we'll talk about a commonly overlooked element of design: what do elements look like between the change from one state to another? When creating a visual design for a website, it is really easy to overlook the interactive elements of a website. So in this course, we'll look at how to style interaction using the CSS3 transition property. As a result we'll create more elegant navigation and examine the transition from a default link state to a hover link state. Since we'll be using CSS, this course assumes previous CSS training to be able to follow along. Software required: Brackets, Google Chrome.

About the author

Susan is a web design tutor for Pluralsight. Growing up, Susan was both a passionate artist as well as a computer tech aficionado. When she discovered the world of web development, she found that she could meld those two passions together into something amazing. Soon after, Susan began devoting herself to building beautiful and functional web content for businesses and nonprofits. It was through those experiences Susan developed a fluency for web coding languages. Since then, Susan has develo... more

Ready to upskill? Get started