Posted By

ddubyah17 on 06/04/11


Tagged

css web design effects CSS3 SASS


Versions (?)

SASS Page-curl effect


 / Published in: CSS
 

  1. @mixin page-curl($shadow-color:rgba(0,0,0,0.3), $skew:15deg, $rotate:5deg, $hoff:8px, $voff:12px, $blur:10px){
  2. position: relative;
  3. @include box-shadow($shadow-color, 0px, 0px,3px);
  4.  
  5. &:after {
  6. z-index: -1;
  7. position: absolute;
  8. background: transparent;
  9. width: 70%;
  10. height: 55%;
  11. content: '';
  12. right: 10px;
  13. bottom: 10px;
  14. @include box-shadow($shadow-color, $hoff, $voff, $blur);
  15. @include transform(1, $rotate, 0, 0, $skew);
  16. }
  17.  
  18. &:before {
  19. z-index: -2;
  20. position: absolute;
  21. background: transparent;
  22. width: 70%;
  23. height: 55%;
  24. content: '';
  25. left: 10px;
  26. bottom: 10px;
  27. @include box-shadow($shadow-color, -$hoff, $voff, $blur);
  28. @include transform(1, -$rotate, 0, 0, -$skew);
  29. }
  30. }

Report this snippet  

You need to login to post a comment.