How To Create Drop Shadow For A Panel Or HTMLFrame?

[sobakava]

I'm trying to create drop-shadow effect using CSS for a Unipanel or HTMLFrame. Even though I align it with margins, the shadow effect is somehow cropped. You can see at the bottom right corner of the image below.  Border and gradient works ok. But the shadow looks like masked by some kind of border.

 

I have tried to place this HTMLFrame inside a TUniContainerPanel with margins but it is still the same.

 

What is the trick to do this?

 

Any help will be really really appreciated. I spent my last four hours on this.

 

 

 

Here is my CSS :

      '.panel_graph_parent {                                           ' +
      '  border-radius: 14px        !important;                        ' +
      '  padding: 20px             !important;                         ' +
      '  border: 2px solid #e5e5e5 !important;                         ' +
      '    opacity: 0.95;                                              ' +
      '  background:#ffffff;                                           ' +
      '  background:                                                   ' +
      '    -moz-linear-gradient(top, #ffffff 0%, #fefefe 100%);        ' +
      '  background:                                                   ' +
      '    -webkit-gradient(linear, left top, left bottom,             ' +
      '    color-stop(0%,#ffffff), color-stop(100%,#fefefe));          ' +
      '  background:                                                   ' +
      '    -webkit-linear-gradient(top,  #ffffff 0%,#fefefe 100%);     ' +
      '  background:                                                   ' +
      '    -o-linear-gradient(top,  #ffffff 0%,#fefefe 100%);          ' +
      '  background:                                                   ' +
      '    -ms-linear-gradient(top,  #ffffff 0%,#fefefe 100%);         ' +
      '  background:                                                   ' +
      '    linear-gradient(to bottom,  #ffffff 0%,#fefefe 100%);       ' +
      '  filter: progid:DXImageTransform.Microsoft.gradient(           ' +
      '    startColorstr="#ffffff", endColorstr="#fefefe",             ' +
      '    GradientType=0 );                                           ' +
      '    -webkit-box-shadow: 8px 8px 6px -1px rgba(0,0,0,0.85);      ' +
      '    -moz-box-shadow: 8px 8px 6px -1px rgba(0,0,0,0.85);         ' +
      '    box-shadow: 8px 8px 6px -1px rgba(0,0,0,0.85);              ' +
      '}    

[sobakava]

I have accidentally(!) fixed this:

 

For UniHTMLFrame:

function added(sender, container, pos, eOpts)
{
    sender.addBodyCls('filter-drop-shadow');
    sender.addCls('myUnselectable');  

  var html=sender.id;
  html=html+'-body';
  Ext.Function.defer(function(){
   document.getElementById(html).setAttribute('style', 'background-color:transparent !important');
   }, 100, this, []);
          
}

This is the CSS :

      '.filter-drop-shadow {                                           ' +
      '    padding: 8px       !important;                              ' +
     '-webkit-filter: drop-shadow(1px 1px 6px rgba(0,0,0,.5))!important;'+
      '-moz-filter: drop-shadow(1px 1px 6px rgba(0,0,0,.5))!important; ' +
      '-ms-filter: drop-shadow(1px 1px 6px rgba(0,0,0,.5))!important;  ' +
      '-o-filter: drop-shadow(1px 1px 6px rgba(0,0,0,.5))!important;   ' +
      'filter: drop-shadow(1px 1px 6px rgba(0,0,0,.5))!important;      ' +
      '}                                                               ' +

 

My problem is the transparency now. This graph actually lays in a TUniFrame.

 

 

Uniframe >> UniContainerPanel >> UniHTMLFrame

 

The Drop Shadow drops on Uniframe  which is NOT transparent.

 

How can I make UniFrame transparent?  ( It has been asked in the forum but not answered)

 

Actually in general, how can I access UniFrame's HTML/CSS properties? There is no UniEvents for the Frame.

 

 

 

 

[mhmda]

Maybe this will help you: http://forums.unigui.com/index.php?/topic/4079-making-htmlframe-transparent/?hl=transparent

[sobakava]

hello mohammad.

 

if you can take a look to my last post above, you can see I'm already using your code snippet for TUniHTMLFrame. It's really useful. Thanks but;

 

I was asking for TUniFrame's transparency.