New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-images-4] Add ability to change radial gradient focus #1575

Open
fantasai opened this Issue Jun 30, 2017 · 3 comments

Comments

Projects
None yet
3 participants
@fantasai
Contributor

fantasai commented Jun 30, 2017

During the discussions that led into the current radial-gradient() syntax, there was an extended proposal that included the ability to specify the geometric center and color focus of the gradient separately. That proposal is summarized in
https://lists.w3.org/Archives/Public/www-style/2011Nov/0210.html
and consists of a from <position> or from offset <offset> argument (depending on whether an absolute position or relative offset is desired), and was slated for consideration for a future level of CSS Images, so copying here.

@bradkemper

This comment has been minimized.

Show comment
Hide comment
@bradkemper

bradkemper Jul 23, 2017

The use cases beyond background images seem pretty limited. And for that we have background-position.

bradkemper commented Jul 23, 2017

The use cases beyond background images seem pretty limited. And for that we have background-position.

@AmeliaBR

This comment has been minimized.

Show comment
Hide comment
@AmeliaBR

AmeliaBR Jul 24, 2017

@bradkemper This is unrelated to background position. It's about creating asymmetrical gradients.

Some examples of what off-center focal points look like, using the SVG syntax, so people know what we are talking about (click on screenshot to go to code version):

Nine radial gradients, in a grid, each one stretched to a different side.

A real off-center SVG gradient (left), versus faking it with multiple layered CSS gradients:
Two spherical shapes with a lighting effect, one of them much more smoothly lit than the other.

All the the major rendering engines already support this for SVG (except that WebKit doesn't support repeating SVG gradients).

For me, the spherical shading effect is the most practical use-case. But the off-center repeating gradients are fun, too.

AmeliaBR commented Jul 24, 2017

@bradkemper This is unrelated to background position. It's about creating asymmetrical gradients.

Some examples of what off-center focal points look like, using the SVG syntax, so people know what we are talking about (click on screenshot to go to code version):

Nine radial gradients, in a grid, each one stretched to a different side.

A real off-center SVG gradient (left), versus faking it with multiple layered CSS gradients:
Two spherical shapes with a lighting effect, one of them much more smoothly lit than the other.

All the the major rendering engines already support this for SVG (except that WebKit doesn't support repeating SVG gradients).

For me, the spherical shading effect is the most practical use-case. But the off-center repeating gradients are fun, too.

@bradkemper

This comment has been minimized.

Show comment
Hide comment
@bradkemper

bradkemper commented Jul 24, 2017

Ah. OK.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment