I'm designing my portfolio site around the above layout. I'm wondering how I can create that tear drop for auto-generated images from Twitter profile avatars? I need it to mask the entire thing, not just use it as a background.
Would the easiest way be to use an image mask with CSS?? Create an SVG of a teardrop of your desire, then apply the mask? Not sure of the browser support you need, but below are a few resources.
@andy_unleash I believe @matt44903 is correct. I might just have to create an SVG of the teardrop and mask the avatars with CSS. Here is one I found by a simple search. I'll test with this before I create my own.
Thanks for all the help guys. After reading the article above, I think there's just too much markup and Javascript hacking to effectively do this the way I was hoping.
Thanks for taking the time to write up that demo @andy_unleash.
Even if that's the case, the way my markup has to be (inline images), it works perfectly for using the Twitter API and masking the avatars. If somehow I could support IE9+, my problem would be solved.
yes, that is indeed what its doing andy. the catch is your background needs to be a solid color and match the color of the mask.
chris, i'm not sure why the codepen demo is not working in IE, but check it out in the original author's jsfiddle demo: http://jsfiddle.net/rjzaworski/dpetM/3/
looking good to me on ie8, 9 and 10.
i remember when i used it i didnt have any issues with IE, and this was when i was still testing for ie7.
Hi, guys.
I'm designing my portfolio site around the above layout. I'm wondering how I can create that tear drop for auto-generated images from Twitter profile avatars? I need it to mask the entire thing, not just use it as a background.
CodePen
are you looking for something like this?
http://rossmcneil.com/create-a-simple-css-raindrop/
you'll have to wrap something around the image or else you rotate the image itself
Working on it here: http://codepen.io/andyunleashed/professor/qfrGx
Would the easiest way be to use an image mask with CSS?? Create an SVG of a teardrop of your desire, then apply the mask? Not sure of the browser support you need, but below are a few resources.
http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html
http://thenittygritty.co/css-masking
http://rossmcneil.com/create-a-simple-css-raindrop/
@flocko Hey, thanks for that link
@andy_unleash I believe @matt44903 is correct. I might just have to create an SVG of the teardrop and mask the avatars with CSS. Here is one I found by a simple search. I'll test with this before I create my own.
I got it working using a span & image but weirdly, Chrome doesn't show it properly, Safari was fine however.
The way he's recommended will probably be the best route.
@andy_unleash Awesome! Link?
Using a container: http://codepen.io/andyunleashed/pen/gFcCt
Using a container with a subelement and a background image: http://codepen.io/andyunleashed/pen/qfrGx
Bugger is for some reason Chrome isn't sorting the radius properly - super wierd as both webkit obviously.
Gonna keep playing.
I should probably point out that I can't use background-images for the Twitter avatars. They will be inline.
I can't figure out how to change the size of the svg. http://codepen.io/chrisburton/pen/KeuEo
@chrisburton
http://codepen.io/andyunleashed/pen/gqlbc
The only problem with CSS mask is the woeful browser support: http://caniuse.com/#search=mask
This works fine in Firefox & Safari: http://codepen.io/andyunleashed/pen/gFcCt
I'm wondering if there's a jQuery solution that would support IE9+, Safari, Chrome, Firefox.
Thanks for all the help guys. After reading the article above, I think there's just too much markup and Javascript hacking to effectively do this the way I was hoping.
Thanks for taking the time to write up that demo @andy_unleash.
hey chris, not sure if this is too much javascript for you, as it does require jquery, but i utilized the following linked code to achieve image masking once without any issues: http://blog.rjzaworski.com/2011/03/masking-images-with-css-and-jquery/
i also went ahead and slapped together a quick codepen demo: http://codepen.io/derekfogge/pen/cqfrL
@dfogge Incredible, thank you! Is there any possible way to support IE9+?
Am I right in saying that this code basically;
Even if that's the case, the way my markup has to be (inline images), it works perfectly for using the Twitter API and masking the avatars. If somehow I could support IE9+, my problem would be solved.
yes, that is indeed what its doing andy. the catch is your background needs to be a solid color and match the color of the mask.
chris, i'm not sure why the codepen demo is not working in IE, but check it out in the original author's jsfiddle demo: http://jsfiddle.net/rjzaworski/dpetM/3/
looking good to me on ie8, 9 and 10.
i remember when i used it i didnt have any issues with IE, and this was when i was still testing for ie7.
Ah, thanks for saving the day @dfogge.
@chrisburton - Working fine for me in IE8-10.
@dfogge - cheers for confirming for me, just was trying to wrap my head around what the JavaScript was actually doing.
all credit due to RJ Zaworski, but glad to help!
@andy_unleash Yeah, for some reason I had compatibility mode on.