Skip to content

Instantly share code, notes, and snippets.

@hellekin

hellekin/copyleft.html

Created October 24, 2014 19:09
Show Gist options
  • Save hellekin/5d9de4c5bc4bef218b91 to your computer and use it in GitHub Desktop.
Save hellekin/5d9de4c5bc4bef218b91 to your computer and use it in GitHub Desktop.
Download ZIP
Copyleft with CSS3
Raw
copyleft.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title> Copyleft FTW! </title>
<style>
/**
* CopyLEFT FTW!
*
* When the mouse hovers the section, replace Copyright with Copyleft
* and rotate the © sign.
*/
footer {
font-family: monospace;
font-size: xx-large;
}
footer #copyleft {
display: block;
position: fixed;
bottom: 0;
left: 2em;
right: 2em;
height: 2em;
}
footer:hover #copyleft span.copyright span {
display: none;
}
footer:hover #copyleft span.copyright:after {
content: "left ";
}
footer:hover #copyleft span.copy {
display: inline-block;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
<header>
<h1>CSS3 fun</h1>
</header>
<main>
<p>Move the mouse down to the footer.</p>
</main>
<footer>
<section id="copyleft">
<span class="copyright">Copy<span>right</span></span>&nbsp;<span class="copy">©</span>2014
<a href="https://dyne.org/" rel="home" data-title="Dyne.org"><span>Dyne Foundation</span></a>
</section>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment