- This topic is empty.
December 30, 2012 at 1:35 pm #41678
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.December 30, 2012 at 1:55 pm #119410flockoMember
are you looking for something like this?
you’ll have to wrap something around the image or else you rotate the image itselfDecember 30, 2012 at 1:58 pm #119411
Working on it here: http://codepen.io/andyunleashed/professor/qfrGxDecember 30, 2012 at 1:58 pm #119413matt44903Member
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://thenittygritty.co/css-maskingDecember 30, 2012 at 2:08 pm #119412
@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.December 30, 2012 at 2:12 pm #119415
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.December 30, 2012 at 2:13 pm #119416
@andy_unleash Awesome! Link?December 30, 2012 at 2:20 pm #119418
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.December 30, 2012 at 2:28 pm #119420
I should probably point out that I can’t use background-images for the Twitter avatars. They will be inline.December 30, 2012 at 2:32 pm #119421
I can’t figure out how to change the size of the svg. http://codepen.io/chrisburton/pen/KeuEoDecember 30, 2012 at 2:38 pm #119422
The only problem with CSS mask is the woeful browser support: http://caniuse.com/#search=maskDecember 30, 2012 at 2:50 pm #119424
This works fine in Firefox & Safari: http://codepen.io/andyunleashed/pen/gFcCtDecember 30, 2012 at 2:54 pm #119425
I’m wondering if there’s a jQuery solution that would support IE9+, Safari, Chrome, Firefox.December 30, 2012 at 3:49 pm #119431
Thanks for taking the time to write up that demo @andy_unleash.December 30, 2012 at 7:06 pm #119443dfoggeParticipant
i also went ahead and slapped together a quick codepen demo: http://codepen.io/derekfogge/pen/cqfrL
- The forum ‘CSS’ is closed to new topics and replies.