DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Circular Button with Photo Mask Using CSS

Circular Button with Photo Mask Using CSS

Terrence Ryan user avatar by
Terrence Ryan
·
Jan. 09, 12 · Web Dev Zone · Interview
Like (1)
Save
Tweet
7.47K Views

Join the DZone community and get the full member experience.

Join For Free

I'm currently working on porting Finicky over to HTML5 as a training exercise for building real applications (as opposed to more demoware) with HTML5 for mobile. It's going fairly well, but there was one piece of UI that I was really worried about. It was a little complicated to render in ActionScript, and I feared it might be impossible in HTML. In fact it's one of the few things I found much easier.

On the edit page there is a button for prompting you to take a picture of an item that you want to save. When you haven't taken a picture, you see a little camera icon on the button. When you have already selected an image, you see a circular mask of the picture inside a circular frame created by the button. Look at the picture, It's a lot easier to show then to explain. My designer really did a cool job there on that piece of UI, and I wanted to replicate it.


My first instinct should have been to look up "css mask" as it would probably be the easiest way if it was implemented. I didn't. I instead went with using border radius to shape my button into a perfect circle and positioning it on top of the original button. In reviewing information on CSS Masking, I don't think it would be the perfect solution. The images that I'll be using in my final product are going to come from source images of different sizes. My method allows me to drop in any size/proportioned image into the background-image CSS property of my link and have it still work as a perfect circle. However, my research there makes me want to explore CSS masks more.

Anyway, back to the main point, how did I accomplish this?

First, I make an a link that I'll use an a as the interactive part of the UI, as well as the holder for my picture. And I'll wrap it in a div that will hold the button graphics.

Circular Button in CSS - HTML

    <div class="photobuttonskin">
    <a class="photobutton" href=""></a>
    </div>


I give the containing div a background-image containing the button graphic and I hard set the size to match the image size.

Circular Button in CSS - Wrapper

    .photobuttonskin{
    display: block;
    width:203px;
    height:203px;
    text-align:center;
    background-image: url("photobutton.png");
    }


Once the container is done, I turn the a link into a circle by giving it a border radius of 50% of the height and width of the element. (I also used a background-color to see where I was putting it. )

Circular Button in CSS - CSS for link

    .photobutton{
    display: block;
    height: 180px;
    width: 180px;
    position: relative;
    top: 8px;
    left: 7px;
    border-radius:90px;
    -khtml-border-radius:90px;
    -moz-border-radius:90px;
    -webkit-border-radius:90px;
    }


Then I set the positioning to relative, to offset it within the containing div. I then fiddled with the top and left until the circle link was pretty equidistant from all side of the containing div. It wasn't just straight math because the drop shadow in the graphic made the blue circle of the button not completely in the center of the png file.


Finally I made a class with the picture I wanted to place in the background-image of the button.

Couple things to note here:

  • I hard coded the CSS for demonstration purposes, in my app, I'll just add the background-image dynamically via the DOM.
  • This, like all awesome things, won't work in versions of IE earlier then 9.
  • However, it has much more support then using masks, so I think it also wins on that account.

Here's a demo with the full source.

 

Source: http://www.terrenceryan.com/blog/post.cfm/circular-button-with-photo-mask-using-css

 

 

 

 

 

CSS

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Anypoint CLI Commands in MuleSoft
  • Kotlin vs Java: Which One Is the Best?
  • No Code Expectations vs Reality
  • The Developer's Guide to SaaS Compliance

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo