Skip to content

Instantly share code, notes, and snippets.

@easte72106

easte72106/CSS-Long-Shadow.markdown

Forked from anonymous/CSS-Long-Shadow.markdown
Created August 20, 2014 01:26
Show Gist options
  • Save easte72106/90accb072799f7b242a0 to your computer and use it in GitHub Desktop.
Save easte72106/90accb072799f7b242a0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS-Long-Shadow.markdown
Raw
index.html
<h1>Hover to see the shadows</h1>
<a href="https://www.facebook.com/designcouch?ref=br_tf" class="logo facebook" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/designcouch" class="logo twitter" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/pub/jesse-couch/14/261/831" class="logo linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a href="https://dribbble.com/designcouch" class="logo dribbble" target="_blank">
<i class="fa fa-dribbble"></i>
</a>
Raw
style.scss
* {
box-sizing:border-box;
transition:.5s ease-in-out;
}
h1 {
font-family:helvetica neue,helvetica,arial,sans-serif;
font-size:35px;
font-weight:200;
color:#a9a9a9;
margin:50px auto 20px auto;
}
$facebook-color:#173062;
$twitter-color:#2274b2;
$linkedin-color:#075e86;
$dribbble-color:#ae2258;
body {
text-align:center;
}
.logo {
display:inline-block;
position:relative;
left:0;
top:0;
padding:30px;
font-size:45px;
line-height:45px;
height:105px;
width:105px;
text-align:center;
overflow:hidden;
border-radius:10px;
margin:20px 20px 20px 0;
color:white;
box-shadow:2px 2px 2px rgba(0,0,0,.25);
}
.logo:active {
box-shadow:2px 2px 2px rgba(0,0,0,.25);
left:0px;
top:0px;
}
.facebook {
background: #3b5998; /* Old browsers */
background: -moz-linear-gradient(-45deg, #3b5998 0%, #3b5998 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3b5998), color-stop(100%,#3b5998)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #3b5998 0%,#3b5998 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #3b5998 0%,#3b5998 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #3b5998 0%,#3b5998 100%); /* IE10+ */
background: linear-gradient(135deg, #3b5998 0%,#3b5998 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b5998', endColorstr='#3b5998',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.facebook:hover {
background: #3b5998; /* Old browsers */
background: -moz-linear-gradient(-45deg, #3b5998 0%, #173062 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3b5998), color-stop(100%,#173062)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #3b5998 0%,#173062 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #3b5998 0%,#173062 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #3b5998 0%,#173062 100%); /* IE10+ */
background: linear-gradient(135deg, #3b5998 0%,#173062 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b5998', endColorstr='#173062',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.logo:hover .fa-facebook {
text-shadow:
1px 1px 0px $facebook-color,
2px 2px 0px $facebook-color,
3px 3px 0px $facebook-color,
4px 4px 0px $facebook-color,
5px 5px 0px $facebook-color,
6px 6px 0px $facebook-color,
7px 7px 0px $facebook-color,
8px 8px 0px $facebook-color,
10px 10px 0px $facebook-color,
11px 11px 0px $facebook-color,
12px 12px 0px $facebook-color,
13px 13px 0px $facebook-color,
14px 14px 0px $facebook-color,
15px 15px 0px $facebook-color,
16px 16px 0px $facebook-color,
17px 17px 0px $facebook-color,
18px 18px 0px $facebook-color,
19px 19px 0px $facebook-color,
20px 20px 0px $facebook-color,
20px 20px 0px $facebook-color,
21px 21px 0px $facebook-color,
22px 22px 0px $facebook-color,
23px 23px 0px $facebook-color,
24px 24px 0px $facebook-color,
25px 25px 0px $facebook-color,
26px 26px 0px $facebook-color,
27px 27px 0px $facebook-color,
28px 28px 0px $facebook-color,
29px 29px 0px $facebook-color,
30px 30px 0px $facebook-color,
31px 31px 0px $facebook-color,
32px 32px 0px $facebook-color,
33px 33px 0px $facebook-color,
34px 34px 0px $facebook-color,
35px 35px 0px $facebook-color,
36px 36px 0px $facebook-color,
37px 37px 0px $facebook-color,
38px 38px 0px $facebook-color,
39px 39px 0px $facebook-color,
40px 40px 0px $facebook-color,
;
}
.twitter {
background: #55acee; /* Old browsers */
background: -moz-linear-gradient(-45deg, #55acee 0%, #55acee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#55acee), color-stop(100%,#55acee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #55acee 0%,#55acee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #55acee 0%,#55acee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #55acee 0%,#55acee 100%); /* IE10+ */
background: linear-gradient(135deg, #55acee 0%,#55acee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55acee', endColorstr='#55acee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.twitter:hover {
background: #55acee; /* Old browsers */
background: -moz-linear-gradient(-45deg, #55acee 0%, #2274b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#55acee), color-stop(100%,#2274b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #55acee 0%,#2274b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #55acee 0%,#2274b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #55acee 0%,#2274b2 100%); /* IE10+ */
background: linear-gradient(135deg, #55acee 0%,#2274b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55acee', endColorstr='#2274b2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.logo:hover .fa-twitter {
text-shadow:
1px 1px 0px $twitter-color,
2px 2px 0px $twitter-color,
3px 3px 0px $twitter-color,
4px 4px 0px $twitter-color,
5px 5px 0px $twitter-color,
6px 6px 0px $twitter-color,
7px 7px 0px $twitter-color,
8px 8px 0px $twitter-color,
10px 10px 0px $twitter-color,
11px 11px 0px $twitter-color,
12px 12px 0px $twitter-color,
13px 13px 0px $twitter-color,
14px 14px 0px $twitter-color,
15px 15px 0px $twitter-color,
16px 16px 0px $twitter-color,
17px 17px 0px $twitter-color,
18px 18px 0px $twitter-color,
19px 19px 0px $twitter-color,
20px 20px 0px $twitter-color,
20px 20px 0px $twitter-color,
21px 21px 0px $twitter-color,
22px 22px 0px $twitter-color,
23px 23px 0px $twitter-color,
24px 24px 0px $twitter-color,
25px 25px 0px $twitter-color,
26px 26px 0px $twitter-color,
27px 27px 0px $twitter-color,
28px 28px 0px $twitter-color,
29px 29px 0px $twitter-color,
30px 30px 0px $twitter-color,
31px 31px 0px $twitter-color,
32px 32px 0px $twitter-color,
33px 33px 0px $twitter-color,
34px 34px 0px $twitter-color,
35px 35px 0px $twitter-color,
36px 36px 0px $twitter-color,
37px 37px 0px $twitter-color,
38px 38px 0px $twitter-color,
39px 39px 0px $twitter-color,
40px 40px 0px $twitter-color,
;
}
.linkedin {
background: #0e87bf; /* Old browsers */
background: -moz-linear-gradient(-45deg, #0e87bf 0%, #0e87bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0e87bf), color-stop(100%,#0e87bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #0e87bf 0%,#0e87bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #0e87bf 0%,#0e87bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #0e87bf 0%,#0e87bf 100%); /* IE10+ */
background: linear-gradient(135deg, #0e87bf 0%,#0e87bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e87bf', endColorstr='#0e87bf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.linkedin:hover {
background: #0e87bf; /* Old browsers */
background: -moz-linear-gradient(-45deg, #0e87bf 0%, #075e86 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0e87bf), color-stop(100%,#075e86)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #0e87bf 0%,#075e86 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #0e87bf 0%,#075e86 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #0e87bf 0%,#075e86 100%); /* IE10+ */
background: linear-gradient(135deg, #0e87bf 0%,#075e86 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e87bf', endColorstr='#075e86',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.logo:hover .fa-linkedin {
text-shadow:
1px 1px 0px $linkedin-color,
2px 2px 0px $linkedin-color,
3px 3px 0px $linkedin-color,
4px 4px 0px $linkedin-color,
5px 5px 0px $linkedin-color,
6px 6px 0px $linkedin-color,
7px 7px 0px $linkedin-color,
8px 8px 0px $linkedin-color,
10px 10px 0px $linkedin-color,
11px 11px 0px $linkedin-color,
12px 12px 0px $linkedin-color,
13px 13px 0px $linkedin-color,
14px 14px 0px $linkedin-color,
15px 15px 0px $linkedin-color,
16px 16px 0px $linkedin-color,
17px 17px 0px $linkedin-color,
18px 18px 0px $linkedin-color,
19px 19px 0px $linkedin-color,
20px 20px 0px $linkedin-color,
20px 20px 0px $linkedin-color,
21px 21px 0px $linkedin-color,
22px 22px 0px $linkedin-color,
23px 23px 0px $linkedin-color,
24px 24px 0px $linkedin-color,
25px 25px 0px $linkedin-color,
26px 26px 0px $linkedin-color,
27px 27px 0px $linkedin-color,
28px 28px 0px $linkedin-color,
29px 29px 0px $linkedin-color,
30px 30px 0px $linkedin-color,
31px 31px 0px $linkedin-color,
32px 32px 0px $linkedin-color,
33px 33px 0px $linkedin-color,
34px 34px 0px $linkedin-color,
35px 35px 0px $linkedin-color,
36px 36px 0px $linkedin-color,
37px 37px 0px $linkedin-color,
38px 38px 0px $linkedin-color,
39px 39px 0px $linkedin-color,
40px 40px 0px $linkedin-color,
;
}
.dribbble {
background: #ea4c89; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ea4c89 0%, #ea4c89 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ea4c89), color-stop(100%,#ea4c89)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ea4c89 0%,#ea4c89 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ea4c89 0%,#ea4c89 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ea4c89 0%,#ea4c89 100%); /* IE10+ */
background: linear-gradient(135deg, #ea4c89 0%,#ea4c89 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea4c89', endColorstr='#ea4c89',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.dribbble:hover {
background: #ea4c89; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ea4c89 0%, #ae2258 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ea4c89), color-stop(100%,#ae2258)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ea4c89 0%,#ae2258 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ea4c89 0%,#ae2258 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ea4c89 0%,#ae2258 100%); /* IE10+ */
background: linear-gradient(135deg, #ea4c89 0%,#ae2258 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea4c89', endColorstr='#ae2258',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.logo:hover .fa-dribbble {
text-shadow:
1px 1px 0px $dribbble-color,
2px 2px 0px $dribbble-color,
3px 3px 0px $dribbble-color,
4px 4px 0px $dribbble-color,
5px 5px 0px $dribbble-color,
6px 6px 0px $dribbble-color,
7px 7px 0px $dribbble-color,
8px 8px 0px $dribbble-color,
10px 10px 0px $dribbble-color,
11px 11px 0px $dribbble-color,
12px 12px 0px $dribbble-color,
13px 13px 0px $dribbble-color,
14px 14px 0px $dribbble-color,
15px 15px 0px $dribbble-color,
16px 16px 0px $dribbble-color,
17px 17px 0px $dribbble-color,
18px 18px 0px $dribbble-color,
19px 19px 0px $dribbble-color,
20px 20px 0px $dribbble-color,
20px 20px 0px $dribbble-color,
21px 21px 0px $dribbble-color,
22px 22px 0px $dribbble-color,
23px 23px 0px $dribbble-color,
24px 24px 0px $dribbble-color,
25px 25px 0px $dribbble-color,
26px 26px 0px $dribbble-color,
27px 27px 0px $dribbble-color,
28px 28px 0px $dribbble-color,
29px 29px 0px $dribbble-color,
30px 30px 0px $dribbble-color,
31px 31px 0px $dribbble-color,
32px 32px 0px $dribbble-color,
33px 33px 0px $dribbble-color,
34px 34px 0px $dribbble-color,
35px 35px 0px $dribbble-color,
36px 36px 0px $dribbble-color,
37px 37px 0px $dribbble-color,
38px 38px 0px $dribbble-color,
39px 39px 0px $dribbble-color,
40px 40px 0px $dribbble-color,
;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment