Posted By

jntu_gnec on 05/06/13


Tagged

box CSS3 twitter follow


Versions (?)

Css3 twitter follow box


 / Published in: CSS
 

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

Demo Image: http://i.imgur.com/hTQXYOu.png

  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

Report this snippet  

You need to login to post a comment.