Currently I'm using this
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
but on specific size of screen I don't want box-shadow.
How can i override to disable the shadow?
Use CSS3:: Media Queries to create style based on the screen resolution. And use
box-shadow: none;
To disable the shadow.
Related
I want to know how can I fix the border of this play button. It has 1px of border and 50% border-radius, and it looks ugly. 2px looks ok but I need 1.
Same questions solved here by Guy.
This is common when having a background and a border specified. The only way to fix this would be to have two separate elements, one with the background color and one with the border color with padding equal to the border-width.
See this article for a better explanation.
or try box-shadow: 0 0 1px 0px #yourBlueColor inset, 0 0 1px 0px #yourBlueColor;
this problem is correlated to resolution dpi of your screen device , you can fix this with
border: 2px solid rgba(42, 91, 195, 0.35);
use 2px but use also a rgba transparent effect for reduce the size of border
Not great, but looks quite a lot better by setting besides the border at 1px, an inset box-shadow with 1px blur-radius of the same color:
border: 1px solid #333;
box-shadow: inset 0 0 1px #333;
In the Chrome browser it's not possible to style a table row with box-shadow on hover. It does work in Chrome when you assign the box-shadow to td with pseudo classes :first-child and :last-child. (reference: Table Row Box-Shadow on Hover (Webkit) )
I'm trying to use box-shadow for a glow effect on a table row. The problem is that without h-shadow or v-shadow values the box-shadow also appears in the middle of the table row.
JSfiddle: http://jsfiddle.net/2nw4t/25/
tr:hover td {
-moz-box-shadow: 0px 0px 16px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 16px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 16px 0 rgba(0, 0, 0, 0.5);
}
A solution for this problem would be a overlay div positioned with jQuery, but i'm wondering if it can be done with CSS only.
So I have been trying to make a simple page with simple dropshadows. The problem comes when I add a couple of tabs to the box that has a drowshadow. I have placed a copy of the html and css at http://blah.eu5.org/test/.
Can anyone suggest where I am going wrong as I know I have seen it done properly using css before?
The white lines are actually silver lines, so you need this:
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
instead of
box-shadow: -1px -1px 0 silver, 1px 1px 0 silver, 0 5px 15px rgba(0, 0, 0, 0.4);
and it will be fine
CSS border radius works fine, but it's now revealing a white background. (I'd prefer transparent or grey, similar to body background...)
CSS:
.window_header{
width:600px;
height:42px;
background: #333 url("../img/bg-2.png") repeat;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-bottom:1px dotted #666;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3),inset 0 -4px 5px rgba(0, 0, 0, 0.2),inset 1px 0px 1px rgba(0, 0, 0, 0.7),inset -1px 0px 1px rgba(0, 0, 0, 0.7),inset 0 -2px 1px rgba(0, 0, 0, 0.5),inset 0 2px 6px rgba(255, 255, 255, 0.15),inset -2px 0 6px rgba(255, 255, 255, 0.15),inset 2px 0 6px rgba(255, 255, 255, 0.15);
}
The white should be from the background of the container "behind" the one you applied border-radius to.
Maybe try to apply border-radius to it as well.
I would recommend either applying Border Radius to the underlying Element so instead of having rough white edges, the element would have rounded corners. So you wouldn't see the white edges.
-or-
Place the whole element edit before the containing element so it sits on top of the white background and go from there.
Perhaps the bg-2 file isn't transparent in that area? Depending on the editor that you used to create the image, it may not have had the ability to make it transparent.
Max Gherkins's explanation is also a very big possibility. :)
background: #333 url("../img/bg-2.png") repeat;
Your background image is not transparent. If it is a "flattened PNG", make sure the background is "transparent" and not "white".
i was wondering if there is something like text-shadow for DIVs, we all know that text-shadow is only for dropping a shadow to the text, but i want a shadow for a complete DIV.
any ideas?
Thanks
If you're using text-shadow you are using CSS3, so try the box-shadow property.
Actually you can do it with css3 on the newer browsers and filters with IE. I read about it in this extremely good article a while back. Basically you can take the following CSS and apply it to a div and it should work with FF, Safari, Chrome, Opera, IE5.5 and up.
.module {
/* offset left, top, thickness, color with alpha */
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/* IE */
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
/* slightly different syntax for IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}
You could try border-image
border-image: url(shadow.png);
CSS3 Only though
You can use images to get the shadow effects for divs. Alist apart has nice articles on it.