Skip to content

Instantly share code, notes, and snippets.

@Potherca Potherca/dabblet.css
Last active Aug 29, 2015

Embed
What would you like to do?
Footer for Potherca
/**
* Footer for Potherca
*/
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);
.created-by{
background-color:rgb(255,255,255);
border-radius:0.35em;
color:inherit;
font-family:'Droid Sans', Arial, sans-serif;
padding:1.15em 0.25em 2.2em;
text-decoration:none;
width:9.1em;
}
.potherca{
border-bottom:1px solid rgb(220,50,50);
border-bottom-color:rgba(220,50,50,1);
color:rgb(220, 50, 47);
position:relative;
transition:border 0.350s ease-out;
}
.created-by:hover .potherca{
border-color:transparent;
border-bottom-color:rgba(220,50,50,0);
}
.potherca::after{
background:no-repeat url(http://pother.ca/images/avatars/ben-cartoon-background-red-252-square.png);
background-size:100%;
border-radius:2em;
content:" ";
display:block;
height:4em;
position:absolute;
right:0;
top:-0.85em;
transform:rotateX(90deg);
transition:transform 0.350s ease-out;
width:4em;
}
.created-by:hover .potherca::after{
height:4em;
transform:rotateX(0deg);
}
/***************************************************************************************/
html, body{
height:100%;
background:rgb(245,245,235);
}
div{
height:50%;
margin-top:-4em;
}
p{
display:block;
margin:1em auto;
text-align:center;
}
/*EOF*/
<div></div>
<p><a href="http://pother.ca/" class="created-by">Created by <span class="potherca">Potherca</span></a></p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>✿ Dabblet</title>
<link href="./dabblet.css" rel="stylesheet" />
<script src="http://dabblet.com/code/prefixfree.min.js"></script>
</head>
<body>
<script src="http://pother.ca/JsBase/add-on/load-dabblet-on-bl.ocks.org.js" id="dabblet-html-goes-here"></script>
</body>
</html>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.