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
Related
Why is this CSS being applied inconsistently across frameworks/environments/browsers?
I've got a prototype created in Meteor where the CSS works fine in creating a shadow effect and adding a border to various images as they are hovered; specifically, in the Meteor prototype (it's a Sharepoint app, but testing features like this out is much quicker with Meteor) I have this CSS:
#imgPostTravelTop:hover, #imgPostTravelTopRight:hover, #imgPostTravelCenter:hover, #imgPostTravelBottom:hover {
z-index: 4;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;
border: 1px solid gold;
}
It works fine - on mouseenter / hovering into an image, it grows a golden five O'Clock shadow.
However, virtually the same thing in the Sharepoint code:
.finaff-form-help-post-travel-centerimage:hover,
.finaff-form-help-post-travel-bottomimage:hover {
z-index: 4;
-moz-box-shadow: inset 0 0 7px #000;
-webkit-box-shadow: inset 0 0 7px #000;
box-shadow: inset 0 0 7px #000;
border: 1px solid gold;
}
...only works in Chrome and Firefox (not in IE8).
I tried this, which supposedly works in IE8:
#imgPostTravel:hover {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}
...but it doesn't work (does not add a box-shadow to IE8).
Is there anything I can to do get a box-shadow to work in IE8?
You can try #thirtydot answer:
Use CSS3 PIE, which emulates some CSS3 properties in older versions of IE.
It supports box-shadow (except for the inset keyword).
EDIT:
or you can try #Marcus Pope answer :
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);
Possible duplicate of
Box shadow in IE7 and IE8
CSS3 Box Shadow Effect for IE8?
You are trying to make an inset boxshadow in Internet Explorer 5.5 through 8.
This is completely possible.
Here is a code example with explanations:
(THIS WILL ONLY SHOW UP RIGHT IN INTERNET EXPLORER 5.5 - 8):
#box {
/* Make sure to set it to min-width so you can push the outside "Microsoft Shadow" out of the screen to the left, right, bottom, and top, because the shadow adds pixels to the 100% width whether you set it to width:100% or not, but if you set it to 100% width, you won't be able to make the margin push the outside shadow out. */
min-width: 100%;
/* For some reason, the above rule is not the case for height. I'm not sure why for Internet Explorer. */
height:100%;
position: relative;
/* I discoverd the shadow won't even appear unless there is a boder of the same div. That's no big deal, just push the boder out too, along with the bleeding outside Mirosoft Shadow". */
border: solid 1px black;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=270);
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
margin-bottom: -39px;
margin-right:130px;
}
.box-parent-fix {
/* This appears to be a hack as far as I know, the bleeding Microsoft Shadow (not the inset part, the outside part is what I'm talking about) will only be pushed out if it has a parent with the follow CSS: */
position: relative;
min-width: 100%;
height: 100%;
}
.box-parent {
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
margin-top:-49px;
margin-left:-45px;
height:100%;
min-width:100%;
background-color: white;
position: relative;
}
body {
position: relative;
height: 100%;
min-width:100%;
/* This hides the pushed out bleeding non-inset Microsoft Shadow. Please excuse my ugly sentence, haha. */
overflow-y: hidden;
overflow-x: hidden;
}
<body>
<div class="box-parent-fix">
<div class="box-parent">
<div id="box">
</div>
</div>
</div>
</body>
Here is a screenshot of it working in Internet Explorer 6:
Here is a screenshot of it working in Internet Explorer 8:
Facing issue while rendering RGBA color for border. RGBA color for border radius working fine but not border color and it is not showing any border color.
Is there any separate "-pie-" tag in CSSPie for use of RGBA in borders?
My Code:
.border{
position:absolute;
right: 250px;
top: 250px;
width: 400px; height:100px;
z-index: 9999;
border: 3px solid rgba(52, 52, 52, 0.3);
border-radius: 10px; -moz-border-radius: 10px;
behavior: url(PIE.htc);
}
Not able to see the border in IE 7 & 8... Can you help?
Thanks in advance!
For Border-radius issue you have to apply the styles position:relative; and z-index:0; for that element. Hope this will work.
Unfortunately this is not (yet) supported in PIE. If/when it does get implemented, it will undoubtedly require a separate -pie-border or -pie-border-color property, because IE's parser will throw away the entire border value if it contains the unrecognized rgba string.
Here is the ticket tracking this feature: https://github.com/lojjic/PIE/issues/55
My educated guess is that IE7 and IE8 only support rgb() and not rgba(), and that would be why the border was not showing.
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 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.
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.