Skip to content

Instantly share code, notes, and snippets.

@ryndel

ryndel/social-aside.css

Last active December 17, 2015 12:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryndel/5610523 to your computer and use it in GitHub Desktop.
Save ryndel/5610523 to your computer and use it in GitHub Desktop.
Download ZIP
Social aside. Unfinished. A fixed position social icon set designed to sit at the middle left or middle right of screen
Raw
social-aside.css
/* Social Links */
#social-links {
position: absolute;
top: 50%;
height: 1000px;
margin-top: -500px;
}
#social-links ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#social-links li{
margin: 0;
padding: 0;
}
#social-links li a {
text-indent: -9999px;
display: block;
width: 40px;
height: 40px;
background: url(../img/icons/social-aside.png) 6px 0px no-repeat;
}
#social-links .twitter a {
background-color: #31B6D9;
background-position: 6px 0px;
}
#social-links .facebook a {
background-color: #5069BA;
background-position: 6px -40px;
}
#social-links .github a {
background-color: #888;
background-position: 6px -80px;
}
Raw
social-aside.html
<!doctype html>
<html>
<head>
<title>Social: Aside</title>
<link rel="stylesheet" href="../css/social-aside.css" type="text/css" media="screen" />
<style>
html, body { margin: 0; padding: 0 }
</style>
</head>
<body>
<aside id="social-links">
<ul>
<li class="twitter"><a href="http://twitter.com/username" rel="external" title="Follow us on Twitter">Twitter</a></li>
<li class="facebook"><a href="http://www.facebook.com/pagename" rel="external" title="Join the community on Facebook">Facebook</a></li>
<li class="github"><a href="https://github.com/username" rel="external" title="Free code available on Github">Github</a></li>
</ul>
</aside>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment