Skip to content

Instantly share code, notes, and snippets.

@maxw3st

maxw3st/index.html

Created March 18, 2013 16:56
Show Gist options
  • Save maxw3st/5188761 to your computer and use it in GitHub Desktop.
Save maxw3st/5188761 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by maxw3st. Share Bar reveal - Hover over the "Share" text or "cover" area to reveal svg social media icons. This can be resized for any sized icons. All code, no http requests until the user clicks an icon to trigger a share link. Easily resized using just height and width declarations in three CSS rules (see comments in CSS).
Raw
index.html
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<meta name="description" content="SVG fully scalable social icon set with animated hover effects" />
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="imagetoolbar" content="no" />
<![endif]-->
<meta charset=utf-8 />
<title>SVG Share icon demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<!--[if lt IE 9]><script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script><![endif]-->
</head>
<body>
<div class="wrapper wrapper:after">
<div class="share-bar">
<div class="svg-share">
<div class="svgicon2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g>
<path class="twitsvg" d="M449.671,92.734c-16.254,9.811-34.256,16.933-53.416,20.771
c-15.342-16.636-37.206-27.029-61.401-27.029c-46.451,0-84.115,38.321-84.115,85.59c0,6.709,0.744,13.241,2.179,19.507
c-69.909-3.571-131.89-37.646-173.377-89.431c-7.242,12.64-11.389,27.344-11.389,43.029c0,29.698,14.85,55.895,37.421,71.244
c-13.788-0.445-26.76-4.295-38.1-10.705c-0.008,0.357-0.008,0.715-0.008,1.076c0,41.47,28.995,76.062,67.475,83.928
c-7.057,1.956-14.488,3.004-22.16,3.004c-5.42,0-10.689-0.536-15.826-1.536c10.705,34.002,41.769,58.75,78.577,59.44
c-28.788,22.956-65.056,36.641-104.467,36.641c-6.789,0-13.485-0.402-20.065-1.196c37.226,24.284,81.441,38.459,128.943,38.459
c154.721,0,239.33-130.428,239.33-243.534c0-3.71-0.081-7.403-0.245-11.074c16.437-12.067,30.698-27.143,41.972-44.305
c-15.084,6.807-31.297,11.408-48.31,13.477C430.054,129.495,443.39,112.722,449.671,92.734z"/>
<path fill="transparent" d="M426.671,0H85.343C38.406,0,0,38.405,0,85.345v341.312C0,473.625,38.406,512,85.343,512h341.328
C473.609,512,512,473.625,512,426.655V85.345C512,38.405,473.609,0,426.671,0z M419.026,170.917
c0.164,3.671,0.245,7.364,0.245,11.074c0,113.106-84.608,243.534-239.33,243.534c-47.502,0-91.717-14.175-128.943-38.459
c6.58,0.794,13.276,1.196,20.065,1.196c39.411,0,75.679-13.685,104.467-36.641c-36.808-0.69-67.872-25.438-78.577-59.44
c5.137,1,10.406,1.536,15.826,1.536c7.672,0,15.103-1.048,22.16-3.004c-38.48-7.866-67.475-42.458-67.475-83.928
c0-0.361,0-0.719,0.008-1.076c11.34,6.41,24.312,10.26,38.1,10.705c-22.571-15.349-37.421-41.546-37.421-71.244
c0-15.685,4.147-30.389,11.389-43.029c41.487,51.785,103.468,85.86,173.377,89.431c-1.435-6.266-2.179-12.798-2.179-19.507
c0-47.269,37.664-85.59,84.115-85.59c24.195,0,46.06,10.393,61.401,27.029c19.16-3.838,37.162-10.96,53.416-20.771
c-6.281,19.988-19.617,36.761-36.982,47.355c17.013-2.069,33.226-6.67,48.31-13.477
C449.725,143.774,435.463,158.85,419.026,170.917z"/>
</g>
</svg>
</div>
<div class="svgicon2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g class="face-all">
<path fill="transparent" d="M352.247,257.488h83.167l12.684-73.282h-95.851l0.116-39.677
c0-20.68,2.631-31.791,23.84-31.756h71.452V33.488h-87.484c-75.922,0-103.777,38.454-103.777,103.125v47.593H210.19v73.282h46.204
V442.5h95.853V257.488z"/>
<path class="face1" d="M511.999,84.667C511.999,38.103,473.609,0,426.674,0H85.339C38.405,0,0,38.103,0,84.667v338.647
c0,4.854,0.439,9.606,1.239,14.241h254.767V253.999H209.73v-72.731h46.275v-47.215c0-64.158,27.898-102.307,103.934-102.307h87.618
v78.656h-71.562c-21.241-0.035-23.876,10.988-23.876,31.504l-0.116,39.362H448l-12.702,72.731h-83.294v183.556h158.757
c0.799-4.635,1.238-9.39,1.238-14.243V84.667z"/>
<rect x="256.394" y="442.5" fill="transparent" width="95.853" height="38.988"/>
<path fill="transparent" d="M510.763,442.789c-6.865,36.836-41.976,65.071-83.959,65.071l-340.816,0.001
c-41.983,0-77.106-28.237-83.972-65.072H0.779v66h511.22v-66H510.763z"/>
<rect x="256.035" y="479.5" class="face1" fill="#30487A" width="95.965" height="0.116"/>
<path class="face2" fill="#758EB4" d="M256.035,414.5H0c0,31.5,5.583,47.415,18.309,65h237.726V414.5z"/>
<path class="face2" fill="#758EB4" d="M512,414.5H352v65h140.951C506,464,512,449,512,414.5z"/>
<path class="face1" fill="#30487A" d="M492.951,479.5H352v0.116h-95.965V479.5H18.309c15.525,18.547,39.314,31.475,63.44,32.5h348.083
C453.905,510.988,477.328,498.021,492.951,479.5z"/>
</g>
</svg>
</div>
<div class="svgicon2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g class="pint-all">
<path class="pintsvg" d="M236.895,66.291c-63.451,7.101-126.709,58.446-129.343,131.783c-1.637,44.805,11.078,78.41,53.688,87.855
c18.474-32.632-5.955-39.805-9.762-63.451c-15.644-96.718,111.577-162.731,178.155-95.178
c46.073,46.783,15.739,190.646-58.57,175.713c-71.167-14.305,34.847-128.834-21.966-151.309
c-46.175-18.28-70.703,55.884-48.81,92.737c-12.838,63.375-40.487,123.073-29.285,202.557
c36.288-26.335,48.539-76.755,58.569-129.344c18.231,11.076,27.993,22.597,51.252,24.403
c85.801,6.635,133.73-85.636,122.025-170.83C392.448,95.745,317.137,57.309,236.895,66.291z"/>
<path fill="transparent" d="M426.675,0H85.324C38.199,0,0,38.21,0,85.343v341.315
C0,473.791,38.199,512,85.324,512h341.351C473.8,512,512,473.791,512,426.658V85.343C512,38.21,473.8,0,426.675,0z
M280.822,342.059c-23.26-1.807-33.021-13.327-51.252-24.403c-10.03,52.589-22.281,103.009-58.569,129.344
c-11.202-79.484,16.447-139.182,29.285-202.557c-21.893-36.853,2.635-111.017,48.81-92.737
c56.813,22.474-49.2,137.004,21.966,151.309c74.31,14.934,104.644-128.93,58.57-175.713
c-66.578-67.553-193.799-1.54-178.155,95.178c3.807,23.646,28.236,30.819,9.762,63.451c-42.61-9.445-55.325-43.051-53.688-87.855
c2.634-73.337,65.892-124.682,129.343-131.783c80.242-8.982,155.553,29.454,165.953,104.938
C414.553,256.423,366.623,348.693,280.822,342.059z"/>
</g>
</svg>
</div>
<div class="svgicon2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<g class="goog-all">
<path class="goog" d="M117.954,282.574c46.005,1.369,76.867-46.349,68.931-106.599c-7.947-60.24-51.698-108.584-97.704-109.961
c-46.013-1.365-76.87,44.741-68.926,105C28.196,231.248,71.931,281.201,117.954,282.574z"/>
<path class="goog" d="M123.911,382.673c-13.573-13.167-24.313-29.3-24.313-49.189c0-11.805,3.782-23.168,9.067-33.261
c-5.391,0.385-10.895,0.497-16.563,0.497c-37.178,0-68.753-12.038-92.102-31.927v33.621l0.003,100.865
c26.72-12.688,58.444-20.312,92.94-20.312C103.75,382.968,113.654,382.673,123.911,382.673z"/>
<path class="goog" d="M512,128V85.345C512,38.405,473.609,0,426.671,0H85.343C39.205,0,1.337,37.116,0.061,82.963
C29.242,57.27,69.723,35.805,111.498,35.805c44.652,0,178.622,0,178.622,0l-39.974,33.809h-56.634
c37.565,14.402,57.578,58.062,57.578,102.861c0,37.624-20.905,69.977-50.444,92.984c-28.822,22.451-34.286,31.854-34.286,50.939
c0,16.289,30.873,44,47.016,55.394c47.19,33.269,62.458,64.156,62.458,115.728c0,8.215-1.021,16.415-3.033,24.48h153.871
C473.609,512,512,473.625,512,426.655V160.001h-96V256h-32v-96h-95.999v-32H384V32h32v96H512z"/>
<path class="goog" d="M156.281,406.639c-13.536-4.365-28.447-6.937-44.447-7.104c-44.809-0.482-86.554,17.471-110.108,44.186
C9.686,482.574,44.243,512,85.343,512h143.222c0.908-5.564,1.348-11.316,1.348-17.216c0-6.268-0.767-12.396-2.188-18.361
C220.196,447.02,193.498,432.441,156.281,406.639z"/>
</g>
</svg>
</div>
</div> <!-- end svg-share div -->
<div class="bar-cover">
<p>Share</p>
</div>
</div> <!-- end share-bar div -->
</body>
Raw
script.js
// MS fix for IE Mobile 10
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].
appendChild(msViewportStyle);
}
Raw
style.css
body {
background: #efefef;
}
.wrapper {
position: relative;
text-align: center;
font-size: 16px;
font-size: 1rem;
}
/* the @catalinred clearfix */
.wrapper:after {
content: "";
display: table;
clear: both;
}
/* this rule sets the size for all the icons inside the reveal container */
.svgicon2 {
position: relative;
perspective: 300px;
transform-style: preserve-3d;
perspective-origin: 50% 50% 0%;
float: left;
top: .5em;
margin-right: 1em;
left: 2.5em;
height: 2em;
width: 2em;
}
.svgicon2 .twitsvg {
position: absolute;
transform-perspective: 50% 50% 0%;
background: transparent;
background-size: 3em 3em;
-webkit-transform: rotateY(45deg);
-ms-transform: rotateY(45deg);
transform: rotateY(45deg);
fill: #555;
-webkit-transition: fill .3s ease-in;
-webkit-transition: all .3s ease-in;
-ms-transition: fill .3s ease-in;
-ms-transition: all .3s ease-in;
transition: fill .3s ease-in;
transition: all .3s ease-in;
}
.twitsvg:hover {
position: absolute;
background: transparent;
background-size: 3em 3em;
fill: #35AFEB;
cursor: pointer;
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.svgicon .pint-all {
position: absolute;
transform-perspective: 50% 50% 0%;
background: transparent;
background-size: 3em 3em;
-webkit-transform: rotateY(-45deg);
-ms-transform: rotateY(-45deg);
transform: rotateY(-45deg);
-webkit-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
.svgicon2 .pint-all {
position: absolute;
transform-perspective: 50% 50% 0%;
background: transparent;
background-size: 3em 3em;
-webkit-transform: rotateY(-45deg);
-ms-transform: rotateY(-45deg);
transform: rotateY(-45deg);
-webkit-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
.pint-all:hover {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
cursor: pointer;
}
.pint-all .pintsvg {
position: absolute;
transform-perspective: 50% 50% 0%;
fill: #555;
left: -1em;
margin-top: -2em;
background: transparent;
background-size: 3em 3em;
-webkit-transition: fill .3s ease-in;
-ms-transition: fill .3s ease-in;
transition: fill .3s ease-in;
}
.pint-all:hover .pintsvg {
fill: #CB2027;
}
.face-all {
position: relative;
}
.face-all:hover {
cursor: pointer;
}
.face-all .face1 {
position: absolute;
transform-perspective: 50% 50% 0%;
fill: #555;
-webkit-transform: rotateY(-45deg);
-ms-transform: rotateY(-45deg);
transform: rotateY(-45deg);
-webkit-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
.face-all:hover .face1 {
fill: #30487A;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
cursor: pointer;
}
.face-all .face2 {
position: absolute;
transform-perspective: 50% 50% 0%;
fill: #555;
-webkit-transform: rotateY(-45deg);
-ms-transform: rotateY(-45deg);
transform: rotateY(-45deg);
-webkit-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
}
.face-all:hover .face2 {
fill: #758EB4;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
cursor: pointer;
}
.goog-all {
position: relative;
}
.goog-all:hover {
cursor: pointer;
}
.goog-all .goog {
position: absolute;
transform-perspective: 50% 50% 0%;
fill: #555;
-webkit-transform: rotateY(-45deg);
-ms-transform: rotateY(-45deg);
transform: rotateY(-45deg);
-webkit-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
margin-left: 4em;
}
.goog-all:hover .goog {
fill:#B84F46;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
cursor: pointer;
}
/* this sets the font for "share" and hides it when the cover is open */
.bar-cover > p {
position: relative;
top: -1em;
padding-top: .4em;
font-family: "TragicSans Medium", sans-serif;
color: rgba(96, 132, 170, 0.7);
font-size: 1.5em;
text-shadow: 1px 1px 1px #fff, 0px -1px 1px #000;
transition: color .3s ease, visibility .3s ease;
}
.share-bar:hover .bar-cover p,
.bar-cover:hover p,
.share-bar:focus .bar-cover p,
.bar-cover:focus p {
color: rgba(127, 93, 59, 0.3);
text-shadow: none;
visibility: hidden;
}
/***********************reveal container for icons, set at 3em height for 2em icons**************************************************/
.share-bar {
transform-style: preserve-3d;
postion: relative;
perspective: 500px;
transition-perspective: 50% 50% 0%;
margin-left: auto;
margin-right: auto;
margin-top: 4rem;
height: 3em;
width: 16em;
border-radius: 2em;
-webkit-background: repeating-linear-gradient(180deg, rgba(255, 255, 221, 0.3), rgba(155, 155, 138, 0.3) 10%),
repeating-linear-gradient(45deg, rgba(221, 255, 255, 0.1), rgba(138, 155, 155, 0.1) 5%);
background: repeating-linear-gradient(180deg, rgba(255, 255, 221, 0.3), rgba(155, 155, 138, 0.3) 10%),
repeating-linear-gradient(45deg, rgba(221, 255, 255, 0.1), rgba(138, 155, 155, 0.1) 5%);
box-shadow: inset 0 0 .5rem rgba(0,0,0,0.5);
}
/* reveal cover size is matched to the .share-bar. both can easily be changed to match smaller, or larger share icons: 1.5em icons, 2em height, 12em width for instance */
.bar-cover {
position: absolute;
top: -.1em;
-webkit-top: 5em;
-webkit-transform-origin: 50% 100% 0px;
transform-origin: 50% 100% 0px;
-webkit-transform-perspective: 50% 50% 0%;
transform-perspective: 50% 50% 0%;
height: 3em;
width: 16em;
border-radius: 2em;
background: rgba(255, 255, 241, 1);
box-shadow: inset 0 0 5px rgba(186,136,87,0);
border-top: 5px solid rgba(55, 55, 55,0);
-webkit-transform: perspective(500px) rotateY(0deg) rotateX(0deg);
transform: perspective(500px) rotateY(0deg) rotateX(0deg);
-webkit-transition: all .5s ease-in;
transition: transform .5s ease-in, box-shadow .3s ease-in, border .3s ease-in .2s, top .3s ease-in, background .3s ease-out .3s;
}
.share-bar:hover .bar-cover,
.bar-cover:focus {
position: absolute;
top: -.2em;
-webkit-top: 4.8em;
backface-visibility: visible;
-webkit-transform-perspective: 50% 50% 0%;
transform-perspective: 50% 50% 0%;
color: rgba(127, 93, 59, 0.3);
background: rgba(5, 5, 5, 0.8);
box-shadow: inset 0 0 5px rgba(76,76,76,0.5);
border-top: 5px solid rgba(215, 215, 215,0.8);
cursor: pointer;
-webkit-transform-origin: 50% 100% 0px;
transform-origin: 50% 100% 0px;
-webkit-transform: perspective(500px) rotateY(0deg) rotateX(-135deg);
transform: perspective(500px) rotateY(0deg) rotateX(-135deg);
}
@maxw3st
Copy link
Author

maxw3st commented Mar 18, 2013

Works in IE10, Firefox (best), and Chrome. Fully resizable, Retina ready, no http requests for images of fonts. See it in action here: http://maxw3st.us/svgshare/share_reveal.html or here: http://codepen.io/maxw3st/pen/DnIod

SVGs were made using Illustrator to generate 512x512 versions of the icons at 300ppi. The ai files were exported as SVGs. Those SVGs were then modified in notepad++ to remove unnecessary header code and add CSS class selectors as needed. The SVGs can be sized just like fonts and will not pixelate at any size. Each icon "image" is less than 2K and requires no loadiing http request.

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