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 · 13 comments

Comments

Projects
None yet
8 participants
@lipis

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

This comment has been minimized.

Show comment
Hide comment
@elrumordelaluz

elrumordelaluz Nov 12, 2015

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.

Contributor

elrumordelaluz commented Nov 12, 2015

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

This comment has been minimized.

Show comment
Hide comment
@tholman

tholman Nov 12, 2015

Owner

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 :)

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

This comment has been minimized.

Show comment
Hide comment
@elrumordelaluz

elrumordelaluz Nov 12, 2015

Contributor

you are absolutely right @tholman
progressive enhancement always!

Contributor

elrumordelaluz commented Nov 12, 2015

you are absolutely right @tholman
progressive enhancement always!

@tholman

This comment has been minimized.

Show comment
Hide comment
@tholman

tholman Nov 12, 2015

Owner

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

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

This comment has been minimized.

Show comment
Hide comment
@elrumordelaluz

elrumordelaluz Nov 12, 2015

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.

Contributor

elrumordelaluz commented Nov 12, 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.

@tholman

This comment has been minimized.

Show comment
Hide comment
@tholman

tholman Nov 14, 2015

Owner

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!

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!

@tholman tholman added the enhancement label Nov 14, 2015

@elrumordelaluz

This comment has been minimized.

Show comment
Hide comment
@elrumordelaluz

elrumordelaluz Nov 14, 2015

Contributor

👍

Contributor

elrumordelaluz commented Nov 14, 2015

👍

@dbkaplun

This comment has been minimized.

Show comment
Hide comment
@dbkaplun

dbkaplun commented Nov 18, 2015

+1

@knpwrs

This comment has been minimized.

Show comment
Hide comment
@knpwrs

knpwrs 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 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

This comment has been minimized.

Show comment
Hide comment
@knpwrs

knpwrs Nov 18, 2015

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

image

knpwrs commented Nov 18, 2015

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

image

@Rplus

This comment has been minimized.

Show comment
Hide comment
@Rplus

Rplus Nov 22, 2015

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

Rplus commented Nov 22, 2015

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

@lukasschwab

This comment has been minimized.

Show comment
Hide comment
@lukasschwab

lukasschwab Jul 29, 2017

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 😃

lukasschwab commented Jul 29, 2017

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

This comment has been minimized.

Show comment
Hide comment
@cimi

cimi 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.

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

Add style prop
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).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment