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.
Related
I have an image and my css places it inside circle. The only problem is that it is not working on Opera browser. Any idea how to fix it?
my CSS:
.circular {
overflow: hidden;
width: 48px;
height: 48px;
border-radius: 550px;
box-shadow: 0 0 10px rgba(0, 0, 10, 2.8);
-webkit-box-shadow: 0 0 10px rgba(0, 10, 0, 2.8);
-moz-box-shadow: 0 0 10px rgba(0, 10, 0, 2.8);
background-image:url('img/backg.png');
}
As long as you're running Opera 10.60 or higher, all those properties are supported.
Reference for box-shadow
Reference for rgba (and other CSS3 color properties)
So what that means is, if you ARE running the correct version, you need to post the rest of your code to diagnose underlying issues.
Yes Html5 and css3 is still now under work-in-progress.Most of the browser invoking the latest feature of the Html5 and css3 .So I will suggest you use this two lines of css code to get your desire result for your opera browser.
-o-border-radius: 50px;
-o-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
keep remember some important prefix we have to use for creating css rule
-webkit- for chrome and may be safari
-moz-for firefox
-o-for opera
-ms-microsoft
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.
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.
Is there anyway to do this for IE8?
-moz-box-shadow: 0px 0px 14px #585858; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 14px #585858; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 14px #585858; /* Opera 10.5, IE 9 */
-moz-border-radius: 6px;
border-radius: 6px;
You can do this with CSS3PIE. It adds rounded corners, drop-shadow and gradient background support for IE.
Hope this helps !
For shadow on IE8 you can use
.box-shadow {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000')";
}
where Strength is the density of the shadow and Direction is the angle of the shadow's offset in 45 degrees increments. See Direction Property on MSDN.
Hope this helps.
IE8 is not compatible with either drop shadows or rounded corners.
Drop shadows and rounded corners are usually best done with png images, then hacked for IE6.
Alternatively you could use something like spiffy corners (http://www.spiffycorners.com/) for rounded corners.
I'm doing some tests with new features of CSS3, but this combination only works in lastest versions of Chrome and Firefox, but not in Safari or Opera:
box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 0px -10px 20px 0px rgba(0, 0, 0, 0.5);
I really don't know if they fails in the box-shadow itself, in the inset parameter, or in RGBA color. It's a syntax error or simply Safari and Opera lacks on this?
The inset keyword is not supported in Safari 4, but is supported in Safari 5 and Opera 10.5. Check that you're using the latest versions of each.
Sources:
https://developer.mozilla.org/En/CSS/-moz-box-shadow#Browser_compatibility
http://dev.opera.com/articles/view/css3-border-background-boxshadow/#box-shadow
This might help the web programmers: opera box-shadow bug , but hopefully the browser developers will notice it too and fix this tiny but unpleasant issue.