Advanced Search

SASS Page-curl effect

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.