title: Creating 3D-looking 'sunken' label effect in css javafx
body: <p>So, I've been trying for a while now to create a really nice-looking 'copyable-label' where, essentially it's a text field, styled like a label, but more intuitive to copy from (if I strip all the border styling/etc/editable from a text field and make it exactly like a label, it simply isn't obvious you can copy from it). One solution I thought might look really nice, is to give the label a slight 'sunken' look in its respective container. </p>
  
  <p>something a bit like the input field (the one that says 'search terms...' at the top of the page <a href="http://css-tricks.com/3d-inset-parallax-effect/" rel="nofollow noreferrer">here</a> ignore the parralax effect. The best I could get is by using an inner-shadow with a three-pass box to try and make it look as sunken as possible, but the lines aren't 'sharp enough' if you will. I think I can accomplish it with the innershadow effect, I'm just not enough of an expert to figure out how to coax it into the proper form. </p>
  
  <p>My attempt so far looks like: </p>
  
  <p><img src="https://i.stack.imgur.com/iMkco.png" alt="enter image description here"></p>
  
  <p>And to accomplish that I used the following CSS: </p>
  
  <pre><code>.label { 
      -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 5, 0.0 , 3, 3 );
      -fx-background-color: darkgrey;
  }
  </code></pre>
  
  <p>As you can see, it definitely has the 'sunken' effect, it's just quite subtle, the lines aren't sharp at all, and the colors I chose happen to magnify the effect a bit, when I port it to other colors, the difference is much less dramatic. </p>
  
  <p>This is all using the latest java 8 build, windows, desktop application.</p>