I need to create gradient that will be in the bootom of element and look like this
I have tried like this
.div-with-shadow {
padding-bottom: 1.4285714286rem;
border-bottom: solid 0.0714285714rem rgba(0, 0, 143, 0.05);
box-shadow: inset 0 -3.5714285714rem 3.5714285714rem -3.5714285714rem #e9e9fd;
}
<div class="div-with-shadow"></div>
But it does not look the same, this has to be some kind of gradient and not border, anyone can help me, thanks
Related
Adding Multiple box-shadows works partially. While the shadows appear on both the left and right sides of the box in all the browsers, it doesn't appear on the left side in MSEdge.
I have tried adding border-collapse: seperate, display: block and inline-block, background-color: rgba(255,255,255,1) but none of these seem to work. Any help is appreciated.
{
width: auto;
border: none;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
border-radius: 2px;
}
Shadows should appear on the left-side as well in MSEdge.
The issue here is with the pixel density in any testing environment (VirtualBox, browserstack, sauce labs etc.). The shadow is still present everywhere but it just doesn't appear in testing environments. Testing in an actual browser gives the desired output. Not sure about what is causing this but it is an issue with the image on any virtual machine.
I want to change the color of bootstrap textbox from the default blue. tried:
.input-small,
.input-medium {
border-color: #E56717;
}
Not of much help. Also tried ":focus"
I presume you're speaking about the blue glow on focus? Try this:
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
border-color: rgba(229, 103, 23, 0.8);
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
outline: 0 none;
}
If you are using bootstrap 3 with LESS, you can set the variable #input-border-focus. This variable can be found in variables.less.
To whom visited this page and didn't find a solution, what I did is replacing -webkit-focus-ring-color with desired color and it works just fine!
change box-shadow color
input[type]:focus{ box-shadow: none; }
Creating dark inset text is simple. You just write the same word twice (using text-shadow in this case) but the second time you write it drop it down and to the right a little bit and write it in a lighter color with some opacity. Easy once you figure it out.
The problem I am having is with white inset text. There is no color whiter than white so there is no way to create the illusion of more light being at the top than down inside the inset character. The best I can come up with is white outset text but I want white inset text.
.dark {
color:rgba(0, 0, 0, .6);
text-shadow:2px 2px rgba(255, 255, 255, .1);
}
.light {
color:rgba(200, 200, 200, 1);
text-shadow:2px 2px rgba(0, 0, 0, .2);
}
fiddle
Found an answer on IRC fiddle
the light is hitting from the top left so it looks darker where the tl z axis would be
You just have to try different combinations. I have also used multiple text-shadows to do inset text styles.
I prefer just doing this for your light style:
text-shadow:1px -1px rgba(0, 0, 0, .2);
Position the dark text shadow on the opposite side of the light text shadow:
text-shadow: -2px -2px rgba(0, 0, 0, .2);
I was trying to draw a small triangle (as the tail of a rectangular chat-bubble) in CSS. I managed to do that, but then I wanted to apply a box-shadow to the tail and the box. So, I have the following CSS for the tail:
#bubble::after {
content: "";
display: block;
position: absolute;
bottom: -22px;
left: 10px;
border-width: 22px 0 0 20px;
border-style: solid;
border-color: #fff transparent;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6);
box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6);
}
Which renders this (Sorry; background is a bit blurry because of the zoom):
Notice how the box-shadow doesn't render alongside the diagonal part of the bubble's tail.
The desired effect I would like to achieve is:
This is a screenshot from inside Photoshop, so it might looks a bit different than the partial screenshot of the browser's portview (the shadow is supposed to be larger, I forgot to update the layer style after scaling the path).
How would I achieve that?
Thanks!
P.S: I am open to the thought of using a raster image or a SVG, although I'd prefer if I didn't have to.
I think that what you're trying to do is relevant to this previous post on SA: CSS Drop Shadow for CSS drawn arrow
I'm afraid that's not possible with CSS only. box-shadow applies to the element's box, with an image that's still a rectangle :)
See http://lineandpixel.com/blog/png-shadow for a write-up from another frustrated user.
You'll have to bite the bullet and use a raster image or SVG.
i've been reading and experimenting with conditional css to display the following css for IE 8.
box-shadow: 0 1px 1px inset, 0 0 40px rgba(0, 0, 0, 0.5) inset, 0 16px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 5px rgba(0, 0, 0, 0.6);
I have been fiddling with gradient and offset but i can not find anything about inset without having to create additional elements.
is is possible to 3 insets and use rgba, as using the gradient start and end for ie was a standard gradient. If not i will happily use basic styling and drop the css3 styling, thanks
Nope, it is not supported; http://dimox.net/cross-browser-css3-box-shadow/... However, take in consideration your analytics data and see how many visitors are really using ie8, maybe it's only a small percentage, and it's not that much of a mis;)