How to create a shadow around a background image - css

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

Related

Background in safari is distorted

I'm working on a new client's website, and everything looks good in every browser except safari. The Problem: The Background image is not responding to the css in place in safari(The 5px size).
.et_pb_section_0 { /* The background CSS */
background: url(http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png) 5px;
}
I have been unable to find any definitive information regarding this issue.
Because Safari shares webkit functionality with chrome, attempts to resolve this issue via that resulted in the site breaking in chrome. Is there a way to target safari specifically?
In the CSS background shorthand property, the background-position comes before background-size. This makes your 5px correspond to background-position, not background-size.
To fix this, add a background-position and separate it from background-size with a slash:
.et_pb_section_0 {
background: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png") 0 / 5px;
}
Alternatively, define background-image and background-size separately:
.et_pb_section_0 {
background-image: url("http://www.elsyf-staging.com/esm/wp-content/uploads/2016/05/bg.png");
background-size: 5px;
}

Mozilla CSS hack for text shadow

I am trying to create a text shadow in Mozilla browsers only. (I'm using this as a workaround for some issues with a font that I'm using.)
I have tried -moz-text-shadow, but it seems that this is now defunct and it no longer needs the moz extension. But I don't want Internet Explorer and WebKit to use the text shadow.
Why would the -moz function be taken away?
You can target Firefox alone by using a CSS hack, such as:
body:not(:-moz-handler-blocked) a { background-color: red; }
Quick demo: http://jsfiddle.net/DxjeL/
The box should be red for Firefox and blue for all the other browsers.
This is from Browser CSS Hacks.
-moz, -webkit, -o, and -ms are called browser prefixes. They are used for browsers that didn't support the property fully.
And now every modern browser except Internet Explorer 8 and lower support the text-shadow property.
You can use JavaScript to detect the browser and add the text shadows property if you want to force adding a text shadow for just Firefox.
Rough example:
text-shadow: 0 0 transparent;
-webkit-text-shadow: 0 0 transparent;
-khtml-text-shadow: 0 0 transparent;
-moz-text-shadow: 1px 1px #ff0000;

DD Roundies not working in IE when element has gradient filter

I'm using DD roundies on a list element (li) that also has a filter applied for gradient and the rounded corners dont appear, but if I remove the gradient the rounded corners appear. Is there something I can do to fix this or is this a known limitation with roundies?
#hero-tabs li {
display:block;
float:left;
width:279px;
/*height:100px;*/
font-size:11px;
line-height: 1.3;
color:#fff;
border-left:1px solid #ccc;
cursor:pointer;
background-color:#555;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#222222, endColorstr=#666666);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#666666')";
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#222));
background-image: -moz-linear-gradient(100% 100% 90deg, #666, #222);
}
DD_roundies.addRule('#hero-tabs .first-tab', '0 0 0 5px');
Thanks
I have ound this also and there appears to be no work around at present. You can have one or the other, not both.
IE applies the gradient filter to the original element so the rounded elements from dd_roundies don't cover it.
It's not a limitation with roundies, it's a limitation with filter gradients. This is proved by the fact that filter gradients also cause similar problems in IE9 with standard border-radius corners.
There is no easy work-around available; the best solution is simply not to use those filter gradients in older versions of IE; so IE8 and earlier would just a fall-back solid colour background.
IE9 does have a work-around, as it can use an SVG image with a gradient as the background embedded in the CSS as a data-URL. It's a bit clunky, but it does work. IE8 doesn't have this option though.
If you must use gradients in IE8, you're pretty much forced to stick with the filter styles, and live with the bugs.
There is one other option though -- CSS3Pie. This is a small JS library similar to DD_Roundies in that it adds border-radius support to old IE versions. But in addition, it also does gradients. My advice, therefore would be to use CSS3Pie instead of DD_Roundies, and it will deal with both issues for you at once.
Hope that helps.

IE filters - Shadow acts on text; Gradient+Shadow acts on box?

When I attach the following to a div, I get a box with a gradient and a box-shadow in IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#D08080', EndColorStr='#E7A292') progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=170, Color='#B8B8B8');
However, when I'm doing JUST the shadow filter, I'm getting shadowing on the text inside the div. Other than the obvious (and ugly) hack of setting a filtered gradient with a constant color, how can I get a simple div to shadow itself rather than its text in all versions of IE?
IE's filters are always an ugly hack, can be hard to get right, and very often cause weird bugs. My recommendation is to avoid using them wherever possible.
Take a look at CSS3Pie for a neat way around the issue.
CSS3Pie is a hack for IE that allows it to use standard CSS properties instead of filter for gradients and box shadows. It also does border-radius.
I hope it'll solve your problems.
There is a way to this in IE without CSSPie. The issue in IE 7 & 8 is that the element to which the shadow is applied, needs to have a background color set. Otherwise the shadow is inherited by child elements (including text).
This is how I achieve a cross browser box-shadow. This should work for IE 7-10, All Chrome & FF release that I have ever tried and Safari too. Ignore my color choices, obviously you'll need to set them to whatever works for your page.
.wrapper {
border: solid 1px #A7A7A7;
background-color:#ffffff;/*transparent won't work*/
}
.shadow {
-moz-box-shadow: 2px 2px 3px #A7A7A7;
-webkit-box-shadow: 2px 2px 3px #A7A7A7;
box-shadow: 2px 2px 3px #A7A7A7;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7');
}
Then just apply both classes to the parent element
<div class="wrapper shadow">
<div id="someInnerDiv">
<p>Some text that used to inherit the box-shadow, but doesn't anymore</p>
strong text</div>
</div>

CSS3 Gradients and border-radius leading to extraneous background in webkit

After my 1st question with relation to CSS3 gradients in which I was recreating an 'inner glow' I've now got to the point where I'm not so happy with the way in which webkit renders the effect.
Basically, if you give an element a background colour and apply a border radius to it, webkit lets the background colour "bleed" out to fill the surrounding box (making it look a bit awful)
To reproduce the undesirable effect, try something like the following
section#featured footer p a
{
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
text-decoration: none;
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: rgb(98,99,100);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}
Apparently this appears to be a Windows-only problem, so for those on a Mac, here's a screenshot: (Check the 'carry on reading' button)
(source: friendlygp.com)
You'll notice that in Safari/Chrome (the latest available public downloads as well as the latest nightlies as far as I can tell), you get a rather ugly background colour bleed. However, in Firefox, you should be able to see what I'm after. If you're in Internet Explorer, woe betide you.
Does anyone know of a technique which will allow me to produce the 'correct' effect? Is there a CSS Property which I've missed that tells webkit to only have the background within the border-radius'd part of the containing box.
I could potentially use an image, but I'm really trying to avoid it. Naturally, as we're dealing with CSS3 and the landscape is continually changing, I might just have to 'lump' it and revert to an image.
However, if anyone can suggest an alternative I would be very much appreciative!
Finally, after an awfully long time, someone much cleverer than I has a solution to this:
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
is your friend :)
From: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
This is, unfortunately, a known bug. You can sorta work around it by giving your element a background-coloured border big enough to cover the leaking inset shadow, but it's far from an ideal solution.

Resources