Advertisement
jamietelin

CSS Shadows - Custom graphical border on DIV with CSS

May 8th, 2012
948
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.70 KB | None | 0 0
  1.  
  2. <!DOCTYPE>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>CSS Flow Design Test</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9. background:#f4f3f3;
  10. }
  11. .flowBox {
  12. background:#FFFFFF;
  13. margin:10px;
  14. float:left;
  15. padding:10px;
  16. width:250px;
  17. position:relative;
  18. }
  19.  
  20. .shadow {
  21. -moz-box-shadow: 2px 3px 4px #ccc;
  22. -webkit-box-shadow: 2px 3px 4px #ccc;
  23. box-shadow: 2px 3px 4px #ccc;
  24. /* For IE 8 */
  25. -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#cccccc')";
  26. /* For IE 5.5 - 7 */
  27. filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=120, Color='#cccccc');
  28. }
  29.  
  30. .clear {
  31. clear:both;
  32. }
  33. -->
  34. </style>
  35. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  36. <script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
  37. <script>
  38.  
  39. $(window).load(function(){
  40.  
  41. $('#container').masonry({
  42. // options
  43. itemSelector : '.flowBox',
  44. });
  45.  
  46. });
  47.  
  48. </script>
  49. </head>
  50.  
  51. <body>
  52. <div id="container">
  53. <div class="flowBox shadow">
  54. <h1>
  55. Header 0 </h1>
  56. dolor sit amet, consectetur adipiscing elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
  57. </div>
  58. <div class="flowBox shadow">
  59. <h1>
  60. Header 1 </h1>
  61. molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
  62. </div>
  63. <div class="flowBox shadow">
  64. <h1>
  65. Header 2 </h1>
  66. nim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
  67. </div>
  68. <div class="flowBox shadow">
  69. <h1>
  70. Header 3 </h1>
  71. bh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
  72. </div>
  73. <div class="flowBox shadow">
  74. <h1>
  75. Header 4 </h1>
  76. m dignissim sem, eget bibendum dui sodales vitae.
  77. </div>
  78. <div class="flowBox shadow">
  79. <h1>
  80. Header 5 </h1>
  81. us sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
  82. </div>
  83. <div class="flowBox shadow">
  84. <h1>
  85. Header 6 </h1>
  86. im sem, eget bibendum dui sodales vitae.
  87. </div>
  88. <div class="flowBox shadow">
  89. <h1>
  90. Header 7 </h1>
  91. retra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
  92. </div>
  93. <div class="flowBox shadow">
  94. <h1>
  95. Header 8 </h1>
  96. sectetur adipiscing elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
  97. </div>
  98. <div class="flowBox shadow">
  99. <h1>
  100. Header 9 </h1>
  101. g elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
  102. </div>
  103. <div class="flowBox shadow">
  104. <h1>
  105. Header 10 </h1>
  106. gnissim sem, eget bibendum dui sodales vitae.
  107. </div>
  108. <div class="flowBox shadow">
  109. <h1>
  110. Header 11 </h1>
  111. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.
  112. </div>
  113. </div>
  114. <div class="clear"></div>
  115. </body>
  116. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement