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

Add more masks #3738

Open
5e-Cleric opened this issue Sep 22, 2024 · 5 comments
Open

Add more masks #3738

5e-Cleric opened this issue Sep 22, 2024 · 5 comments
Assignees
Labels
❌ Missing from V3 Was planned for V3 but still missing New Snippet Proposed new snippet, for any theme phb-style UI/UX User Interface, user experience

Comments

@5e-Cleric
Copy link
Member

Quite literally

image

These i already have made, and i accept requests for more options

I think they provide better options, and make easier a job only possible right now by combining multiple masks, sometimes a pain to manage.

@5e-Cleric 5e-Cleric added phb-style UI/UX User Interface, user experience ❌ Missing from V3 Was planned for V3 but still missing New Snippet Proposed new snippet, for any theme labels Sep 22, 2024
@5e-Cleric 5e-Cleric self-assigned this Sep 22, 2024
@calculuschild
Copy link
Member

Is black the image or the text?

@Gazook89
Copy link
Collaborator

Black has got to be image judging from .0005.png

@calculuschild
Copy link
Member

calculuschild commented Sep 22, 2024

Something like 0001 and 0004 at least can already be achieved by just rotating the existing edge masks we have. In fact they were designed very intentionally that way so any edge texture can be sloped like this.

0005, 0006, and 0007 could be achieved by scaling and inverting the existing "center" masks.

We can add these new textures but I think we should invert/rotate them to match the existing ones (i.e. all "edge" masks are horizontal, all "center" masks are a cutout rather than a frame), and allow users to then invert/rotate/scale them to get the effect they want. We could add snippets that include the inversion syntax to get the same "frame" effect for all of our "center" masks.

@5e-Cleric
Copy link
Member Author

As a user, i would prefer to insert and forget, rather than having to mess with the existing code, specially because myself i am not sure if you can even invert a mask

@calculuschild
Copy link
Member

calculuschild commented Sep 23, 2024

Insert and forget, exactly. And no need to mess with extra code. We just make a new snippet ImageMaskFrame to go along with imageMaskCenter and imageMaskEdge. Those were all designed very intentionally to be flexible and customizable, so any new masks should follow that design.

It would be identical to imageMaskCenter except for this line:

mask-image : var(--wc), var(--revealer);

Becomes

mask-image     : var(--wc), linear-gradient(#000 0 0), var(--revealer);
mask-composite : exclude;

This results in an inverted mask that behaves like 0005, 0006, and 0007. With the bonus that the user gets access to all the existing masks usable as a "frame" without even having to know any inverting code. And, they can rotate / scale / position the mask exactly where they want it. So we can add your new masks. But let's make them usable both as cutouts and frames.

We could even pre-position and scale the masks like we do with Top/Right/Bottom/Left edge masks to have a Top/Right/BottomLeft/Full frame snippet. Even less thinking on the part of the user.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
❌ Missing from V3 Was planned for V3 but still missing New Snippet Proposed new snippet, for any theme phb-style UI/UX User Interface, user experience
Projects
None yet
Development

No branches or pull requests

3 participants