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.

Sign up for GitHub

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
Jump to bottom

[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
css-images-4

Comments

@fantasai
Copy link
Collaborator

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
Contributor

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

@AmeliaBR
Copy link
Contributor

@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
Contributor

Ah. OK.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-images-4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@fantasai @AmeliaBR @bradkemper