The situation is I have an inline SVG generated by Grunticon and inserted into the DOM. It's white on a grey background with a drop-shadow.
I used the following CSS for the shadow:
svg {
-webkit-filter: drop-shadow(1px 1px 0 #141414);
filter: drop-shadow(1px 1px 0 #141414);
}
This works fine in Chrome, Opera, Firefox and everywhere else I've tested it, except Safari on iOS and desktop. The CSS filter makes the SVG disappear.
It's not just the drop-shadow filter either, any filter seems to have this effect.
A demo is on Codepen at http://codepen.io/derekjohnson/pen/MyOaRY
Can this be worked round to make it work in Safari?
Annoying that this doesn't work, but Safari is the new IE after all! :P
A workaround is to wrap the SVG in another element and apply the filter to that.
background: url("images/main_bg.png") repeat;
Is a header/banner background image in style.css, but not sure how to get a shadow around it...
I tried
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
color: #333333;
background: url("images/main_bg.png") repeat;
box-shadow: 0 0 5px 2px #282a2d;
line-height: 1.4;
}
But that didn't work out...
TL;DR:
In case you're satisfied with WebKit Chrome only support, use CSS Filters.
In case you're satisfied with polyfilled CSS Canvas Context and Canvas, you can support Mozilla and WebKit browsers, though, Chrome will have no blur for it's shadow.
If you can recreate your image in SVG, and your targeted browser do support it, that's also a viable option. Actually, this appears to be the best option in case you can get your background in SVG. Most major browsers show the same result, with the exception of Safari which appears to drop the filter.
You can read below about the process of how the options did evolve.
Original answer:
I doubt that what you're looking forward to is possible.
First of all, body takes up 100% height and 100% width of the page, the "outside" shadow of it will be always hidden.
If you set the property as follows:
box-shadow: inset 0 0 5px 2px #282a2d; /* mark the inset */
you should see the shadow, though, I doubt that's what you seek.
You could overcome the issue by wrapping the image in a new element, that's a child of body and is smaller than 100% of body's dimensions.
Also, you may make body's dimensions smaller than 100%, though, I do not encourage to do so - it may break in some browsers and so on.
My second guess, derived from that you're using a png, hence, transparent image, is that you wish to shadow the image around it's filled pixel edges, leaving the transparent untouched. While it sounds like a cool idea to do, that's not what CSS does.
The property is called box-shadow not simply shadow so it already states that it won't be possible.
I don't know if that's possible, but you could try using SVG and it's filters to do so. I'm no expert in SVG's - will not be able to provide example immediately (will look into it though).
One more possibility is to use canvas as background for your element, and apply the shadow programmatically (iterating through pixels and adding extra pixels).
Update: Didn't know that Canvas is smart enough to shadow through transparent images, the programmatical part is not necessary.
Keep in mind, that the last 2 variants will most definitely be poorly supported by browsers.
Updates:
CSS Filters:
Okay, there is one more possibility - CSS filters, though, as of writing, they are supported only by WebKit. Not sure actually if they work in all of WebKit browsers (Safari, Opera, Chrome), but they do in Chrome.
Checking with latest Safari for Windows, Opera and Chrome, proves, that the property only works on Chrome.
There is one "but", it is not supported on body either (jsfiddle.net), and I think that all of the cool stuff has left the body behind.
In case of child node, it works (jsfiddle.net)!
P.S. Eventually, we may see CSS filters implemented in every browser. That makes this the best option for such functionality.
Canvas:
Update:
I did some experiments with canvas. In general, it's a success and even works for body: http://jsfiddle.net/psycketom/3VBMJ/4/.
Though, I couldn't manage to make the shadowBlur property work. Might be it doesn't work on CSS Canvas Context.
And, Firefox natively doesn't support cssCanvasContext, so the -moz-background (It's actually -moz-element, but since there is no cssCanvasContext, it still fails) property is ignored. I think that could be hacked with an off-screen canvas.
Update 2:
The shadowBlur property works on Safari, doesn't on Chrome.
Update 3:
http://jsfiddle.net/psycketom/3VBMJ/6/ I did a test with off-screen canvas, but couldn't hack it together. I'm giving it a bit more of my time at the moment.
Update 4:
Off-screen canvas does work in Firefox - http://jsfiddle.net/psycketom/3VBMJ/12/, but, doesn't work in Webkit.
A dynamically generated canvas also does it, though, it has to be appended, and hidden afterwards.
Update 5 (worth to check):
I did a dirty polyfill, now, the Canvas background gets supported in both - Webkit and Mozilla browsers.
Update 6:
I did a quick compatibility test - Chrome (27.0.1453.116 m) works, Firefox (22.0) works, Safari (for Windows, 5.1.7 7534.57.2) works.
As for... IE (10.0.9200.16618) doesn't work, Opera (12.14 1738) doesn't work.
SVG:
First of all, SVG requires that you create your image in vectors.
Update:
Oh boy, oh boy... SVG... http://jsfiddle.net/psycketom/3VBMJ/18/. This is not really an background image, it's just SVG poured inside the HTML, and it's container element has pointer-events: none applied to it, to disable any mouse input.
Works in both, Firefox and Chrome, and probably others because it depends on SVG that is a bit more supported than CSS3/HTML5. Keep in mind though, that some parts of SVG are not supported, filters, possibly, being one of them.
Update 2:
By pouring everything what we had as inline html before into a file of it's own, we can use SVG as background-image. Checked in Chrome and Fox - works in both.
Update 3:
I did a quick compatibility test - Chrome (27.0.1453.116 m) works, Firefox (22.0) works, IE (10.0.9200.16618) works, Opera (12.14 1738) works.
As for Safari (for Windows, 5.1.7 7534.57.2) - it works, but doesn't display shadow at all.
This is what I meant with child element:
http://jsfiddle.net/psycketom/3VBMJ/21/
Additional information:
http://jsfiddle.net/psycketom/3VBMJ/17/ it appears, that the shadowBlur in Chrome is supported in general (the red box), but it lacks support for PNG's (smiley).
I'm confused, now, is it because of the recent switch to Blink or it has never been supported in Chrome?
The first value is for the horizontal offset, the second for the vertical. the third describes the blur radius and the last the spread radius.
But ithink it works if you only define blur and spread, too.
What browser do you using?
have you tried
-moz-box-shadow: 0px 0px 5px 2px #282a2d;
-webkit-box-shadow: 0px 0px 5px 2px #282a2d;
first you cant create a shadow behind <body> tag
to have shadow in your webpage you need to create a container using div or a table data inside your data by using <div class="x">your data</div> or <table><tr><td class="x">your data</td></tr></table>
now use class x to give shadow
now for <div> your code will be like
.x{
webkit-box-shadow: 0px 0px 10px 7px #606060;
moz-box-shadow: 0px 0px 10px 7px #606060;
box-shadow: 0px 0px 10px 7px #606060;
}
now for <table> your code will be like
td.x{
webkit-box-shadow: 0px 0px 10px 7px #606060;
moz-box-shadow: 0px 0px 10px 7px #606060;
box-shadow: 0px 0px 10px 7px #606060;
}
To answer your question briefly, there is no background-box-shadow property, and box-shadow always affects the whole element (https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow). So the work-arounds are the only way to do it.
This works for background-image:
body{
filter: drop-shadow(0 0 5px #fff);
}
Check here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
I'm trying the new text-stroke features and I've searched the web for a cross browser solution. For now I only could find it with webkit properties.
-webkit-text-stroke: 2px #FF1E00;
Could you let me know if there is a way so all browsers will display in the same way?
.strokeme
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
from: Outline effect to text
"What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe)."
As of May 24th, 2012, there is no cross-browser solution, as only webkit supports the experimental feature according to http://caniuse.com/#search=text-stroke. You can simulate this (to some degree) with 4 or 5 text-shadow's on an element.
Demo: Text Stroke, on CSS-Tricks.com
You could try strokeText.js, a vanilla javascript plugin.
Strokes do not overlap your text like they do with
-webkit-text-stroke
Supports all browsers except IE8 and below
Selectable text
Dependency-free
Full disclosure, I made the plugin.
This can't be done natively cross-browser, but it can be implemented with a fallback for unsupported browsers:
color: blue;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 3px;
That way, webkit browsers will display white text with blue outline, but other browsers will still display the color of your choosing (this case blue).
I was long using this to add a glow to focused fields, I accessed my page from Firefox for the first time and realized it doesn't work on it, and most likely not on explorer either.
border: 1px solid #E68D29;
outline-color: -webkit-focus-ring-color;
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;
I had copy pasted it from another page so I'm not quite sure how it works. What is the equivalent for Firefox or Explorer? I mean how do I make a similar glow in other browsers? Thanks
Webkit treats "outline-style: auto;" differently than other browsers. If you want to get behavior that's more similar across browsers I'd recommend you use box-shadow instead. It won't apply to older browsers (IE8 and earlier, or FF3.0 and earlier) but otherwise should be the same.
Using this code
input {
border: 1px solid #E68D29;
}
input.focus {
border-color: #439ADC;
box-shadow: 0 0 5px #439ADC; /* IE9, Chrome 10+, FF4.0+, Opera 10.9+ */
-webkit-box-shadow: 0 0 5px #439ADC; /* Saf3.0+, Chrome */
-moz-box-shadow: 0 0 5px #439ADC; /* FF3.5+ */
}
I was able to produce a result that shows cross-browser glow in IE9+, FF4+, Chrome 10+, and Safari 5+.
Option 2) You could experiment with using some combination of outline (which will show in Webkit) and box-shadow (for other browsers).
Option 3) Use a library like Formalize CSS to take care of the cross-platform input styling for you. The results are pretty impressive.
Is there a way in the newer CSS standards to provide round borders?
It is not possible in CSS level 2.
Yes. CSS3 already has it.
Many browsers already have it.
In Mozilla/gecko browsers you need -moz-border-radius though they are transitioning to border-radius.
In Safari/Chrome/webkit browsers you need -webkit-border-radius.
IE9 and above need border-radius (IE8 and below don't support it at all).
In the future when CSS3 is widely adopted you'll just need border-radius in all browsers.
At the moment it's a good idea to use all three, plus -o-border-radius if you're worried about Opera.
It's in CSS 3.
border-radius: 4em;
http://www.w3.org/TR/css3-background/#the-border-radius
Border-radius: create rounded corners with CSS!
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
The code for this example is, in theory, quite simple:
#example1 {
border-radius: 15px;
}
However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
What Thomas Rutter said, plus here is a handy resource because WebKit and Gecko use different properties for things such as top-left.