Posted By

jntu_gnec on 05/06/13


Tagged

css box layout design facebook like


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Priestd09


Facebook Like Box CSS Layout Design


 / Published in: CSS
 

URL: http://www.mobilescommunity.com/css/214319-facebook-like-box-css-layout-design.html

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

  1. HTML:
  2.  
  3. <div class="wrapper">
  4. <div class="inner">
  5. <div class="ribbon-wrapper-green">
  6. <div class="ribbon-green">
  7. Facebook</div>
  8. </div>
  9. <center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmobilesforum&amp;width=240&amp;height=335&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true&amp;appId=713020622172524" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:335px;" allowTransparency="true"></iframe></center>
  10. </div>
  11. </div>
  12.  
  13. CSS:
  14. .wrapper {padding:5px;
  15. margin: 50px auto;
  16. width: 276px;
  17. height: 360px;
  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. }

Report this snippet  

You need to login to post a comment.