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.
Related
I am trying to create similar to this shadow effects, and inspected CSS in chrome, still i am not getting what i want, my current code is:
.imageShadow {
background: #fff;
-webkit-box-shadow: 0 0 5px 0 #bbb;
box-shadow: 0 0 5px 0 #bbb;
height: 293px;
}
Note: My image height is 293px
Is this will work in all browsers?
Anyone have an idea?
If you mean the nice, curvy dropshadow then CSS at the current state does not allow it. They haven't used CSS to do this, they used image sprites.
Here is a chart that shows compatibility for css box-shadow:
http://caniuse.com/css-boxshadow
IE 9+, Firefox 4+, Safari 5+, and Chrome all support the style.
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 need a hack to tarjet internet explorer lower to 9, or to be more specific; i need a inline CSS hack to tarjet non CSS3 capable browsers
_prop:val -> ie6
*prop:val -> ie6 & ie7
????????? -> ie8 & ie7 & ie8
I am using gradients and images for those browsers, but ie8 does not support it... so i want to load the alternate image only if necessary
(please avoid answers suggesting to use external stylesheet using conditional coments or using javascript. I know that this code would be invalid, but its just for one little thing. Plus i am curious to know if its posible :) )
You don't need a hack, since no current browser supports all of CSS3.
Instead, simply specify fallback properties for older browsers, like this:
#selector {
background: url("gradient.png");
background: gradient(...);
}
I am using gradients in IE8 in a project. It does work !
<style>
#gradient {
color: #fff;
height: 100px;
padding: 10px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #00f, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
}
</style>
for box shadow there seems to be a workaround like this:
.shadow {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=0, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=45, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=90, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=135, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=180, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=225, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=260, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#999999', Direction=305, Strength=2);
-moz-box-shadow: 0 0 5px #222; /*Mozilla-basierte Browser (z.B. Firefox)*/
-webkit-box-shadow: 0 0 5px #222; /*WebKit-basierte Browser (z.B. Safari/Chrome)*/
box-shadow: 0 0 5px #222; /*CSS3 Standard*/
}
for border-radius there is no support until ie9, as far as I know. I'm using several jQuery plugins to achieve border-radius in IE. hope this code helped you !
You need to use this:
prop: val\9
Putting \9 directly at the end of any value will target just IE8 and below
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
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.