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.
Related
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 not associated in any form with the following page:
http://www.wpsyndicator.com/
However, as you can see on that page, they used images to show the white-outlined, shadowed, red text. Is there a way in CSS3 to implement this feature? I mean, I can handle the shadow and the red, but the white font outlining is not something I'm familiar with.
You are looking for text-stroke.
-webkit-text-stroke: 1px white;
It is only supported by the web-kit for now, you can see the compatibility list here http://caniuse.com/text-stroke
More Info:
http://css-tricks.com/adding-stroke-to-web-text/
http://www.webkit.org/blog/85/introducing-text-stroke/
Here is an example from David: http://jsfiddle.net/davidThomas/h5J6K/2/
You can use the css3 text-shadow property to achieve this effect. Will not work in IE tho so will have to find some one to emulate the effect in that browser. The code looks like this...
#myDiv {
text-shadow: 1px 1px 1px #fff, 2px 2px 1px #fff, -1px -1px 1px #fff, -2px -2px 1px #fff;
}
The first argument is the horizontal distance from the text, the second, the vertical, the third is the blur. the lower this number the less blur. you do negatives to go up or to the left. This is cool and you can do some really neat effects with this. Hope that helps
I'm rotating an element using -webkit-transform: rotate() and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth" anti-aliasing instead of "crisp".
Anyone know what's going on here? Is it specific to this webkit or Chrome version or is there something I can do to fix it? (It's also not anti-aliasing the borders between list elements)
Here's the CSS:
div.right-column.post-it
{
position: relative;
width: 240px;
background-color: #fe9;
padding: 20px;
-webkit-transform: rotate(.7deg);
background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
box-shadow: 1px 1px 0 #ddccaa,
2px 2px 0 #dbcaa8,
3px 3px 0 #d9c8a6,
4px 4px 0 #d7c6a4,
5px 5px 0 #d5c4a2,
6px 6px 1px #d3c2a0,
4px 4px 2px rgba(90,70,50,.5),
8px 8px 3px rgba(90,70,50,.3),
12px 12px 5px rgba(90,70,50,.1);
}
Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
edit
There also a Webkit only style declaration -webkit-font-smoothing which takes the values
none
subpixel-antialiased
antialiased
where subpixel-antialiased is the default value.
Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.
See here http://maxvoltar.com/archive/-webkit-font-smoothing
The blurred fonts are caused by a weird webkit issue invloving -webkit-backface-visibility. This took me forever to figure out, and I haven't seen it anywhere else on the web yet.
I now add -webkit-backface-visibility: hidden; to the body of my site as a CSS reset style. Watch it sharpen the fonts on your entire site, its amazing. You're transformations are not 3d so this wont affect anything anyway, but if you do decide to do 3d transformations somewhere else on your site just add back -webkit-backface-visibility: visible; to the specific element. Should also fix the flickering too.
I have the following code, which makes a box with rounded corners and shadow. It should be compatible with all browsers and it really is, but the thing is I need transparent shadow and IE doesn't support RGBA values :(
<style>
#box {
width: 250px;
height: 250px;
background-color: #1e9ad3;
padding: 20px;
margin: 20px;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
behavior: url(PIE.htc);
box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-webkit-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 4px 3px rgba(0,0,0,0.15);
}
</style>
<body>
<div id="box">
Hello world!
</div>
</body>
Any suggestions how to do this? My "box" could be on different backgrounds, or on the background with texture, so that's why I can't make the color of shadow for example light grey.
Here's the live example: http://bbin.own.cz/box.html
The CSS3Pie documentation gives the answer.
PIE parses RGBA color values wherever they are allowed. However it is only able to successfully render their opacity value in a few contexts. In all other contexts they will be rendered with the correct RGB color, but fully opaque. Here are the supported contexts in which the opacity will be rendered correctly:
The solid background-color as specified in the -pie-background property.
The color value of box-shadow, if the shadow has no blur.
In short, the answer is no, this can't be done. IE simply doesn't support RGBA properly. CSS3Pie is able to do it in a few contexts, but a box shadow with a blur is not going to work.
If CSS3Pie can't do it, then it's a pretty good bet that it simply isn't possible in IE.
You'll be able to do it if you lose the blur, but of course that changes the whole effect, so it's not really a solution for you.
You'll need to use custom MS settings for pre IE8
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
Havent tested this but you can google for more info. source
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.