In this demo, I managed to turn off the background shadow on the Angular Material Accordion using this rule:
.mat-expansion-panel:not([class*='mat-elevation-z']) {
box-shadow: none !important;
/* box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); */
}
I have never seen this type of rule ( [class*= ...] ) before.
What does this do?
It's an attribute wildcard selector. It looks for any child element under .mat-expansion-panel that has a class that [class*='mat-elevation-z'] element.
Here are some references that help you more to understand about wildcard selector
CSS3 Attribute Selectors: Substring Matching
CSS Attribute Selectors
Related
How can I make both inner shadow (top) and outer shadow on an element in CSS?
The button Facebook uses in their mobile application, has both:
Slight white line at the top of the button,
And a slight white line at the bottom of the button.
With a solid border
You can use css3 box-shadow to get the effect you want. a simple example
box-shadow: 0 0 3px #666;
-moz-box-shadow: 0 0 3px #666;
-webkit-box-shadow: 0 0 3px #666;
furthermore you can specify inset property in order to get inner glow.
box-shadow: inset 0 0 3px #666;
There is a comprehensive reference on this in Mozilla
I have a DIV element which I would like to apply a CSS box shadow too. The problem is, I want it on the left and right of the element only. I tried playing about with
box-shadow: 0 0 10px #000;
But no matter what I do it refuses to work. I want the shadow to be 10px and color of #000.
Thanks
You should apply this into your CSS.
div {
box-shadow: 4px 0 2px #222, -4px 0 2px #222;
}
Here is an example of it. http://jsfiddle.net/vDvkP/
.box-shadow {
-webkit-box-shadow:4px 0 2px #000, -4px 0 2px #000;
-moz-box-shadow:4px 0 2px #000, -4px 0 2px #000;
box-shadow:4px 0 2px #000, -4px 0 2px #000;
}
I have a Chrome extension that injects a DIV into each page, and styles that DIV with a style sheet included in the extension. On some pages, the injected DIV looks as intended, but on others it doesn't. One the StackOverflow site, for example, the box-shadow property of my elements is overridden, despite the fact that it is specifed as ! important in my CSS.
When I inspect the element in question, Chrome tells me that the box-shadow property is not applied (it is shown struck-through), but it does not tell me why: nothing in the cascade of styles specifies that property.
When I added the box-shadow property directly to the elements (without the benefit of a CSS class), the CSS inspector view showed that the properties are associated with the element, but the effect is still absent.
UPDATED: code snippets:
Here is what I specify in my code:
var $bar = $('<div>').addClass('pp_bar').css({
'box-shadow': '-1px 0px 2px 1px #444',
'-moz-box-shadow': '-1px 0px 2px 1px #444',
'-webkit-box-shadow': '-1px 0px 2px 1px #444'
});
Here is the CSS:
.pp_bar {
height: 80%;
right: -4px;
top: 0px;
position: absolute;
box-shadow: -1px 0px 2px 1px #444 ! important;
-webkit-box-shadow: -1px 1px 2px 1px #444 ! important;
-moz-box-shadow: -1px 1px 2px 1px #444 ! important;
}
Here is what Chrome shows as the computed style:
-webkit-box-shadow: #444 0px 0px 1.2000000476837158px 0px;
element.style - rgb(68, 68, 68) -1px 0px 2px 1px
.pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet
You can see that the value used (#444 0px 0px 1.2000000476837158px 0px) is different from the element style (as assigned in my code; the element style overries the class values (which are the same). Without the element style setting, the class values are shown struck out.
On sites in which this works correctly, the browser reports the following in the computed style:
-webkit-box-shadow: #444 -1px 1px 2px 1px;
element.style - rgb(68, 68, 68) -1px 0px 2px 1px
.pp_bar - rgb(68, 68, 68) -1px 1px 2px 1px user stylesheet
What should I try next?
Set the style on the element itself, with the !important flag. Then, you can know for sure that the style is being applied on the element with the highest priority.
Examples:
var div = document.createElement('div');
// Pick any of these (the first two lines have identical results)
div.style.setProperty('box-shadow', '0 0 3px red', 'important');
div.style.cssText += 'box-shadow: 0 0 3px red !important';
// If the HTML is generated from a string:
div.innerHTML = '<div style="box-shadow:0 0 3px!important;">...</div>';
Non-example (does not work!):
div.style.boxShadow = '0 0 3px red !important'; // Does not work!
If you cannot afford to set the inline styles, try to achieve a higher specifity at your CSS selectors, by including an ID for example.
Twitter Bootstrap defines a box-shadow. I'd like to define an inset box shadow, but keep the box-shadow from Bootstrap.
Something like this:
bootstrap.css
box-shadow: outer shadow
Then in my own CSS file
login.css
box-shadow: inset 0px 3px 0 0 ...
Is there a way I can have both apply to an element, without having to redefine the Bootstrap shadow in my login.css file?
you will have to override bootstrap box-shadow.. but you can apply both inset and outset separated with a comma
box-shadow: inset 0px 3px 0 0 ..., 0px 3px 0 0 ...;
Unfortunately you cannot inherit the box-shadow & change just the inset value, but you could inherit it and then add the custom inset version afterwards.
Here's an example illustrating the inheritance that could be used: http://jsfiddle.net/dwU2P/2/
Example:
.parentBox{
box-shadow:0 0 1em 1em #222;
}
.childBox{
box-shadow:inherit,
/* custom inset box-shadow */
}
I would like to reproduce the border color made by firebug when you try to inspect the DOM element in a web page.
It looks like the border around the text "Link2" of the following image.
The border around the text "Link" is what I did. The code is visible from this link.
jsfiddle.
Can someone help me to write the css code to reproduce the border of Link2?
Thanks
You'll need to use box-shadows, like this:
http://jsfiddle.net/GolezTrol/AEDsY/
.cl3 {
-webkit-box-shadow: 0 0 3px 3px lightblue;
-moz-box-shadow: 0 0 3px 3px lightblue;
box-shadow: 0 0 3px 3px lightblue;
}
That effect is achieved using the box-shadow css property.
To get as much support as possible, use -moz-box-shadow, -webkit-box-shadow and box-shadow.
To get your desired effect, use:
-moz-box-shadow: 0 0 5px 2px blue;
-webkit-box-shadow: 0 0 5px 2px blue;
box-shadow: 0 0 5px 2px blue;
You would use something like this:
-webkit-box-shadow: 0px 0px 3px blue; /* Saf3-4 */
-moz-box-shadow: 0px 0px 3px blue; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 3px blue; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
Check out http://css3please.com/ - it's a great resource for playing with new CSS properties.