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 */
}
Related
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
I don't know if this is even possible with CSS, but I hope it is :/
I have some div-tags, all with a certain class "abc". They all have a different length.
Some of the divs also have a class called "highlight" which makes the border bigger. This also makes the visible lenght of the element bigger by some pixels.
I would like to change the "highlight" class to account for this somehow (which means an element with the "hightlight" class should have the same visible length as without the class.
.abc {
border:solid 1px black;
}
.highlight {
border-width: 3px;
border-style: double;
}
I have to support IE9+ and Firefox
BEFORE POSTING AN ANSWER PLEASE NOTE that I can NOT use the border-box model because I use the jQueryUI resizable functionality and there is a bug in combination with border-box (http://bugs.jqueryui.com/ticket/8932)
You can try using inset shadows instead of borders and an additional padding to avoid overlapping:
.abc {
box-shadow: inset 0 0 0 1px black;
padding: 2px 4px;
}
.highlight {
box-shadow: inset 0 0 0 1px black, inset 0 0 0 2px white, inset 0 0 0 3px black;
padding: 2px 4px;
}
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
So I've been using a shadow box inset to make a inner glow kind of making the edges blurry and shadowy like for a edge burn look. I'm trying to use it for the top and bottom only and not for the left/right sides. But it's not working. I'm using it on a overflow: auto <div> so that it can scroll and have a nice effect.
Here's my css:
#content {
font: 14px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
line-height:1.2em;
height: 400px;
width: 500px;
overflow: auto;
float: right;
padding: 0 10px;
-moz-box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
-webkit-box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
}
You have a black shadow on a black background so naturally, you're not going to see anything. Turning off your black background, we can see the shadows just fine...
http://jsfiddle.net/sparky672/p3Mgn/1/show
So you just need to select different shadow colors. Here are your shadows changed to white #fff...
Full Size Demo
http://jsfiddle.net/sparky672/p3Mgn/3/
-moz-box-shadow: inset 0 8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
-webkit-box-shadow: inset 0 8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
box-shadow: inset 0 8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
EDIT in response to OP's comments:
The browser is only given two colors to use in order to render a shadow.
1) The background image's color (or just background color in this case)
2) The shadow color
Wherever they're both the same, the shadow will be invisible.
To have a blurry effect using a black background, perhaps try #444 for the shadow... it looks pretty good I think...
http://jsfiddle.net/sparky672/p3Mgn/5/show/
Do you want to have shadow above content to blur top and bottom? If yes then the problem is that you shadow is shown below content. You can make it above it if you set "position: relative; z-index: -1;" to content block, but then you will not be able to click or scroll it.
Easier way to achive this effect is to use :before and :after pseudoclasses and css-gradients.
Example here: http://jsfiddle.net/V96wx/2/
In my example above you will need 2 containers — one for overflow and one for fades (to make it more bulletproof). But theoretically you can do it with only 1 container, I'll write how...
First of all — how :before and :after works. Simplest way to think about them is as about 2 more elements that will be added inside parent container before and after actual content. For example: .about:before will be added inside .about container, but before actual content.
:before and :after have one required property content if you didn't add it, element will not be created. conent may have one of the following values: htmldog.com/reference/cssproperties/content. In my example it was left blank. After element is inserted you can style it as you wish by the same rules you style every other element.
To make fade in my examples I used gradient with trasparency. You can read about gradients here davidwalsh.name/css-gradients. Transparecy is done by using colors in rgba (4th digit is transparency level).
The reason why I used 2 containers in my example is because it is harder to accurately position :before and :after elements above main container without it — if you try to use realtive coordinates for them they will position rightly, but will scroll with content and if you not use position: relative on base container you will need to know this container coordinates to make positioning. It is not a problem if container height is fixed but may be tricky if it is not.
BTW: Theoretically there is an even easier way to do fade — by using css masks with gradients ( webkit.org/blog/181/css-masks ) but right now it's working only in Safari and Chrome.
I want to apply the inner shadow only to the bottom and right sides. Is there a way around this? The few hacks I have seen seem to be relating to regular border shadow, where it's easier to cover up a drop shadow then remove an inner shadow
-moz-box-shadow: inset 0 0 10px #161616;
-webkit-box-shadow: inset 0 0 10px #161616;
box-shadow: inset 0 0 10px #161616;
The first two properties are horizontal and vertical offsets, use them.
box-shadow: -5px -5px 10px #161616 inset;