- 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 #119411December 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.December 30, 2012 at 2:08 pm #119412December 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 #119418December 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 #119422December 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.