Tear drop (mask?)

[chrisburton]

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

[flocko]

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

[Andy Howells]

Working on it here: http://codepen.io/andyunleashed/professor/qfrGx

[matt44903]

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/

[chrisburton]

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

[Andy Howells]

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.

[chrisburton]

@andy_unleash Awesome! Link?

[Andy Howells]

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.

[chrisburton]

I should probably point out that I can’t use background-images for the Twitter avatars. They will be inline.

[chrisburton]

I can’t figure out how to change the size of the svg. http://codepen.io/chrisburton/pen/KeuEo

[Andy Howells]

@chrisburton

-webkit-mask-size {}

http://codepen.io/andyunleashed/pen/gqlbc

The only problem with CSS mask is the woeful browser support: http://caniuse.com/#search=mask

[Andy Howells]

This works fine in Firefox & Safari: http://codepen.io/andyunleashed/pen/gFcCt

[chrisburton]

I’m wondering if there’s a jQuery solution that would support IE9+, Safari, Chrome, Firefox.

[chrisburton]

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.

[dfogge]

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

[Author]

Posts