Skip to content

Instantly share code, notes, and snippets.

@rayantony

rayantony/README.md

Last active September 11, 2015 00:17
Show Gist options
  • Save rayantony/73f717615ac198ee3e9c to your computer and use it in GitHub Desktop.
Save rayantony/73f717615ac198ee3e9c to your computer and use it in GitHub Desktop.
Download ZIP
Free Social Icon Theme - Glowing Neon Buttons
Raw
README.md

Free Social Icons

Free Glowing Neon Social Icon Theme in Pure CSS

Complete with glowing pink animation. Yes Totally free Icon Theme for Social, demonstrating the use of the new library free from Foundation, this is a font not a series of jpg's you can easily insert or copy paste. The example serves to demonstrate a concept you are free to copy and re-use any part of. I considered pluginizing them in some fashion such as jquery but ultimately deemed it too time consuming.

This was a concept I was playing with, and a response to a request I saw online that seemed to fit. So just messing around. The Icons are white until a hover over then turn a super cool electric neon-ish pink. Having been unimpressed with similar efforts I took a shot at it and I'm pleased with how it came out. It's purely in CSS so it's fast and light.

NOTE: While obviously there's no shortage of social icon interest and theme interest, this was with India in mind. Much of the interest is generally from in and around India where along with Pakistan and Bangladesh I have friends. And they are like Eastern Europe quite unfamiliar with Linux, Open Source, and are under a Microsoft stranglehold plus they cannot afford Mac's. And it disturbed me that at the time, the new Indian president who was reportedly elected in a 'landslide' basically because like most presidents, he looked pretty on camera and talked a good game. Sadly he has already turned into something of a disaster, in fact though it may not be my business I will offer I'm personally offended at his actions of censoring India's access to important services like Github. My first thought, after being horrified was actually to finish this project and give India a way to access it even with the president blocking access. My own sort of small F*** Y** to censorship! This has since been changed I believe, but that was my rationale for not throwing it away as scrap, and that should explain why the comments, and why some of the instructions below are there.

"Quite upset about this new India president and that he won in a landslide election somebody must like him, those people are NOT allowed to use my icons! Unless they promise not to re-elect him, and promise to do something nice for a random stranger. If everyone does that, well maybe everything else won't be so bad."

To Run:

If you have trouble accessing Github (eg. India) use this link it will render the raw static html, cool right? And you're not at Github either so free hosting for me, free for you, and a clever bypass of a stupid censorship ;)

Statspring is the tool still in beta, but you can paste into the search most ANY raw html on Github, just hit the "raw" button. so for this, the raw link is:

https://gist.githubusercontent.com/rayantony/73f717615ac198ee3e9c/raw/e1590fb8073bc61922ba742e7bba7ee4282646e9/freeicons.html

so just put

http://statspring.com/?

in front of it like so

http://statspring.com/?https://gist.githubusercontent.com/rayantony/73f717615ac198ee3e9c/raw/e1590fb8073bc61922ba742e7bba7ee4282646e9/freeicons.html

About the presentation it is based on a social card 'concept'? that was going around months ago on codepen I think, I liked as well. ill try to find it and add the proper attribution in here when i can. The frost if you are wondering for simplicity sake I actually did not do in CSS rather just cut down the same graphic and applied the effect in gimp in a hurry and am serving it off my cloudfront for speed. this should be better also for IE users who should check out IE Sucks chrome add-on by X-Ray.

Lots of tidying up can be done. If you like it, do as you please with it I need no attribution, no credit but come say Hi on social if you use them or they inspire something you do, maybe something totally different as well :)

Raw
freeicons.html
<html><head><title>Free Glowing Neon Social Icon Theme in Pure CSS</title>
<link rel="stylesheet" href="http://rayanthony.io/assets/fonts/foundation-icons.css">
<style>
@import url(http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?family=FontAwesome:300,400,500,800);
html,body{
margin:0;
margin: auto;
padding:0;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
min-height:100%;
}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:bold}a:hover,a:active{outline:none}a,a:active,a:visited{color:#607890}a:hover{color:#036}ul,ol{margin-left:2em}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-0.5em}sub{bottom:-0.25em}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;box-shadow:0 0 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}::selection{background:#ff5e99;color:#fff;text-shadow:none}a:link{-webkit-tap-highlight-color:#ff5e99}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr}.hidden{display:none;visibility:hidden}.visuallyHidden{border:0!important;clip:rect(0 0 0 0);height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
*{
margin:0;
padding:5px;
margin: auto;
color:white;
}
html{ min-width:640px;
}
body{
font-family: 'Fira Sans', sans-serif;
background-color:#333;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.container{
position:relative;
height:760px;
min-width:30rem;
max-width:60rem;
width:auto;
background-color:white;
margin: auto;
border-radius:4px;
overflow:fixed;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
/*icon name*/
.container > section:first-child {
height: 400px;/*300*/
margin:auto;
background: url(https://s3-us-west-2.amazonaws.com/webmx-cdn-static/assets/img/bgboxnew.png);
background-position: bottom;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*icon*/
.container > section:nth-child(2) {
margin:auto;
height:320px;
background:url(http://d39dlwgeopmdw0.cloudfront.net/assets/img/bgblurnew.png);
background-position: top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.about{
margin:auto;
padding:20px;
color:white;
text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
h1{
font-weight:400;
text-transform:uppercase;
}
h2{
font-weight:300;
text-transform:uppercase;
font-size:30px;
letter-spacing:1px;
}
.connect-icons{
list-style-type: none;
text-align: center;
margin: auto;
padding:40px;
line-height:3rem;
max-width:60rem;
}
.connect-icons li{
position: relative;
display: inline-block;
text-align: center;
width: 80px;
font-size:3em;
margin: 0 6px;
}
.connect-icons li:nth-child(1){
margin-left: 0;
}
.connect-icons li:nth-child(4){
margin-right: 0;
}
.connect-icons li > a{
text-decoration:none;
width: 80px;
display: inline-block;
line-height:10px;
text-align: center;
color: rgba(0,0,0,0.3);
}
.connect-icons li > a, .connect-icons li > a:visited{
display: block;/*inline chanhed*/
min-width: 40px;
position:absolute;/*did the trick*/
padding:20px;
}
.connect-icons li > a:hover{
color: #fff;
text-shadow:none;
-webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */
transition: all 0.2s;
-ms-transform: scale(1.1,1.1); /* IE 9 */
-webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
transform: scale(1.1,1.1);
/*inline changed*/
display: inline-block;
/*recent edits*/
font-size:3.9rem;
color: #fb0078;
text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #fb0078,0 0 25px #fb0078,0 0 25px #fb0078,0 0 30px #fb0078,0 0 30px #fb0078;
text-transform: italic;
line-height: inherit;
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.connect-icons li > a:active {
-ms-transform: scale(0.9,0.9); /* IE 9 */
-webkit-transform: scale(0.9,0.9); /* Chrome, Safari, Opera */
transform: scale(0.9,0.9);
line-height:inherit;
}
.connect-icons li > [class*="text-"] {
display:inline-block;
color:white;
font-size:3.5rem;
font-weight:400;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */
transition: all 0.2s;
opacity: 0;
line-height:inherit;
}
.connect-icons li > [class*="text-"].show{
opacity: 1;
-ms-transform: translateY(-12px); /* IE 9 */
-webkit-transform: translateY(-12px); /* Chrome, Safari, Opera */
transform: translateY(-12px);
}
.connect-box {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
</style>
<style>
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 80%;
height: 100%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.Absolute-Center.is-Fixed {
position: fixed;
z-index: 999;
}
.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 200px;
max-width: 400px;
padding: 40px;
}
.Absolute-Center.is-Resizable {
min-width: 20%;
max-width: 80%;
min-height: 20%;
max-height: 80%;
resize: both;
overflow: auto;
}
footer {
height: 80px;
color: #777;
text-align: center;
margin-bottom: 20px;
border-top: 1px solid #e5e5e5;
text-decoration:none;
line-height:16px;
text-align: center;
text-shadow: 0 0 ;
font-size: 14px;
line-height: 1.4;
}
</style>
</head><body>
<div class="container">
<section class="about">
<span class="conect connect-box">
<ul class="connect-icons">
<p style="font-size:3.4em;max-width:30rem;display:inline-block;text-align:center;">I <span class="fa fa-heart" style="font-size:2em;">Social Icons </span> An icon theme concept in CSS
by <a href="https://gist.github.com/rayantony/" class="github"><span class="fa fa-github">ray anthony</span></a></p>
</ul>
</span>
</section>
<section class="connect">
<div class="box connect-box">
<ul class="connect-icons">
<li><a href="#" class="heart" target="_blank"><span class="fi-heart"></span></a><i class="text-heart"></i></a></li>
<li><a href="#" class="paw" target="_blank"><i class="fi-paw"></i></a></li>
<li><a href="#" class="vimeo" target="_blank"><i class="fi-social-vimeo"></i></a></li>
<li><a href="#" class="github" target="_blank"><i class="fi-social-github"></i></a></li>
<li><a href="#" class="twitter" target="_blank"><i class="fi-social-twitter"></i></a></li>
<li><a href="#" class="medium" target="_blank"><i class="fi-social-medium"></i></a></li>
<li><a href="#" class="tumblr" target="_blank"><i class="fi-social-tumblr"></i></a></li>
<li><a href="#" class="lastfm" target="_blank"><i class="fi-social-lastfm"></i></a></li>
<li><a href="#" class="linkedin" target="_blank"><i class="fi-social-linkedin"></i></a></li>
<li><a href="#" class="stumbleupon" target="_blank"><i class="fi-social-stumbleupon"></i></a></li>
<li><a href="#" class="reddit" target="_blank"><i class="fi-social-reddit"></i></a></li>
<li><a href="#" class="home" target="_blank"><i class="fi-home"></i></a></li>
<li><a href="#" class="pinterest" target="_blank"><i class="fi-social-pinterest"></i></a></li>
<li><a href="#" class="youtube" target="_blank"><i class="fi-social-youtube"></i></a></li>
<li><a href="#" class="facebook" target="_blank"><i class="fi-social-facebook"></i></a></li>
<li><a href="#" class="yahoo" target="_blank"><i class="fi-social-yahoo"></i></a></li>
<li><a href="#" class="google-plus" target="_blank"><i class="fi-social-google-plus"></i></a></li>
<li><a href="#" class="digg" target="_blank"><i class="fi-social-digg"></i></a></li>
<li><a href="#" class="spotify" target="_blank"><i class="fi-social-spotify"></i></a></li>
<li><a href="#" class="amazon" target="_blank"><i class="fi-social-amazon"></i></a></li>
<li><a href="#" class="picasa" target="_blank"><i class="fi-social-picasa"></i></a></li>
<li><a href="#" class="behance" target="_blank"><i class="fi-social-behance"></i></a></li>
<li><a href="#" class="dribbble" target="_blank"><i class="fi-social-dribbble"></i></a></li>
<li><a href="#" class="instagram" target="_blank"><i class="fi-social-instagram"></i></a></li>
<li><a href="#" class="delicious" target="_blank"><i class="fi-social-delicious"></i></a></li>
<li><a href="#" class="smashing-mag" target="_blank"><i class="fi-social-smashing-mag"></i></a></li>
<li><a href="#" class="social-stack-overflow" target="_blank"><i class="fi-social-stack-overflow"></i></a></li>
</ul>
</div></div>
</section>
<footer>
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name=rayanthonyrcc"
style="width:236px; height:20px;" class="twitter-follow-button twitter-follow-button">
</iframe>
<p>copyright 2015 <a href="http://rayanthony.io">ray anthony </a> &copy; all applicable rights reserved all liabilities waived</p>
<p> <a href="http://oneworldlicense.com"> oneworldlicense.com</a> means open source, free, and made with<i class="fi-heart" alt="made with love icon font ♡ "></i></p>
</footer>
<script> $(window).ready(function() {
$(".connect-icons a").hover(function(){
$(".connect-box").toggleClass("color-"+ this.className );
$(".text-"+ this.className).toggleClass("show");
});
});</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://statspring.com/springboard.js"></script><script>Springboard.replaceAssets();</script></body></html>
@rayantony
Copy link
Author

simply paste this in your address bar to view live: http://statspring.com/?https://gist.githubusercontent.com/rayantony/73f717615ac198ee3e9c/raw/e1590fb8073bc61922ba742e7bba7ee4282646e9/freeicons.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment