sobakava Posted November 6, 2015 Share Posted November 6, 2015 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); ' + '} Link to comment Share on other sites More sharing options...
sobakava Posted November 7, 2015 Author Share Posted November 7, 2015 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. Link to comment Share on other sites More sharing options...
mhmda Posted November 9, 2015 Share Posted November 9, 2015 Maybe this will help you: http://forums.unigui.com/index.php?/topic/4079-making-htmlframe-transparent/?hl=transparent Link to comment Share on other sites More sharing options...
sobakava Posted November 9, 2015 Author Share Posted November 9, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now