SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot beeXtreem's Avatar
    Join Date
    Jan 2006
    Location
    Nigeria
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Facebook rounded images

    Not sure whether to post this here or in the web design section, however, I'd like to know if anyone knows how profile thumbnail images on facebook are displayed with rounded corners when users upload them.

    thanks guys
    JC Rocks!!

  2. #2
    SitePoint Addict
    Join Date
    Sep 2005
    Posts
    271
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I'm pretty sure its CSS. I saw a jquery example and they used CSS to change the corners of photos.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They just have an transparent image that overlays the user profile images using CSS:

    http://static.ak.fbcdn.net/images/ui...e.png?8:156558

  4. #4
    SitePoint Zealot beeXtreem's Avatar
    Join Date
    Jan 2006
    Location
    Nigeria
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks. i'll post this in d web design/css & hopefully i'll getbsome links to examples. or can y'all point me in the right direction?
    JC Rocks!!

  5. #5
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean something like this?

    http://www.devraju.com/round_images/

    I had developed it for myself though it does not get the sharp corners.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I saw an implementation of this with the CANVAS element.

    I can't find that but here is something close that may help:

    http://ajaxian.com/archives/photo-collages-with-canvas

    Also see how MochaUI does rounded corners with canvas:
    http://mochaui.com/demo/

    Of course theres the CSS implementations:
    eg: http://www.html.it/articoli/nifty/index.html

    but they can't do what the CANVAS can do.
    Fiji Web Design - Enterprise Web Design

  7. #7
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @rajug:

    cool app, however the corners need smoothing, put some anti alias on would be nicer.

  8. #8
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by runrunforest View Post
    @rajug:

    cool app, however the corners need smoothing, put some anti alias on would be nicer.
    Yes i have already worked with complete GD with some helps of free codes and now the corners are smooth and have already implemented too. Actually this one is using the corner images. I have now managed them with some background.
    http://www.devraju.com/round_images/...p?src=soif.jpg
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •