daily pastebin goal
12%
SHARE
TWEET

Pure CSS 3 fancy separator

jkneb Apr 25th, 2013 4,263 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .or-spacer {
  2.     margin-top:100px;
  3.     margin-left:100px;
  4.     width:400px;
  5.     position:relative;
  6. }
  7. .or-spacer .mask {
  8.     overflow:hidden;
  9.     height:20px;
  10. }
  11. .or-spacer .mask:after {
  12.     content:'';
  13.     display:block;
  14.     margin:-25px auto 0;
  15.     width:100%;
  16.     height:25px;
  17.     border-radius:125px / 12px;
  18.     box-shadow:0 0 8px black;
  19. }
  20. .or-spacer span {
  21.     width:50px;
  22.     height:50px;
  23.     position:absolute;
  24.     bottom:100%;
  25.     margin-bottom:-25px;
  26.     left:50%;
  27.     margin-left:-25px;
  28.     border-radius:100%;
  29.     box-shadow:0 2px 4px #999;
  30.     background:white;
  31. }
  32. .or-spacer span i {
  33.     position:absolute;
  34.     top:4px;
  35.     bottom:4px;
  36.     left:4px;
  37.     right:4px;
  38.     border-radius:100%;
  39.     border:1px dashed #aaa;
  40.     text-align:center;
  41.     line-height:40px;
  42.     font-style:normal;
  43.     color:#999;
  44. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top