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 CSS Basics (2014) Enhancing the Design With CSS Gradients: Color Stops

Box Model with Gradients: Who/What Decides Where the Points in the Box are?

In Guil's Video: https://teamtreehouse.com/library/css-basics/designing-with-the-latest-features/gradients-color-stops

He discusses the point 0 of our box that he's manipulating the color gradient of as the upper right hand corner, but he never before nor during the video explained the mapping/plotting system of a box...are they always the same? Do all boxes start at point 0 in the upper right hand corner and end in 100 in the lower left or is it arbitrarily assigned based on the whims of the designer?

Can someone point me to a non-StackOverflow/Mozilla Developer Network site that explains more about what the "skeletal" structure of the box is in terms of these points? Thanks!

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! While I love MDN and stackoverflow, I understand that they can seem a bit overwhelming at times. Here's a link to a relatively decent example of gradients and how they work. It should give you a good idea of how all this works, and you can even experiment with the code to see how things change with different values.

http://www.w3schools.com/css/css3_gradients.asp

Hope this helps! :sparkles:

edited for additional notes

Yes, the mapping of the box is always the same and not up to the designer. This is defined by the w3.