Jump to content

How To Create Drop Shadow For A Panel Or HTMLFrame?


sobakava

Recommended Posts

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. :(

 

 

 

f5sJ8.jpg

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);              ' +
      '}    
Link to comment
Share on other sites

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;      ' +
      '}                                                               ' +

sXAKA.jpg

 

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.

 

 

 

 

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...