Περιστρεφόμενο Social Share Widget



Ένα πολύ όμορφο Social Share Widget που όταν μεταβείτε επάνω του περιστρέφεται έως ότου εμφανιστούν όλα τα εικονίδιά του.


Δείτε demo

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τα μπλε γράμματα με αυτά της επιλογής σας και πατήστε [Αποθήκευση]. (Δε χρειάζεται να βάλετε τίτλο στο gadget)


<style type="text/css">
.moc {
  height:60px;
  width: 60px;
  margin:100px auto;
  background: #444;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  border-radius:30px;
  position:relative;
}
.moc:before {
  content:'';
  position:absolute;
  height:60px;
  width: 60px;
  background:url(http://4.bp.blogspot.com/-WP36mayloAk/UW2qFA9ebDI/AAAAAAAAOSg/64xWZCDmENE/s1600/share.png) #444;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  border-radius:30px;
  z-index:100;
}
.moj {
  height:60px;
  width: 60px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px;
  border-radius:30px;
  position:relative;
}
.moj div {
  height:10px;
  width:100%;
  position:absolute;
  margin: 25px 0;
}
.moj div:nth-child(1) {
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
}
.moj div:nth-child(2) {
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.moj div:nth-child(3) {
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  transform:rotate(90deg);
}
.moj div:nth-child(4) {
  -moz-transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  transform:rotate(135deg);
}
.moj div a {
  height: 10px;
  width:10px;
  background:#fff;
  display: inline-block;
  position:absolute;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
  background-position: 50% 50%;
  background-size: 80%;
}
.moj div a:nth-child(1) {
  right:0px;
}
.moj div a:nth-child(2) {
  left:0px;
}
.moj a[href*='feedburner.com'] {
  background-image:url(http://3.bp.blogspot.com/-I49v9_ITMLI/UW2qDywKR7I/AAAAAAAAOR8/4cd1dHbaJ50/s1600/feed.png);
}
.moj a[href*='feedburner.google.com'] {
  background-image:url(http://2.bp.blogspot.com/-9xXr_9M00Hg/UW2qFCBiIXI/AAAAAAAAOSY/HZ8gPlEIMzA/s1600/mails.png);
}
.moj a[href*='facebook.com'] {
  background-image:url(http://2.bp.blogspot.com/-fyLa78U9lDo/UW2qD61dJhI/AAAAAAAAOSA/1GjzALlDb4Q/s1600/face3.png);
}
.moj a[href*='plus.google.com'] {
  background-image:url(http://2.bp.blogspot.com/-mDrzHeHuAUw/UW2qEc71ogI/AAAAAAAAOSQ/96gpaYwfHXY/s1600/gmas3.png);
}
.moj a[href*='tumblr.com'] {
  background-image:url(http://4.bp.blogspot.com/-EbnLBCfGsJo/UW2qDxYBoyI/AAAAAAAAOR4/cvcosDjIS-o/s1600/3tumblr.png);
}
.moj a[href*='lastfm.es'] {
  background-image:url(http://2.bp.blogspot.com/-5LOZuHAMouc/UW2qEjhY5aI/AAAAAAAAOSI/B8Pee-jnTxw/s1600/lastfm.png);
}
.moj a[href*='twitter.com'] {
  background-image:url(http://1.bp.blogspot.com/-AhBYrX8C4FU/UW2qFRjDgUI/AAAAAAAAOSo/DrxQUMT1BFY/s1600/twiter.png);
}
.moj a[href*='linkedin.com'] {
  background-image:url(http://4.bp.blogspot.com/-huHBw3jlfa0/UW2qEsW1jqI/AAAAAAAAOSM/YbKn3wfQWaQ/s1600/linked.png);
}
.moj div:nth-child(2) a {
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
.moj div:nth-child(3) a {
  -moz-transform:rotate(-90deg);
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg);
}
.moj div:nth-child(4) a {
  -moz-transform:rotate(-135deg);
  -webkit-transform:rotate(-135deg);
  transform:rotate(-135deg);
}

.moc:hover {
 -moz-box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
 -webkit-box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
 box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
}
.moc:hover .moj div {
  margin:60px 0;
  height:30px;
  width:100%;
}
.moc:hover .moj div a {
  height: 30px;
  width:30px;
}
.moc:hover .moj  {
  -moz-transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  transform:rotate(360deg);
  height:150px;
  width:150px;
  left:-45px;
  top:-45px;
}
.moj div a:hover {
  -moz-box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
  -webkit-box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
  box-shadow: 0px 0px 0px 2px white, 0 0 20px 2px white;
}

.moj a[href*='feedburner.com']:hover {
  background-color:#ff6000;
}
.moj a[href*='feedburner.google.com']:hover {
  background-color:#C90000;
}
.moj a[href*='facebook.com']:hover {
  background-color:#5777FF;
}
.moj a[href*='plus.google.com']:hover {
  background-color:#C90000;
}
.moj a[href*='tumblr.com']:hover {
  background-color:#2c4762;
}
.moj a[href*='lastfm.es']:hover {
  background-color:#f00;
}
.moj a[href*='twitter.com']:hover {
  background-color:#00c0ff;
}
.moj a[href*='linkedin.com']:hover {
  background-color:#0055c9;
}
</style>

<div class='moc'>
<div class='moj'>
  <div>
    <a href='http://feeds.feedburner.com/feed'></a>
    <a href='http://www.tumblr.com/'></a>
  </div>
  <div>
    <a href='http://feedburner.google.com/feed_mail'></a>
    <a href='http://www.lastfm.es/user'></a>
  </div>
  <div>
    <a href='http://www.facebook.com/fanpage'></a>
    <a href='https://twitter.com'></a>
  </div>
  <div>
    <a href='https://plus.google.com/fanpage'></a>
    <a href='http://www.linkedin.com'></a>
  </div>
</div>
</div>

0 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ