Last active
August 29, 2015 14:00
-
-
Save jenniferlynparsons/11042541 to your computer and use it in GitHub Desktop.
Lightbox background cheat
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* This adds a faked lightbox shadow background to a block-level element, reducing the need to add separate wrapper divs. It's a bit hacky, but works great for doing mockups without having to implement fancybox/lightbox etc. javascript. | |
NOTES: | |
- The spread radius can be adjusted as needed, if page may go wider/taller than 2000px. | |
- Opacity and color can be adjusted before finalizing the scripting. | |
- The z-index of element may require adjustment. | |
- Items in the background will still be live/clickable. | |
- This will only work in browsers that support box-shadow, of course, so most versions of Chrome/Firefox/Opera and IE 9 or later (unless a polyfill is used) | |
*/ | |
//THE HACK: | |
.fake-background{ | |
-webkit-box-shadow: 0 0 0 2000px rgba(0,0,0,0.65); | |
-moz-box-shadow: 0 0 0 2000px rgba(0,0,0,0.65); | |
box-shadow: 0 0 0 2000px rgba(0,0,0,0.65); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment