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

Would be nice to have an option for a transparent cat. #15

Open
lipis opened this issue Nov 12, 2015 · 14 comments
Open

Would be nice to have an option for a transparent cat. #15

lipis opened this issue Nov 12, 2015 · 14 comments

Comments

@lipis
Copy link

lipis commented Nov 12, 2015

Because the background is a gradient it will not look that nice with a single color :)
screen shot 2015-11-12 at 15 14 34

http://lipis.github.io/bootstrap-social/

@elrumordelaluz
Copy link
Contributor

Absolutely agree @lipis!

I think it's not so easy to have the cat transparent keeping the awesome (and the special trait) animation of the tail.

Here is a SMIL solution. SMIL allow us to do things like this, without external js libs. Unfortunately or fortunately SMIL will be deprecated in Chrome.

Since in these days it stills working properly, it's possible to include something like this in the repo anyway, if @tholman agrees and consider an interesting idea.

@tholman
Copy link
Owner

tholman commented Nov 12, 2015

If you add: mix-blend-mode: darken; to the svg, you'll get the effect you're looking for. Sadly, this won't be all browsers... but is a cleaner implementation than the SMIL, and will actually get browser support over time.

That'd be the way to go, if progressive enhancement is cool with you :)

@elrumordelaluz
Copy link
Contributor

you are absolutely right @tholman
progressive enhancement always!

@tholman
Copy link
Owner

tholman commented Nov 12, 2015

Sad thing is, its not a blanket solution that will work with all colors (black and white/white and black though, are perfect)

@elrumordelaluz
Copy link
Contributor

The final color won't be the same fill/color since we are 'blending' with the background, but it's possible to play also with other mix-blend-mode's values and obtain cool results though.

@tholman
Copy link
Owner

tholman commented Nov 14, 2015

Ultimately, going to leave this ticket open, but not implement anything yet. Who knows what the future will bring!

The blend mode is a good reference though, for anyone wanting to do this!

@elrumordelaluz
Copy link
Contributor

👍

1 similar comment
@dbkaplun
Copy link

+1

@knpwrs
Copy link

knpwrs commented Nov 18, 2015

The final color won't be the same fill/color since we are 'blending' with the background, but it's possible to play also with other mix-blend-mode's values and obtain cool results though.

mix-blend-mode: multiply; might be what you're looking for:

image

@knpwrs
Copy link

knpwrs commented Nov 18, 2015

And then mix-blend-mode: screen; for the white corner / black cat:

image

@Rplus
Copy link

Rplus commented Nov 22, 2015

mix-blend-mode: darken; is so cool!! 👍

@lukasschwab
Copy link

I forked this and modified it, using SVG masking to achieve transparency.

You can view the code here, a hosted example here, and its usage in my pomodoro timer.

I haven't checked if this still supports the tail animation; I prefer an opacity change in the fill color. Additionally, I changed the location of the <a> tags so the animation would only trigger when hovering over the triangular path rather than over any part of the SVG.

@tholman let me know if any of this is worth integrating/opening a PR for 😃

@cimi
Copy link

cimi commented Aug 5, 2017

@lukasschwab I found this thread after I had implemented my own variant with masking. Mine animates a tentacle on hover, like in the original version.

elrumordelaluz added a commit to elrumordelaluz/react-github-corner that referenced this issue Oct 23, 2017
Allow to customize more the gh-corner like:
```
<GithubCorner href={githubUrl}  style={{ 'mixBlendMode': 'darken' }}/>
```
to made the octocat trasnparent.

Details in [this issue](tholman/github-corners#15).
@Delgan
Copy link

Delgan commented Nov 16, 2018

@lukasschwab Unfortunately, your corner doesn't even show up using Firefox 63, it's fully transparent. The @cimi's solution is correctly displayed but not animated on hover. Both work fine with Chrome, though.

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

No branches or pull requests

9 participants