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 Foundations CSS Gradients Radial Gradients

Gustavo Santana
PLUS
Gustavo Santana
Courses Plus Student 4,267 Points
Posted by Gustavo Santana
Gustavo Santana
Courses Plus Student 4,267 Points

Updates to old courses...

This is not quite up to date. How often will we see updates to old material that has already been put up?

This does absolutely nothing:

-webkit-radial-gradient(circle, #E3A112, #00018F);
Ryan Carson
Ryan Carson
23,287 Points

Tagging Guil Hernandez

Gustavo Santana
Gustavo Santana
Courses Plus Student 4,267 Points
Gustavo Santana
Gustavo Santana
Courses Plus Student 4,267 Points

Never mind, I did not noticed that the starting documents where the same as the ending documents. width/heigh/border-radius where already set in the file so I began with a sphere.

.box {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: 35px auto;
}
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

What browser did you try that in?

2 Answers

Gustavo Santana
PLUS
Gustavo Santana
Courses Plus Student 4,267 Points
Gustavo Santana
Gustavo Santana
Courses Plus Student 4,267 Points

Guil Hernandez Ryan Carson

So the issue was actually that the start and end project files had the same width height and border radius:

.box {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: 35px auto;
}

while in the example, you began with :

.box {
    width: 500px;
    height: 400px;
    border-radius: 50%;
    margin: 35px auto;

and ended with the previous. This meant I started with the 'sphere' I just failed to notice this until the end of the video when I realized you had changed the .box properties to what I already had set.

James Barnett Chrome.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Gustavo Santana,

I also cover the latest syntax for both linear and radial gradients in the same stage. Until recently the syntax for gradients has been in flux, so that's why I included both the prefixed and unprefixed versions. :)