Trik Komputer: Make Social Media Icons With CSS3 3D

Sepertinya tutorial membuat sosial media icons dengan efek CSS3 animasi belum menggelitik nih! Biar lebih variasi gue tambahin tut's serupa ah :d Original title is Create 3D Social Media Buttons with CSS3. Membuat tombol berbagi (sosial) dengan efek 3D
Link berbagi sekarang akan meliputi 8 web jejaring yaitu: RSS, Twitter, Linkedin, Stumbleupon, Facebook, Google Plus, Flickr dan Pinterest. Berikut gambaran efek 3D dengan CSS

3D CSS Text

Dengan menambahkan atribut a:active maka akan terlihat kental efek 3 dimensinya ketika memencet ;)

Markup HTML

<div class="set-1">
<ul>
<li><a href="/" class="rss-small">RSS</a></li>
<li><a href="/" class="twitter-small">Twitter</a></li>
<li><a href="/" class="linkedin-small">Linkedin</a></li>
<li><a href="/" class="stumble-small">Stumbleupon</a></li>
<li><a href="/" class="facebook-small">Facebook</a></li>
<li><a href="/" class="gplus-small">GPlus</a></li>
<li><a href="/" class="flickr-small">Flickr</a></li>
<li><a href="/" class="pinterest-small">Pinterest</a></li>
</ul>
</div>

Kode CSS

.set-1 ul li {
  display: inline-block;
  margin: 5px 0 0 3px;
}
.set-1 a {
  position: relative;
  display: block;
  width: 60px;
  height: 54px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  color: transparent;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -webkit-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;

}
.set-1 a:active {
  -webkit-transform: translate(0,3px);
  transform: translate(0,3px);
}
a.twitter-small {
  -webkit-box-shadow: 0 6px 0 #2695BC;
  box-shadow: 0 6px 0 #2695BC;
}
a.twitter-small {
  background: #2CA9E1 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/twitter.png") no-repeat center center;
}
a.twitter-small:active {
  -webkit-box-shadow: 0 2px 0 #2695BC;
  box-shadow: 0 2px 0 #2695BC;
}
a.facebook-small {
  -webkit-box-shadow: 0 6px 0 #293F63;
  box-shadow: 0 6px 0 #293F63;
}
a.facebook-small {
  background: #3B5997 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/facebook.png") no-repeat center center;
}
a.facebook-small:active {
  -webkit-box-shadow: 0 2px 0 #293F63;
  box-shadow: 0 2px 0 #293F63;
}
a.pinterest-small {
  -webkit-box-shadow: 0 6px 0 #8C151B;
  box-shadow: 0 6px 0 #8C151B;
}
a.pinterest-small {
  background: #CD1D1F url("http://flashuser.net/tutorial/css3-social-media-buttons/images/pinterest.png") no-repeat center center;
}
a.pinterest-small:active {
  -webkit-box-shadow: 0 2px 0 #8C151B;
  box-shadow: 0 2px 0 #8C151B;
}
a.gplus-small {
  -webkit-box-shadow: 0 6px 0 #141412;
  box-shadow: 0 6px 0 #141412;
  position: relative;
}
a.gplus-small {
  background: #353631 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/gplus.png") no-repeat center center;
}
a.gplus-small:active {
  -webkit-box-shadow: 0 2px 0 #141412;
  box-shadow: 0 2px 0 #141412;
}
a.rss-small {
  -webkit-box-shadow: 0 6px 0 #C64802;
  box-shadow: 0 6px 0 #C64802;
}
a.rss-small {
  background: #FF6501 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/rss.png") no-repeat center center;
}
a.rss-small:active {
  -webkit-box-shadow: 0 2px 0 #C64802;
  box-shadow: 0 2px 0 #C64802;
}
a.linkedin-small {
  -webkit-box-shadow: 0 6px 0 #005377;
  box-shadow: 0 6px 0 #005377;
}
a.linkedin-small {
  background: #0073B2 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/linkedin.png") no-repeat center center;
}
a.linkedin-small:active {
  -webkit-box-shadow: 0 2px 0 #005377;
  box-shadow: 0 2px 0 #005377;
}
a.stumble-small {
  -webkit-box-shadow: 0 6px 0 #B7371D;
  box-shadow: 0 6px 0 #B7371D;
}
a.stumble-small {
  background: #EA4B24 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/stumble.png") no-repeat center center;
}
a.stumble-small:active {
  -webkit-box-shadow: 0 2px 0 #B7371D;
  box-shadow: 0 2px 0 #B7371D;
}
a.flickr-small {
  -webkit-box-shadow: 0 6px 0 #C10E78;
  box-shadow: 0 6px 0 #C10E78;
}
a.flickr-small {
  background: #FC1090 url("http://flashuser.net/tutorial/css3-social-media-buttons/images/flickr.png") no-repeat center center;
}
a.flickr-small:active {
  -webkit-box-shadow: 0 2px 0 #C10E78;
  box-shadow: 0 2px 0 #C10E78;
}

Itu baru gaya pertama, sekarang gaya yang kedua :d

Markup HTML

<div class="set-2">
<ul>
<li><a href="/" class="rss-big">RSS</a></li>
<li><a href="/" class="twitter-big">Twitter</a></li>
<li><a href="/" class="linkedin-big">Linkedin</a></li>
<li><a href="/" class="stumble-big">Stumbleupon</a></li>
<li><a href="/" class="facebook-big">Facebook</a></li>
<li><a href="/" class="gplus-big">GPlus</a></li>
<li><a href="/" class="flickr-big">Flickr</a></li>
<li><a href="/" class="pinterest-big">Pinterest</a></li>
</ul>
</div>

Kode CSS

.set-2 ul li {
  display: inline-block;
  margin: 10px 0 0 3px;
}
.set-2 a:active {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
}
.set-2 a {
  position: relative;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Oswald';
  display: block;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-size: 16px;
  padding: 11px 15px 10px 45px;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
a.twitter-big {
  -webkit-box-shadow: 0 6px 0 #2695BC;
  box-shadow: 0 6px 0 #2695BC;
}
a.twitter-big {
  background: #2CA9E1;
}
a.twitter-big:active {
  -webkit-box-shadow: 0 2px 0 #2695BC;
  box-shadow: 0 2px 0 #2695BC;
}
a.twitter-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/twitter.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.facebook-big {
  -webkit-box-shadow: 0 6px 0 #293F63;
  box-shadow: 0 6px 0 #293F63;
}
a.facebook-big {
  background: #3B5997;
}
a.facebook-big:active {
  -webkit-box-shadow: 0 2px 0 #293F63;
  box-shadow: 0 2px 0 #293F63;
}
a.facebook-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/facebook.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.pinterest-big {
  -webkit-box-shadow: 0 6px 0 #8C151B;
  box-shadow: 0 6px 0 #8C151B;
}
a.pinterest-big {
  background: #CD1D1F;
}
a.pinterest-big:active {
  -webkit-box-shadow: 0 2px 0 #8C151B;
  box-shadow: 0 2px 0 #8C151B;
}
a.pinterest-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/pinterest.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.gplus-big {
  -webkit-box-shadow: 0 6px 0 #141412;
  box-shadow: 0 6px 0 #141412;
  position: relative;
}
a.gplus-big {
  background: #353631;
}
a.gplus-big:active {
  -webkit-box-shadow: 0 2px 0 #141412;
  box-shadow: 0 2px 0 #141412;
}
a.gplus-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/gplus.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.rss-big {
  -webkit-box-shadow: 0 6px 0 #C64802;
  box-shadow: 0 6px 0 #C64802;
}
a.rss-big {
  background: #FF6501;
}
a.rss-big:active {
  -webkit-box-shadow: 0 2px 0 #C64802;
  box-shadow: 0 2px 0 #C64802;
}
a.rss-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/rss.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.linkedin-big {
  -webkit-box-shadow: 0 6px 0 #005377;
  box-shadow: 0 6px 0 #005377;
}
a.linkedin-big {
  background: #0073B2;
}
a.linkedin-big:active {
  -webkit-box-shadow: 0 2px 0 #005377;
  box-shadow: 0 2px 0 #005377;
}
a.linkedin-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/linkedin.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.stumble-big {
  -webkit-box-shadow: 0 6px 0 #B7371D;
  box-shadow: 0 6px 0 #B7371D;
}
a.stumble-big {
  background: #EA4B24;
}
a.stumble-big:active {
  -webkit-box-shadow: 0 2px 0 #B7371D;
  box-shadow: 0 2px 0 #B7371D;
}
a.stumble-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/stumble.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}
a.flickr-big {
  -webkit-box-shadow: 0 6px 0 #C10E78;
  box-shadow: 0 6px 0 #C10E78;
}
a.flickr-big {
  background: #FC1090;
}
a.flickr-big:active {
  -webkit-box-shadow: 0 2px 0 #C10E78;
  box-shadow: 0 2px 0 #C10E78;
}
a.flickr-big:before {
  background: url("http://flashuser.net/tutorial/css3-social-media-buttons/images/flickr.png") no-repeat center center;
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  left: 10px;
  top: 18%;
}

Perhatian!
Gantikan link image dengan link gambar hostingan kalian sendiri guna keamanan & kenyamanan ;) Demo and resource by

Satu lagi tuts sosial media dengan gaya bergulir by D-Copy Blog
Happy coding \m/

Trik Komputer

Rabu, 01 Mei 2013

Make Social Media Icons With CSS3 3D

Tidak ada komentar:

Posting Komentar