I have looked into creating box-shadows in CSS but how can we make non-box-shadows? I have triangle made with one of the CSS Tricks and I want some shadow around it's sides but when I add box-shadow it adds a box around it and then adds a shadow. How can I achieve this?
This is what happens: Demo.
Of course it is possible. With filter: drop-shadow you can even add shadows to transparent png shapes.
Params are pretty much the same as for box-shadow:
-webkit-filter: drop-shadow(1px 1px 5px #000);
filter: drop-shadow(1px 1px 5px #000);
NOTE drop-shadow works only with webkit engines (Opera, Chrome and Safari) - thanks to Eliran Malka for pointing that out.
To my knowledge, it isn't possible to give a CSS shape a shadow. Two alternatives are to -
duplicate the CSS shape using perhaps :before or :after, then z-index it underneath and position it to the lower-right
use images for the shape and add the shadow effect to the image (if you have Photoshop, this is done through the layer drop shadow filter)
Related
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 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)
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.
Can someone take a look at my background shadow? Here is the link:
link text
I'm trying to find the best solution for having a background shadow for a card in the front (layered).
Is it possible to make the sides of shadow cave in with CSS?
I'm currently using a PNG with transparency and I can't get the shadow to match with the background!
Any suggestions would be helpful.
To get your image to line up you can do it in css:
#card_main {
background:url("/img/shadow.png") no-repeat scroll 0 0 transparent;
margin:0 auto;
min-height:800px;
position:relative;
top:-1px;
width:980px;
}
Though your background gray color seems to be different in the image than the background.
you can also make your shadow.png only be the text shadow, not including the background-color for the header and content area in the png.
or, you can simply use the box-shadow css declaration for webkit and FF. and a filter for IE. if you're interested in this solution i can post some sample code.