- This topic is empty.
-
AuthorPosts
-
December 30, 2012 at 1:35 pm #41678
chrisburton
ParticipantHi, 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.
December 30, 2012 at 1:55 pm #119410flocko
Memberare 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
December 30, 2012 at 1:58 pm #119411Andy Howells
ParticipantWorking on it here: http://codepen.io/andyunleashed/professor/qfrGx
December 30, 2012 at 1:58 pm #119413matt44903
MemberWould 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
December 30, 2012 at 2:08 pm #119412chrisburton
Participant@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 #119415Andy Howells
ParticipantI 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 #119416chrisburton
Participant@andy_unleash Awesome! Link?
December 30, 2012 at 2:20 pm #119418Andy Howells
ParticipantUsing 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 #119420chrisburton
ParticipantI 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 #119421chrisburton
ParticipantI can’t figure out how to change the size of the svg. http://codepen.io/chrisburton/pen/KeuEo
December 30, 2012 at 2:38 pm #119422Andy Howells
Participant-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
December 30, 2012 at 2:50 pm #119424Andy Howells
ParticipantThis works fine in Firefox & Safari: http://codepen.io/andyunleashed/pen/gFcCt
December 30, 2012 at 2:54 pm #119425chrisburton
ParticipantI’m wondering if there’s a jQuery solution that would support IE9+, Safari, Chrome, Firefox.
December 30, 2012 at 3:49 pm #119431chrisburton
ParticipantThanks 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.
December 30, 2012 at 7:06 pm #119443dfogge
Participanthey 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.