Creating Elegant Navigation Using CSS3 Transitions

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.
Course info
Level
Beginner
Updated
Feb 11, 2015
Duration
1h 3m
Table of contents
Description
Course info
Level
Beginner
Updated
Feb 11, 2015
Duration
1h 3m
Description

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
About the author

Susan is a web design author 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.

More from the author
Semantic HTML
Intermediate
1h 22m
Jul 19, 2019
UX Design Creating Wireframes
Intermediate
1h 29m
Jan 3, 2018
WordPress Custom Theme Development
Intermediate
2h 18m
Aug 17, 2016
More courses by Susan Simkins
Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
Hi! I'm Susan Simkins, and in this course, we'll be Creating Elegant Navigation Using CSS3 Transitions. Since I'll be using CSS, this course assumes a basic understanding of both CSS and HTML to be able to follow along. In this course, we'll be able to 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's really easy to overlook the interactive elements. But with CSS, we can control that change and do some really cool things using the transition property. So, in this course, that's exactly what we'll be doing--using the transition property to create more elegant navigation and examining the transition from a default link state to a hover link state. So, with that, let's get started in our next lesson.