Related:
http://cssdeck.com/labs/page-curl-box-shadow
https://paulund.co.uk/learn-css-box-shadow
Tangentially Related:
https://leaverou.github.io/bubbly/
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
I'm trying to create boxes using css that have shadows as described in the above two articles. Essentially, they use the
:before[/m] and [m]:after css markup to allow for box shadows that only cover a fraction of the width and/or height of the overall box, creating the illusion of a piece of paper with a slight curl in it.
However, it seems that the core technique requires using
z-index: -1;[/m], which then causes the shadow effect to render not just behind the box (intended), but also behind the overall dokuwiki template background (making it hidden, and not intended). Setting [m]z-index: 1; makes it render above the main box, but also seems to clip it to the inside of the box.
Anyone have a solution?
Dokuwiki code test sample (uses WRAP plugin):
<div sb postit right 30%>
This is a test of the sidebar postit style. Had this been a real test, the test would have worked.
This is a test of the sidebar postit style. Had this been a real test, the test would have worked.
This is a test of the sidebar postit style. Had this been a real test, the test would have worked.
</div>
css code test sample:
div.dokuwiki div.page.group div.wrap_sb.wrap_postit {
background-color: hsl(59,45%,66%);
background: linear-gradient(45deg, hsl(57,54%,72%) 0%, hsl(59,45%,66%) 50%, hsl(63,38%,59%) 100%);
border: solid 1px hsl(0,0%,77.5%);
// box-shadow: 2px 2px 2px 1px hsl(0,0%,70%), 0px 0px 20px 40px hsla(60,45%,60%,0.2) inset;
box-shadow: none;
margin-bottom: 1.5em;
padding: 1em 1em .5em;
position: relative;
}
div.dokuwiki div.page.group div.wrap_sb.wrap_postit:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
z-index: 1;
bottom: 0.5em; left: 0em;
height: 1em; width: 50%;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
overflow: visible;
transform: rotate(-30deg);
}
div.dokuwiki div.page.group div.wrap_sb.wrap_postit p {
color: hsl(240,80%,20%);
font-family: "ArchitectsDaughter", serif;
font-size: 100%;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.2;
border: none;
}