title: DropShadow for translucent items
body: <p>I have a problem to create a shadow in an item. The item is not completely opaque and the drawn shadow appears behind the item reducing the transparency effect. </p>
  
  <p>I need something as the picture to the right, but what I got with my attempts is shown to the left. I need you to look through the object, because the background is not solid.
  <img src="https://i.stack.imgur.com/tgsOx.png" alt="."></p>
  
  <p>I tried to use <code>maskEf</code> but the object becomes completely opaque. The closest solution I've managed to define is to use another element of the same shape but fully transparent and with solid edge. However I don't like the solid edge, any suggestions?</p>
  
  <p><strong>First attempt</strong>. This makes <code>opacity</code> equal to <code>1</code> in <code>rec1</code>:</p>
  
  <pre><code>Rectangle {
      id: rec1; color: "white"; opacity: 0.5
      anchors.fill: parent; radius: CalcSize.getW(8)
      layer.enabled: true
      layer.effect: DropShadow {
      id: shadowEf
          anchors.fill: rec1
          source: rec1
          horizontalOffset: 3
          verticalOffset: 3
          radius: 15
          samples: 16
          color: "red"
          transparentBorder: true
      }
  }
  </code></pre>
  
  <p><strong>Second attempt</strong>. This maintains <code>opacity</code> of <code>rec1</code> but show the border of <code>sourceMaskEf</code></p>
  
  <pre><code>DropShadow {
      id: shadowEf
      anchors.fill: sourceMaskEf
      source: sourceMaskEf
      horizontalOffset: 3
      verticalOffset: 3
      radius: 15
      samples: 16
      color: "red"
      transparentBorder: true
  }
  
  Rectangle {
      id: sourceMaskEf; color: "transparent"
      anchors.fill: rec1; radius: rec1.radius
      border { width: offset; color: "white"; }
  }
  
  OpacityMask {
      id: maskEf
      opacity: 1
      anchors.fill: rec1
      source: ShaderEffectSource {
              sourceItem: shadowEf
              hideSource: false
          }
      maskSource: ShaderEffectSource {
              sourceItem: sourceMaskEf
              hideSource: false // if set true the shadow is hide to
          }
      cached: true
  }
  
  Rectangle {
      id: rec1; color: "white"; opacity: 0.5
      anchors.fill: parent; radius: CalcSize.getW(8)
  }
  </code></pre>
  
  <h2>Edit</h2>
  
  <p>Well, after the suggestion of BaCaRoZzo, this is my solution. It is much closer to what I'm looking for:</p>
  
  <pre><code>Component {
      id: fondoItemPromo
      Item {
          id: item1; opacity: 0.5
          layer.enabled: true; anchors.fill: parent
          anchors.margins: CalcSize.getW(5) //Just for test
          Rectangle {
              id: rec1; color: "white"
              anchors.fill: parent; radius: CalcSize.getW(8)
              Item {
                  id: item2; opacity: 0.5; layer.enabled: true
                  anchors.fill: parent; clip: true
                  Rectangle {
                      id: rec2; color: "white"
                      anchors.fill: parent; radius: CalcSize.getW(8)
                      layer.enabled: true
                  }
                  DropShadow {
                      anchors.fill: rec2
                      source: rec2
                      transparentBorder: true
                      horizontalOffset: 3
                      verticalOffset: 3
                      radius: 15
                      samples: 16
                      color: "black"; clip: true
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>However, the shadow does not extend beyond the limits of the element, as can be seen in the corners:</p>
  
  <p><img src="https://i.stack.imgur.com/YtB68.png" alt="."></p>
  
  <p>Any suggestions? </p>