Gudang Update

Tutorials: How To Make Social Media Flip Cards

Tutorials: How To Make Social Media Flip Cards

Tutorials: How To Make Social Media Flip Cards
For today's discussion we will again give a tutorial that is, how to make social media flip cards.

You already know exactly what this widget is for! Moreover, this is very useful for most website and blog owners. Maybe here we will not make much ado, let's just get to the point of making it.

The first step, we try to make the Css first. To make it easier for you all, you can just copy and paste the following Css code:

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 0.4s linear, background-color 0s linear 0.2s, color 0s linear 0.2s;
a:hover article {
  transform: perspective(300px) rotateY(180deg);
  color: #eee;
  transition: transform 0.2s linear, background-color 0s linear 0.1s, color 0s linear 0.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: #3399CC;
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: #445566;

span {
  transition: transform 0s linear 0.2s, text-shadow 0s linear 0.2s;
  display: block;
  -webkit-font-smoothing: subpixel-antialiased;
  font-smoothing: antialiased;
a:hover span {
  transition: transform 0s linear 0.1s, text-shadow 0s linear 0.1s;
  transform: scale(-1, 1);
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.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: normal;
  font-style: normal;
/* This triggers a redraw in IE to Fix IE8's :before content rendering. */
html:hover [class^="ss-"] {
  -ms-zoom: 1;

.ss-icon, .ss-icon.ss-social, .ss-icon.ss-social-circle,
[class^="ss-"]:before, [class*=" ss-"]:before,
[class^="ss-"][class*=" ss-social"]:before, [class*=" ss-"][class*=" ss-social"]:before,
[class^="ss-"].right:after, [class*=" ss-"].right:after,
[class^="ss-"][class*=" ss-social"].right:after, [class*=" ss-"][class*=" ss-social"].right:after {
  font-family: "SSSocial";
  font-style: normal;
  font-weight: normal;
  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;

[class^="ss-"].ss-social-circle:before, [class*=" ss-"].ss-social-circle:before,
[class^="ss-"].ss-social-circle.right:after, [class*=" ss-"].ss-social-circle.right:after {
  font-weight: bold;

[class*=" ss-"].right:before {
  display: none;
  content: '';
If so, let's continue to the next stage the second stage (making Html). And for the Html code you can see as below:

<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>
Do as the first step, copy and paste. After that, you just save the file.

The sample results from this tutorial. Please see first through this button:

Live Demo

If you have prepared the two files. The last step is, you see how it works. However, if there is a mistake you will most likely not follow the methods correctly. We have tested everything before we publish it.

We think that's enough for this tutorial, hopefully it's useful.
Load comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel