Skip to content

Instantly share code, notes, and snippets.

@chrisnager

chrisnager/index.haml

Created January 10, 2013 02:03
Show Gist options
  • Save chrisnager/4498764 to your computer and use it in GitHub Desktop.
Save chrisnager/4498764 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Chris Nager. Pure CSS Buddy Media logo - Buddy Media logo recreated with CSS and HAML.
Raw
index.haml
.buddy-media-logo
Raw
script.js
/*
* Pure CSS Buddy Media logo
* by @ChrisNager
*
*/
Raw
style.css
body {
margin: 90px;
background: black;
}
.buddy-media-logo {
width: 40px;
height: 40px;
margin: 0 auto;
border: 2px solid #1b409a;
-webkit-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
background: #1b409a;
background-image: -moz-linear-gradient(top, hsla(225,36%,60%,1) 0%, hsla(223,39%,49%,0) 45%, hsla(222,70%,35%,0) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(225,36%,60%,1)), color-stop(45%,hsla(223,39%,49%,0)), color-stop(100%,hsla(222,70%,35%,0)));
background-image: -webkit-linear-gradient(top, hsla(225,36%,60%,1) 0%,hsla(223,39%,49%,0) 45%,hsla(222,70%,35%,0) 100%);
background-image: -o-linear-gradient(top, hsla(225,36%,60%,1) 0%,hsla(223,39%,49%,0) 45%,hsla(222,70%,35%,0) 100%);
background-image: -ms-linear-gradient(top, hsla(225,36%,60%,1) 0%,hsla(223,39%,49%,0) 45%,hsla(222,70%,35%,0) 100%);
background-image: linear-gradient(to bottom, hsla(225,36%,60%,1) 0%,hsla(223,39%,49%,0) 45%,hsla(222,70%,35%,0) 100%);
-webkit-box-shadow: inset 0 -1px 2px #405ea5,
-50px -50px 0 #7abe43,
0 -50px 0 #7abe43,
50px -50px 0 #7abe43,
-50px 0 0 #7abe43,
50px 0 0 #7abe43,
-50px 50px 0 #7abe43,
0 50px 0 #7abe43,
50px 50px 0 #7abe43;
box-shadow: inset 0 -1px 2px #405ea5,
-50px -50px 0 #7abe43,
0 -50px 0 #7abe43,
50px -50px 0 #7abe43,
-50px 0 0 #7abe43,
50px 0 0 #7abe43,
-50px 50px 0 #7abe43,
0 50px 0 #7abe43,
50px 50px 0 #7abe43;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-animation: counter-clockwise 1s;
-moz-animation: counter-clockwise 1s;
-o-animation: counter-clockwise 1s;
animation: counter-clockwise 1s;
}
.buddy-media-logo::after {
content: "";
width: 144px;
height: 144px;
display: block;
position: relative;
left: -52px;
top: -52px;
}
.buddy-media-logo:hover {
border-color: #222;
background: #1a1a1a;
background-image: -moz-linear-gradient(top, hsla(0,0%,67%,1) 0%, hsla(0,0%,82%,0) 45%, hsla(0,0%,100%,0) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,67%,1)), color-stop(45%,hsla(0,0%,82%,0)), color-stop(100%,hsla(0,0%,100%,0)));
background-image: -webkit-linear-gradient(top, hsla(0,0%,67%,1) 0%,hsla(0,0%,82%,0) 45%,hsla(0,0%,100%,0) 100%);
background-image: -o-linear-gradient(top, hsla(0,0%,67%,1) 0%,hsla(0,0%,82%,0) 45%,hsla(0,0%,100%,0) 100%);
background-image: -ms-linear-gradient(top, hsla(0,0%,67%,1) 0%,hsla(0,0%,82%,0) 45%,hsla(0,0%,100%,0) 100%);
background-image: linear-gradient(to bottom, hsla(0,0%,67%,1) 0%,hsla(0,0%,82%,0) 45%,hsla(0,0%,100%,0) 100%);
-webkit-box-shadow: inset 0 -1px 2px #666,
-50px -50px 0 white,
0 -50px 0 white,
50px -50px 0 white,
-50px 0 0 white,
50px 0 0 white,
-50px 50px 0 white,
0 50px 0 white,
50px 50px 0 white;
box-shadow: inset 0 -1px 2px #666,
-50px -50px 0 white,
0 -50px 0 white,
50px -50px 0 white,
-50px 0 0 white,
50px 0 0 white,
-50px 50px 0 white,
0 50px 0 white,
50px 50px 0 white;
-webkit-animation: clockwise 1s;
-moz-animation: clockwise 1s;
-o-animation: clockwise 1s;
animation: clockwise 1s;
}
.buddy-media-logo:active {
border-color: #1b409a;
background: #1b409a;
background-image: -moz-linear-gradient(top, hsla(225,36%,60%,1) 0%, hsla(223,39%,49%,0) 45%, hsla(222,70%,35%,0) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(225,36%,60%,1)), color-stop(45%,hsla(223,39%,49%,0)), color-stop(100%,hsla(222,70%,35%,0)));
background-image: -webkit-linear-gradient(top, hsla(225,36%,60%,1) 0%,hsla(223,39%,49%,0) 45%,hsla(222,70%,35%,0) 100%);
background-image: -o-linear-gradient(top, hsla(225,36%,60%,1) 0%,hsla(223,39%,49%,0) 45%,hsla(222,70%,35%,0) 100%);
background-image: -ms-linear-gradient(top, hsla(225,36%,60%,1) 0%,hsla(223,39%,49%,0) 45%,hsla(222,70%,35%,0) 100%);
background-image: linear-gradient(to bottom, hsla(225,36%,60%,1) 0%,hsla(223,39%,49%,0) 45%,hsla(222,70%,35%,0) 100%);
-webkit-box-shadow: inset 0 -1px 2px #405ea5,
-50px -50px 0 white,
0 -50px 0 white,
50px -50px 0 white,
-50px 0 0 white,
50px 0 0 white,
-50px 50px 0 white,
0 50px 0 white,
50px 50px 0 white;
box-shadow: inset 0 -1px 2px #405ea5,
-50px -50px 0 white,
0 -50px 0 white,
50px -50px 0 white,
-50px 0 0 white,
50px 0 0 white,
-50px 50px 0 white,
0 50px 0 white,
50px 50px 0 white;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
animation: none;
}
/* Animations */
@-webkit-keyframes clockwise {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes clockwise {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes clockwise {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-webkit-keyframes counter-clockwise {
from { -webkit-transform: rotate(360deg); }
to { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes counter-clockwise {
from { -moz-transform: rotate(360deg); }
to { -moz-transform: rotate(0deg); }
}
@-ms-keyframes counter-clockwise {
from { -ms-transform: rotate(360deg); }
to { -ms-transform: rotate(0deg); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment