Copyleft with CSS and HTML

I used copyleft symbol on my new project website My Zen Path recently and received few mails and messages asking me how can it be done using CSS and HTML without an image.

So here is the trick as I had twitted –

You can use the CSS and HTML given below to display a copyleft symbol wherever you need. CSS looks bigger due to cross-browser support, but basically it is just flipping the copyright symbol!

CSS Code

/** for copyleft symbol **/
.copy-left {
    display: inline-block;
    text-align: right;
    margin: 0;
    font-size: 1.25em;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: FlipH;


Copyleft <span class="copy-left">&copy;</span> 

Using CSS class copy-left, you can use it anywhere you need in your HTML file.

Hope this helps! 🙂