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;
}

HTML Code

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

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

Hope this helps! 🙂

2 thoughts on “Copyleft with CSS and HTML

  1. jajaja me volvi medio adicto al ojomundo!!!ntodos los dias reviso los mail’s y no dejo de hacerme una escapdita por esta pagina.!!! para leer un post nuevo tuyo!!!!nVamos ro carajo !!!!!!!!!!!!!!!!!!!!!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s