Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages CSS Animations Keyframe Rules and Animation Properties

jeanie
jeanie
4,602 Points
Posted by jeanie
jeanie
4,602 Points

why didn't .prog-bar set width but only nested height, border-radius and background?

In the video of Keyframe rules and animation properties at 02:19, there was a class named prog-bar. In order to shape a prog-bar, height, border-radius and background were written. Two questions arose in my mind, (1) why couldn't the "width" be put? (2) let's have a look at the background, you will notice that it's repeating-linear gradient. Why shouldn't we just set a box and fill in color instead of background-image? I am not sure when should i use background-image to present color plus i saw no any special with the color which was rendered by repeating-linear gradient.

2 Answers

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

1) The width didn't need to be put because it a block element that automatically gets a width of 100% of it's parent. The width was later defined from 0% to 100% in the animation.

2) He wanted it to be gradient but you could have used a solid color. What he did wasn't an image but was a CSS gradient. The rule is to do it in CSS if possible. If the look your going for is not possible in CSS only, then you use a background-image.

jeanie
jeanie
4,602 Points
jeanie
jeanie
4,602 Points

thanks Ron for brushing up my skills !