Skip to content
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
Open

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

fantasai opened this issue Jun 30, 2017 · 3 comments
Labels

Comments

@fantasai
Copy link
Collaborator

@fantasai 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
Copy link

@bradkemper bradkemper commented Jul 23, 2017

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

@AmeliaBR
Copy link
Contributor

@AmeliaBR 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
Copy link

@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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.