Advanced Search

Css3 twitter follow box

/ Published in: CSS
Save to your folder(s)
Demo Image: http://i.imgur.com/hTQXYOu.png

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. HTML:
  2.  <div class="wrapper">
  3. <div class="inner">
  4. <div class="ribbon-wrapper-green">
  5. <div class="ribbon-green">
  6. Twitter</div>
  7.     </div>
  8.     <center><br/><iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://moopz.com/connect.php?user=mobileforums" class="FB_SERVER_IFRAME" scrolling="no" style="width: 240px; height: 340px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial;"></iframe></center>
  9.   </div>
  10. </div> 
  11.  
  12.  
  13. CSS:
  14.  .wrapper {padding:5px;
  15.     margin: 50px auto;
  16.   width: 276px;
  17.   height: 380px;
  18.   border-radius: 0px;
  19.   position: relative;
  20.   z-index: 90;
  21. background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px
  22. solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;
  23. }
  24. .inner  {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}
  25.  
  26. .ribbon-wrapper-green {
  27.   width: 85px;
  28.   height: 88px;
  29.   overflow: hidden;
  30.   position: absolute;
  31.   top: -3px;
  32.   right: -3px;
  33. }
  34.  
  35. .ribbon-green {
  36.   font: bold 15px Sans-Serif;
  37.   color: #333;
  38.   text-align: center;
  39.   text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  40.   -webkit-transform: rotate(45deg);
  41.   -moz-transform:    rotate(45deg);
  42.   -ms-transform:     rotate(45deg);
  43.   -o-transform:      rotate(45deg);
  44.   position: relative;
  45.   padding: 7px 0;
  46.   left: -5px;
  47.   top: 15px;
  48.   width: 120px;
  49.   background-color: #306EFF;
  50.   background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF));
  51.   background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF);
  52.   background-image:    -moz-linear-gradient(top, #306EFF, #3BB9FF);
  53.   background-image:     -ms-linear-gradient(top, #306EFF, #3BB9FF);
  54.   background-image:      -o-linear-gradient(top, #306EFF, #3BB9FF);
  55.  
  56.   color: #fff;
  57.   -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  58.   -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  59.   box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  60. }
  61.  
  62. .ribbon-green:before, .ribbon-green:after {
  63.   content: "";
  64.   border-top:   3px solid #6e8900;
  65.   border-left:  3px solid transparent;
  66.   border-right: 3px solid transparent;
  67.   position:absolute;
  68.   bottom: -3px;
  69. }
  70.  
  71. .ribbon-green:before {
  72.   left: 0;
  73. }
  74. .ribbon-green:after {
  75.   right: 0;
  76. } 
  77. dr

URL: http://www.mobilescommunity.com/css/214570-css3-twitter-follow-box.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.