DZone
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
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
  1. DZone
  2. Coding
  3. Languages
  4. Circular Button with Photo Mask Using CSS

Circular Button with Photo Mask Using CSS

Terrence Ryan user avatar by
Terrence Ryan
·
Jan. 09, 12 · Interview
Like (1)
Save
Tweet
Share
7.65K 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

  • [DZone Survey] Share Your Expertise and Take our 2023 Web, Mobile, and Low-Code Apps Survey
  • Spring Cloud
  • Apache Kafka Is NOT Real Real-Time Data Streaming!
  • Practical Example of Using CSS Layer

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • 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: