I'm trying to work out how to achieve the box-shadow effect in the image linked to below. Basically I want no shadow at the top of the box, graduating to a shadow at the bottom.
http://i.imgur.com/JeIhmpd.png
This might help you.
box-shadow: 0px 3px 10px 1px rgba(184,184,184,1);
box-shadow: (horizontal) (vertical) (blur radius) (spread radius) (color)
Related
I've got this page where I'd like to give to the exterior of the player a blurry effect, something like this, with the black part being transparent. Is it possible to do that only with CSS?
Thanks!
Try using box-shadow instead of a css border
box-shadow: 0px 0px 10px #000000;
I'm trying to apply text shadows for svg text but it is kinda buggy for firefox and chrome but I'm not sure why. I'm trying to use them to create a border around the text.
Here is my jsfiddle: http://jsfiddle.net/f3m8Z/
And here is the css I'm using for text:
text-shadow: 0px -1px 5px red,
0px 1px 5px red,
-1px 0px 5px red,
1px 0px 5px red,
-1px -1px 5px red,
-1px 1px 5px red,
1px -1px 5px red,
1px 1px 5px red;
In Chrome if I zoom in and out some of the Hello Worlds have a thicker outline and if I drag it around it leaves behind text (if you zoom in first and then drag).
In Firefox only the top Hello World has some shadow (and it's not really even noticeable) but I read that Firefox does support text shadows.
Is the problem because the text is svg and not actual text and if so is there a workaround for this?
Thanks
SVG text does not support text-shadow. The good news is that this is something that will probably be added to SVG 2 and so it will be supported at some point in the future.
One workaround would be to use <foreignObject> to embed html text, but that won't work in IE9 or IE10 as neither supports <foreignObject>
If you just want to create a border round the text, you could just apply a stroke. The disadvantage is that it would encroach on the fill of the text. But the way around that would be to overlay two copies of the text. The one underneath would have the red stroke and the front one would have no stroke.
This solution is not quite as clean as a CSS shadow, but it would achieve the effect you want.
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
Can I have an inset shadow along the bottom of a div only? I've been playing with the box-shadow property in CSS3 for a while and cant figure out how to go about doing this.
I can get it to show on the inside along the top of the div but cant figure out how to get it to the bottom. I haven't been able to find any topics relating to this.. is it possible?
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
Use negative distances to more the shadow to the left or up (therefore having them on the right and bottom edges for inset 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)