Not logged in. · Lost password · Register
Forum: General Help and Support Templates and Layout RSS
Page curl shadows
css
Avatar
Ashtagon #1
Member since Jan 2010 · 186 posts · Location: London, UK
Group memberships: Members
Show profile · Link to this post
Subject: Page curl shadows
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 and :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;, 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 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):

  1. <div sb postit right 30%>
  2. This is a test of the sidebar postit style. Had this been a real test, the test would have worked.
  3.  
  4. This is a test of the sidebar postit style. Had this been a real test, the test would have worked.
  5.  
  6. This is a test of the sidebar postit style. Had this been a real test, the test would have worked.
  7. </div>

css code test sample:

  1. div.dokuwiki div.page.group div.wrap_sb.wrap_postit {
  2.  background-color: hsl(59,45%,66%);
  3.  background: linear-gradient(45deg, hsl(57,54%,72%) 0%, hsl(59,45%,66%) 50%, hsl(63,38%,59%) 100%);
  4.  border: solid 1px hsl(0,0%,77.5%);
  5.   // box-shadow: 2px 2px 2px 1px hsl(0,0%,70%), 0px 0px 20px 40px hsla(60,45%,60%,0.2) inset;
  6.   box-shadow: none;
  7.  margin-bottom: 1.5em;
  8.  padding: 1em 1em .5em;
  9.  position: relative;
  10. }
  11. div.dokuwiki div.page.group div.wrap_sb.wrap_postit:after {
  12.  content: "";
  13.  display: block; /* reduce the damage in FF3.0 */
  14.  position: absolute;
  15.  z-index: 1;
  16.  
  17.  bottom: 0.5em;   left: 0em;
  18.  height: 1em;     width: 50%;
  19.  
  20.  border-width: 15px 15px 0;
  21.  border-style: solid;
  22.  border-color: #f3961c transparent;
  23.  overflow: visible;
  24.   transform: rotate(-30deg);
  25. }
  26. div.dokuwiki div.page.group div.wrap_sb.wrap_postit p {
  27.  color: hsl(240,80%,20%);
  28.  font-family: "ArchitectsDaughter", serif;
  29.  font-size: 100%;
  30.  font-style: normal;
  31.  font-variant: normal;
  32.  font-weight: normal;
  33.   line-height: 1.2;
  34.  border: none;
  35. }
This post was edited on 2017-11-24, 10:37 by Ashtagon.
Avatar
andi (Administrator) #2
User title: splitbrain
Member since May 2006 · 3422 posts · Location: Berlin Germany
Group memberships: Administrators, Members
Show profile · Link to this post
I think this SO question explains the underlying problem and solution: https://stackoverflow.com/a/10822168/172068

You basically try to position pseudo elements under their parent. The first comment gives a hint:

However, if you have a normal parent div with a background, the lower element will be hidden. In this case, give the parent relative positioning and a z-index of 1.

The parent element in this case is the DokuWiki page itself. I played around a bit to understand the problem. See here: https://codepen.io/anon/pen/gXZvZE Observe the difference the position: relative for the wrap div makes.

So your solution is probably to adjust the positioning of the DokuWiki page element a bit to make your own css work.
Read this if you don't get any useful answers.
Lies dies wenn du keine hilfreichen Antworten bekommst.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2019-05-25, 05:21:19 (UTC +02:00)