Created
March 18, 2013 16:56
-
-
Save maxw3st/5188761 to your computer and use it in GitHub Desktop.
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).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.