I am using CSS3 property
box-shadow: 2px 2px 2px 2px #CCCCCC;
Its giving this wierd effect on the right hand side and the bottom.
How to make the shadow to be equal on all the sides ?
Use
box-shadow: 0 0 2px 2px #CCCCCC;
instead
See this jsFiddle
The first two numeric values specify the relative x and y offset of the shadow. Hence your shadow was displaced/offset by a vector of (2px , 2px), or 2px right, and 2px down.
The third numeric value specifies the blur, and the fourth the shadow size/spread, and the fifth the colour (in HEX)
Use this:
box-shadow: 0px 0px 2px 2px #CCCCCC; /* Horizontal Length: px, Vertical Length: px, Blur Radius: px, Spread: px, Color */
You can test CSS3 here: http://css3generator.com/
box-shadow is defined as: horizontal offset - vertical offset - shadow spread - blur size - color
You could just do: box-shadow: 0 0 2px 2px #ccc;
You can do this by setting the first 2 values to 0px:
box-shadow: 0px 0px 2px 2px #CCCCCC;
See more: w3schools
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;
Got a problem with the css shadows.
I can't figure out how to get rid of the top shadow here: http://i.imgur.com/5FX62Fx.png
What I got:
box-shadow: 0 -3px 4px -6px #777, 0 3px 4px 6px #ccc;
How do I do that? I want it to be on the left, right and bottom side.
try this is:
div
{
width:300px;
height:100px;
background-color:white;
box-shadow:0px 0px 5px #888888;
}
try like so:
box-shadow: 3px 3px 3px #777, -3px 3px 3px #777;
(adjust hex colours to match your needs)
Example - http://jsbin.com/ebemol/1
Looks like you need to position the vertical shadow property:
box-shadow: 0 5px 4px -6px #777
-3px would indicates that the shadow starts -3px from where the shadow would start normally, I have changed it to an arbitrary value, 5px so it starts further down.
http://jsfiddle.net/9Dgtj/
You can see from the JS Fiddle I have provided that adjusting the vertical shadow (5px) moves the shadow down.
I have this class here and I using box-shadow which works fine, but it only shows the shadow on 2 sides, is there away to get the shadow on all four sides?
Thanks,
J
.contactBackground{
background-color:#FFF;
padding:20px;
box-shadow: 10px 10px 10px #000000;
}
If you set the offsets to zero, the shadow will be equal on all four sides.
.contactBackground{
background-color:#FFF;
padding:20px;
box-shadow: 0 0 10px #000000;
}
Box-Shadow
CSS3 box-shadow property has following attributes: (W3Schools)
box-shadow: h-shadow v-shadow blur spread color inset;
In your example you're offsetting shadow by 10px vertically and horizontally.
Like in other comments set first two values to 0px in order to have even shadow on all sides.
More on Shadows
The main prefix for shadow to support latest browsers is box-shadow.
There are 2 other ones that I recommend to use for older Mozilla and Webkit:
-moz-box-shadow
-webkit-box-shadow
Also, by using rgba instead of hex color value you can set the alpha/opacity of the shadow:
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.3);
Remove the offset definitions, and use only the blur radius (the third argument):
.contactBackground{
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px #000;
}
Try: box-shadow: 0 0 10px 10px #000000;
you need to specify box-shadow: 10px 10px 10px 10px BLACK;
Right, Bottom, Left, Top
or you could say box-shadow-top: 10px BLACK; etc
Is it possible to have the shadow surround the entire DIV?
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
I know the order of attributes goes:
Horizontal offset
Vertical offset
Blur radius
Color
But I wonder if it's possible to make the shadow go all around it instead of showing up only on one edge or side.
You're offsetting the shadow, so to get it to uniformly surround the box, don't offset it:
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
Yes, don't offset vertically or horizontally, and use a relatively large blur radius: fiddle
Also, you can use multiple box-shadows if you separate them with a comma. This will allow you to fine-tune where they blur and how much they extend. The example I provide is indistinguishable from a large outline, but it can be fine-tuned significantly more: fiddle
You missed the last and most relevant property of box-shadow, which is spread-distance. You can specify a value for how much the shadow expands or contracts (makes my second example obsolete): fiddle
The full property list is:
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-distance] [color] inset?
But even better, read through the spec.
Just use the below code. It will shadow surround the entire DIV
-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
Hope this will work
The CSS code would be:
box-shadow: 0 0 10px 5px white;
That will shadow the entire DIV no matter its shape!
Use this below code
border:2px soild #eee;
margin: 15px 15px;
-webkit-box-shadow: 2px 3px 8px #eee;
-moz-box-shadow: 2px 3px 8px #eee;
box-shadow: 2px 3px 8px #eee;
Explanation:-
box-shadow requires you to set the horizontal & vertical offsets, you can then optionally set the blur and colour, you can also choose to have the shadow inset instead of the default outset. Colour can be defined as hex or rgba.
box-shadow : inset/outset h-offset v-offset blur spread color;
Explanation of the values...
inset/outset -- whether the shadow is inside or outside the box. If not specified it will default to outset.
h-offset -- the horizontal offset of the shadow (required value)
v-offset -- the vertical offset of the shadow (required value)
blur -- as it says, the blur of the shadow
spread -- moves the shadow away from the box equally on all sides. A positive value causes the shadow to expand, negative causes it to contract. Though this value isn't often used, it is useful with multiple shadows.
color -- as it says, the color of the shadow
Usage
box-shadow:2px 3px 8px #eee; a gray shadow with a horizontal outset of 2px, vertical of 3px and a blur of 8px
Is it possible to create both an outer shadow for a 3D effect and an inner inset glow? I have a div with a lime green background that's on top of a blue div. So far, I have the following:
.greendiv{
background:darkgreen;
box-shadow: box-shadow: 10px -7px 15px darkgray;
box-shadow: lightgreen 0px 0px 3px inset;
}
The actual colors are in #ffffff format. It seems that the second declaration cancels the first one. Is there a way around this?
You simply declare box-shadow once, and use both versions inside, separated with a comma:
http://www.w3.org/TR/css3-background/#the-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.
So, for you:
.greendiv {
background: darkgreen;
box-shadow: 10px -7px 15px darkgray, lightgreen 0px 0px 3px inset;
}
See: http://jsfiddle.net/JzsAh/