diff options
| -rw-r--r-- | site/common/css/cssbox/README.md | 7 | ||||
| -rw-r--r-- | site/common/css/cssbox/cssbox.css | 8 |
2 files changed, 11 insertions, 4 deletions
diff --git a/site/common/css/cssbox/README.md b/site/common/css/cssbox/README.md index ceed61a..9c161fc 100644 --- a/site/common/css/cssbox/README.md +++ b/site/common/css/cssbox/README.md @@ -2,10 +2,13 @@ A simple, pure-CSS Lightbox replacement. ## Why CSSBox? -* Actually lightweight (843b including comments, 547b excluding comments, unminified!) -* Centers the image with a nice, yet simple border +* Actually lightweight (903b including comments, 607b excluding comments, unminified!) +* Centers the image +* Adds a nice, realistic shadow to the image +* Dims the background * Completely responsive, works on any screen size * Has a pretty fade in animation +* Absolutely no JavaScript ## Usage Upload cssbox.css to your server and add a stylesheet link to it in your CSS. diff --git a/site/common/css/cssbox/cssbox.css b/site/common/css/cssbox/cssbox.css index ca96b53..8017bdc 100644 --- a/site/common/css/cssbox/cssbox.css +++ b/site/common/css/cssbox/cssbox.css @@ -16,19 +16,23 @@ span.cssbox_full img { position: fixed; background-color: white; margin: 0; - padding: 0px; + padding: 0; max-height: 90%; max-width: 90%; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); - border: 5px solid black; + box-shadow: 0 0 20px black; } img.cssbox_thumb:focus + span.cssbox_full { visibility: visible; opacity: 1; } + +img.cssbox_thumb, span.cssbox_full { + cursor: pointer; +} /* The work above, CSSBox, is released under the Creative Commons Zero 1.0 license and is available on https://notabug.org/SylvieLorxu/CSSBox */ |