Saturday, June 27, 2015

Image Circle Clipper CSS Editor

This tool will help you to circle-clip a div element and place an image on it as a background-image.

How to Use

  1. Edit the CSS part. You can add/edit/remove the properties and the result can be observed right away.
    Please don't change .my_object keyword class in the CSS below.
    You can change it afterward on your own page.
  2. You can use external URL as the background-image source.
  3. If you wanna use local file, convert that first into base64 URI with this tool. Then copy and paste the base64 into the background-image: url([paste here]).
    But because it can be a very lengthy group of characters, especially for graphic or photo, it's really not recommended to be used in here.
    Please use external URL instead.
  4. Click "Reset" button to revert it to its original state.
  5. Click "Select" button or double click the textarea to select the CSS.
  6. Click "Top" button to scroll up to the "Result" section.
  7. Click the HTML element text to select it.

Placement

On your HTML page, the CSS will need to be wrapped with <style> and </style>.
Place the styling (CSS) on top of the element.

This is a browser (local) application.

Have fun!

Result

CSS

HTML element

Trimmer

The CSS from this tool can be compacted into a single line using this CSS Trimmer.

Tutorial

Related post on Monkey Raptor about circle-clipping with CSS.

| | |