Social Flip Cards CSS

Social Flip Cards

Social Flip Cards / Redes sociales estilo flip con CSS Y HTML 

BY Charlotte Dann


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


HTML

<section class="ss-icon">
<a href="#"><article><span>facebook</span></article></a>
<a href="#"><article><span>twitter</span></article></a>
<a href="#"><article><span>tumblr</span></article></a>
<a href="#"><article><span>pinterest</span></article></a>
<a href="#"><article><span>behance</span></article></a>
<a href="#"><article><span>github</span></article></a>
<a href="#"><article><span>linkedin</span></article></a>
<a href="#"><article><span>dribbble</span></article></a>
<a href="#"><article><span>instagram</span></article></a>
<a href="#"><article><span>flickr</span></article></a>
<a href="#"><article><span>blogger</span></article></a>
<a href="#"><article><span>vimeo</span></article></a>
</section>


CSS

section{position:absolute;left:50%;top:50%;margin:-135px -180px;width:360px;min-height:270px;font-size:35px;text-align:center}a{display:inline-block;position:relative;float:left;width:80px;height:80px;margin:5px}article{cursor:pointer;display:block;position:absolute;width:100%;height:100%;background-color:#333;box-shadow:0 0 6px -2px #000,0 0 45px -20px #000;color:#fff;line-height:90px;transform:perspective(300px) rotateY(0deg);transition:transform .4s linear,background-color 0s linear .2s,color 0s linear .2s}a:hover article{transform:perspective(300px) rotateY(180deg);color:#eee;transition:transform .2s linear,background-color 0s linear .1s,color 0s linear .1s}a:nth-child(1):hover article{background-color:#3B5998}a:nth-child(2):hover article{background-color:#00ACED}a:nth-child(3):hover article{background-color:#2C4762}a:nth-child(4):hover article{background-color:#CB2027}a:nth-child(5):hover article{background-color:#1769FF}a:nth-child(6):hover article{background-color:#4183C4}a:nth-child(7):hover article{background-color:#39C}a:nth-child(8):hover article{background-color:#EA4C89}a:nth-child(9):hover article{background-color:#3F729B}a:nth-child(10):hover article{background-color:#FF0084}a:nth-child(11):hover article{background-color:#F26300}a:nth-child(12):hover article{background-color:#456}span{transition:transform 0s linear .2s,text-shadow 0s linear .2s;display:block;-webkit-font-smoothing:subpixel-antialiased;font-smoothing:antialiased}a:hover span{transition:transform 0s linear .1s,text-shadow 0s linear .1s;transform:scale(-1,1);text-shadow:0 0 50px rgba(255,255,255,.5)}body{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JhZGVhNiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYjNkZWE2Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmFkZWE2Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);background:-webkit-gradient(linear,0 50%,100% 50%,color-stop(0%,#badea6),color-stop(50%,#b3dea6),color-stop(100%,#badea6));background:-moz-linear-gradient(left,#badea6,#b3dea6 50%,#badea6);background:-webkit-linear-gradient(left,#badea6,#b3dea6 50%,#badea6);background:linear-gradient(to right,#badea6,#b3dea6 50%,#badea6)}@font-face{font-family:SSSocial;src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.eot);src:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.eot?#iefix) format("embedded-opentype"),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.woff) format("woff"),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.ttf) format("truetype"),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2361/ss-social-regular.svg#SSSocialRegular) format("svg");font-weight:400;font-style:normal}html:hover [class^=ss-]{-ms-zoom:1}.ss-icon,.ss-icon.ss-social,.ss-icon.ss-social-circle,[class*=" ss-"].right:after,[class*=" ss-"]:before,[class*=" ss-"][class*=" ss-social"].right:after,[class*=" ss-"][class*=" ss-social"]:before,[class^=ss-].right:after,[class^=ss-]:before,[class^=ss-][class*=" ss-social"].right:after,[class^=ss-][class*=" ss-social"]:before{font-family:SSSocial;font-style:normal;font-weight:400;text-decoration:none;text-rendering:optimizeLegibility;white-space:nowrap;-moz-font-feature-settings:"liga=1";-moz-font-feature-settings:"liga";-ms-font-feature-settings:"liga" 1;-o-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.ss-icon.ss-social-circle,[class*=" ss-"].ss-social-circle.right:after,[class*=" ss-"].ss-social-circle:before,[class^=ss-].ss-social-circle.right:after,[class^=ss-].ss-social-circle:before{font-weight:700}[class*=" ss-"].right:before,[class^=ss-].right:before{display:none;content:''}

¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones