-
-
Notifications
You must be signed in to change notification settings - Fork 193
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
Comments
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. |
If you add: That'd be the way to go, if progressive enhancement is cool with you :) |
you are absolutely right @tholman |
Sad thing is, its not a blanket solution that will work with all colors (black and white/white and black though, are perfect) |
The final color won't be the same |
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! |
👍 |
1 similar comment
+1 |
|
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 @tholman let me know if any of this is worth integrating/opening a PR for 😃 |
@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. |
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).
@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. |
Because the background is a gradient it will not look that nice with a single color :)
http://lipis.github.io/bootstrap-social/
The text was updated successfully, but these errors were encountered: