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)
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.
I know how to use CSS3 shadows. However I am trying to achieve a specific design. I want the shadow to be a lot lighter and faded off on the left and right edges, please see image attached.
The only code I have come up with is the following. But not sure how to make the edges fade out more.
.shadow {box-shadow: 0 10px 6px -6px #000000;}
Any tips be helpful
I use a combination of box-shadow, border-radius and clip.
http://dabblet.com/gist/2225507
Something like this?
box-shadow: 0px 20px 37px -28px #000000;
note about parameters:
CSS3's Box-Shadow Adds Drop Shadows, Inner Shadows
hi you can create oval shaped css3 shadow through border-radius & box-shadow....
or can see the live demo:-http://jsbin.com/elacen/5/edit
you can play around with box-shadow and gradients here
css3 gen
but i don't think you can apply fading on the shadow
Right now, our mockups / live demo use images to achieve this effect (including button text). This is less than desirable for all of the standard reasons. I can get everything working except that pesky outer border. I'd really like to not add markup to my document just to have that.
I've got my test code on jsfiddle, although it doesn't work as well there as it does on my local machine: http://jsfiddle.net/Axtjm/
tldr: how to add inset border like that and keep rounded corners without extra markup.
As unintuitive as this sounds, don't use outline for outlines. Use box-shadow with a 1px spread:
box-shadow: 0px 0px 1px 1px #049ED9;
Demo: http://jsfiddle.net/Axtjm/4/
The easiest option is to add the extra container element and give each a border.
But the challenge is to do it without the border. Some ideas:
use a border and then a very thin box-shadow.
use the border style attribute AND the outline style attribute
(both dependent on the browser supporting them)
Quick JSBIN demo: http://jsbin.com/irabul
it is using border-radius property of CSS3
and simple CSS border techniques,
some of the border property,
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
inherit Specifies that the border style should be inherited from the parent element
and here is the border-radius in detail,
http://www.css3.info/preview/rounded-border/
Use an inset box-shadow. If you're already using a box-shadow on your buttons, remember that you can stack box-shadows by using commas to separate each.
button {
border: 1px solid #369;
box-shadow: inset 0 0 1px #fff, 1px 1px 2px #000;
}
The above is just an example; replace the values with your own if necessary. If you want a bolder inset shadow, you can also stack two insets of the same value to achieve that.
Live example: http://jsfiddle.net/Axtjm/5/
I have a background pattern which can be easily repeated. The problem is i have a shadow to the bottom of the background and to the right of the background. How do I repeat such an image? I thought I can probably cut the piece from the right and overlap that right shadow. Or using whole image is the only solution?
My suggestion is to use box-shadow css property to apply the shadows for your element instead repeat an image for the shadows also. You can use the following to make the shadows like your example:
-moz-box-shadow: 5px 5px 10px #000; /* FF3.5+ */
-webkit-box-shadow: 5px 5px 10px #000; /* Saf3.0+, Chrome */
box-shadow: 5px 5px 10px #000; /* Opera 10.5, IE9 */
Of course, as you see these properties doesn't support internet explorer 8 and below but you can use css3pie, a script that bring you some css3 properties to internet explorer. Is something that I often use.
Example: http://jsbin.com/iquso3
An alternative is to use a jquery solution from the many that exist.
For a background, using a whole image is the only solution, so you'll need separate images to do this on a flexible sized box.
You can probably keep the html and add the shadown using css, or by dynamically inserting extra divs using javascript/jquery.