What values need to be defined for a box-shadow that only appears at the bottom.
.element{box-shadow:0 -5px 10px #000}
first value is the position of the shadow on the X,
second is the position of the shadow on the Y,
third is the shadow dimension,
fourth the color.
By putting a negative position Y of half of the shadow dimension, you get no shadow at the bottom of your element.
You could put your box in another one, smaller, with height and width defined, have the overflow hidden, and with a relative position, you hide the shadow you don't want.
This has been asked millions of times. Just use the spread parameter to make it smaller, then move it so that it appears on one side only. Similar question here: drop shadow only bottom css3
I still haven't found a decent looking way that would work in all situations. Here are two methods:
1.) http://jsfiddle.net/pGGXH/28/ - use padding+overflow to show the shadow.
<div class="no-overflow">
<div class="box">my box</div>
</div>
.no-overflow {
overflow:hidden;
padding:5px 5px 0 5px;
}
.box {
border:1px solid #000;
border-radius:5px;
box-shadow:0 0 5px #333;
padding:10px;
}
2.) http://jsfiddle.net/pGGXH/33/ - uses stacking border-shadows (you can get multiple border shadows stacked one on top of the other)
<div class="box">my box</div>
.box {
border:1px solid #000;
border-radius:5px;
box-shadow:0 10px 0 #fff, 0 0 5px #333;
padding:10px;
}
However with border-radius both solutions don't turn out that well.
It appears it's not possible ( http://www.w3.org/TR/css3-background/#the-box-shadow ), you have to try some length values.
The box-shadow property allows web designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
The property syntax is as follows:
box-shadow: none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]
For example;
box-shadow: 3px -3px 3px #000000; //Shadow towards North East direction.
Check and experiment here... http://jsfiddle.net/jgsdS/
Related
Im adding a border to my table row dynamically using JS.
This causes the table to jump down slightly because of the border adding height to the row.
How can I prevent this?
I've tried adding a transparent border, which then gets replaced with the real border.
This works, but I was looking for a better solution, so I tried:
box-sizing: border-box
This did not work.
What's the best solution to this?
If you don't want to use a transparent border (advisable for you to use it, not sure why you wouldnt), you could instead simply give the cell padding of the same amount as your border width, and remove on hover, e.g.
Demo Fiddle
td{
padding:3px;
}
td:hover{
border:3px solid;
padding:0;
}
Alternatively, if you couldn't spare the padding - and you don't need to support IE8, you could try tinkering with box-shadow
td:hover {
box-shadow: inset 0px 0px 0px 3px #111;
}
http://jsfiddle.net/evanbriggs/vbcutxmq/
I'm using CSS box-shadow to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.
Take this HTML:
<div class="wrapper">
<div class="widget">Test</div>
</div>
And this CSS:
.wrapper {
background:red;
padding:20px 0;
}
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}
In most browsers, the widget DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the widget DIV.
Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)
Things I've tried to remove the transparent space:
Changing the box-shadow from using em's to using px's
Adding or subtracting 1px from the other box-shadow attributes
Adding a border around the widget DIV
Adjusting the padding, display, position and other CSS elements for the widget
So many things I can't even remember right now
Any ideas how to remove the 1px transparent space in IE11?
Now that we know it's a bug, here's one acceptable workaround:
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
position:relative;
z-index:2;
}
.widget:before, .widget:after {
position:absolute;
content: " ";
width:1em;
left:-1em;
top:0;
height:100%;
background:white;
z-index:1;
}
.widget:after {
left:auto;
right:-1em;
}
Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.
Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.
Checkout the fiddle here: http://jsfiddle.net/TVNZ2/
THE PROBLEM:
This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.
As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.
That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!
WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):
In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:
div {box-shadow: 10px 0px 0px 0px red,
4px 0px 0px 0px red,
3px 0px 0px 0px red,
1px 0px 0px 0px red;}
Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?
Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.
THE "PRETTY MUCH" PART (FOR ME):
In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.
The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.
Not ideal, but far more preferable than having a whole line transparent.
I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.
Good luck, and let's all thank good ol' IE for its "challenges"!! ;)
You can fill the space with outline:1px solid color; It worked for me.
.container{
display:block;
position: relative;
width:450px;
height:450px;
margin: 0 auto;
background-color: #654d7f;
}
.header-emphasis{
position: absolute;
bottom:5px;
max-width: 420px
}
span{
position: relative;
left:8px;
background-color: white;
padding:4px 4px 4px 0px;
color: #666666;
box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
outline: 1px solid white;
}
<div class="container">
<h3 class="header-emphasis">
<span class="highlight">
If there are no dogs in heaven then when i die i want to go where they went.
</span>
</h3>
</div>
I thought I would share my answer to this issue. I cannot be sure that I have had the same exact problem as everyone else, but what I have observed is this: The problem occurs in EI11 (and EI10 according to other which I have not tested) when an element with a set width of pixels is centered using margin: auto; (my case was a left/right issue). I noticed that on resize, the div would shift over to the right 1px on every other pixel width of the screen.
I used a transparent background to observe that instead of just a gap appearing on the left, the div did in fact shift 1px to the right.
Changing the width of the div 1px does work on the current screen width. However, change the screen width will bring back the problem on every other pixel.
To solve the issue, we need to identify the screen width as even or odd. In my case, on even I added a css rule to my culprit div. The new rule changes the left positioning by 0.5px.
Furthermore, the function needs to be executed on the screen resize.
Below is the script I used to fix the issue:
(function (window, document) {
function isEven() {
var windowWidth = window.innerWidth;
// Find out if size is even or odd
if (windowWidth % 2 === 0) {
document.querySelector("#container").classList.add("container_left_1px");
} else {
document.querySelector("#container").classList.remove("container_left_1px");
}
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);
And the css rule
.container_left_1px {left: .5px;}
Executing the script only on EI10 and 11 would be optimum. Please forgive my scripting as this is the first js I have made. Please feel free to correct any issues. This solved my problem; I hope someone finds it helpful!
DaveE gave a nice solution. I played with this myself as well. I had an issue with the top and bottom blur of a box-shadow, instead of left and right. I eventually solved it by just adding a border on top and use important next to it.
.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}
Perhaps not as well tought out as the previous solution, but it worked for me.
Found this solution(Small space between box shadow and div when alpha set) and it works for me: div width must be an odd number.
width: 800px; => not working, but width:799px; => works and white gap disappeared!
In my case, I had a white line between the div bottom and the shadow and I resolved the issue adding a height to the div with decimals:
height:30px; -> height:30.1px;
In this Plunker you can see I've tried to make an inset drop-shadow appear in the viewport area of the grid. It is visible in the space where there are no rows, but none where the rows are. I don't quite understand what about the rows is blocking it.
Below are my styles:
.gridStyle .ngViewport
{
box-shadow:inset 0 0 4px 1px rgba(0,0,0,.3);
}
.gridStyle .ngFooterPanel, .gridStyle .ngTopPanel
{
box-shadow:0 0 3px 1px rgba(0,0,0,.3);
}
Is there a way to get the box-shadow to be visible even when rows are present in the viewport?
You don't see the box-shadow because the the row elements are on TOP of the ngViewport element that has the shadow. If you make the ngViewport container wider than the rows, you'll see the shadow appear at the edges.
You could set a cellClass to define inset box-shadows for the appropriate side(s) of the cells (see Can CSS3 box-shadow:inset do only one or two sides? like border-top?)
Following is my jsfiddle in which i am trying to drop shadow on table.
The problem is shadow is droping on bottom and right of the table but not on left and top side of the table kindly let me know how can i modify the css of my fiddle so shadow will be droped on all sides of the table. Thanks,
http://jsfiddle.net/7RQtq/
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Reset the x, y co-ordinates:
-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
border-radius: 5px;
Explanation
The first option is x co-ordinate, the second is y. So, resetting both to 0px will give you centered. And, increasing the spread, the third value, will give you like Photoshop. Also, giving some border-radius will show exactly how you want.
Screenshot
Fiddle: http://jsfiddle.net/7RQtq/4/
First two parameters are x (right) and y (bottom) traslation... set them to 0px for a centered shadow:
http://jsfiddle.net/7RQtq/1/
-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
Don't know about the legacy IE filters, but for other browsers you can use box-shadow: 0 0 16px #000;. The first two values indicate offset, and the third indicates blur of the shadow.
Demo: http://jsfiddle.net/7RQtq/3/
Generator Tool: http://www.webtutorialplus.com/box-shadow.aspx
Spec: http://www.w3.org/TR/css3-background/#box-shadow
The ‘box-shadow’ property attaches one or more drop-shadows to the
box. The property is a comma-separated list of shadows, each specified
by 2-4 length values, an optional color, and an optional ‘inset’
keyword. Omitted lengths are 0; omitted colors are a UA-chosen color.
Where = inset? && [ {2,4} && ? ]
The components of each are interpreted as follows:
The first length is the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a
negative length to the left.
The second length is the vertical offset. A positive value offsets the shadow down, a negative one up.
The third length is a blur radius. Negative values are not allowed. If the blur value is zero, the shadow's edge is sharp. Otherwise, the
larger the value, the more the shadow's edge is blurred. See below.
The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius.
Negative values cause the shadow shape to contract. See below. Note
that for inner shadows, expanding the shadow (creating more shadow
area) means contracting the shadow's perimeter shape.
The color is the color of the shadow. If the color is absent, the used
color is taken from the ‘color’ property.
As you might imagine, you can create complicated (and elaborate) effects with a combination of these values, such as:
http://studentwebhosting.com/tutorials/amazing-css3-box-shadow-examples/
http://viget.com/inspire/39-ridiculous-things-to-do-with-css3-box-shadows
I am using RGBA to create a transparent background that overlays on top of an image. Works just fine. My questions is this: Is there a way to "soften" the edges of the box to where it flows more into the picture vs a hard edge.
Here is my CSS for the box:
#past{
position:absolute;
left:0;
top:363px;
background-color: rgba(34,34,34,0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
/* For IE 8*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
z-index:10;
padding:10px;
}
I know I can do this by creating a background image in Photoshop but I was looking for a CSS only way vs using an image.
Also I would prefer if at all possible for this to work in all browsers.
Thanks for the help. =>
Another option is to use one of my personal favorite CSS tools: box-shadow.
A box shadow is really a drop-shadow on the node. It looks like this:
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);
The arguments are:
1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect. 0 means no blur.
color: The color of the shadow.
So, you could leave your current design, and add a box-shadow like:
box-shadow: 0px -2px 2px rgba(34,34,34,0.6);
This should give you a 'blurry' top-edge.
This website will help with more information: http://css-tricks.com/snippets/css/css-box-shadow/
It depends on what type of fading you are looking for.
But with shadow and rounded corners you can get a nice result. Rounded corners because the bigger the shadow, the weirder it will look in the edges unless you balance it out with rounded corners.
http://jsfiddle.net/tLu7u/
also.. http://css3pie.com/
You can use CSS gradient - although there are not consistent across browsers so You would have to code it for every one
Like that: CSS3 Transparency + Gradient
Gradient should be more transparent on top or on top right corner (depending on capabilities)