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! 🙂

Advertisements

2 thoughts on “Copyleft with CSS and HTML

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s