I'm writing a responsive app, so i want it to work on every browser. I found out that using box-shadow doesn't work on safari, so I used -webkit-box-shadow
I tried to use it this way :
.adresseinput{
height:50px;
background-color: white;
border-radius: 10px;
border: 2px solid white;
box-shadow: 0 0 0 3px red inset;
-webkit-box-shadow: 0 0 0 3px red inset;
outline: none;
}
but it doesn't work at all, any idea why ? And how can I fix this?
Edit : if you want more precision, i'm looking forward to do something like a french city pannel in css (a white input with a red inside border that is not glued to the limit of the input). Sorry if i made an english mistake
If you read the notes and known issues listed here you'll see that 0px pixel blur-radius, blur-radius in general, and inset are problematic in certain versions of Safari.
Safari:
3.1
3.2
6
iOS
3.2
6
I would see if you can isolate the issue by testing against inset and blur-radius individually on your target platform.
Also mentions iOS 8 has a zoom related bug.
Related
Border example
border: 1px solid #d9d9d9;
Box-shadow example
box-shadow: inset 0 0 0 1px #d9d9d9;
If site is build for modern browser, is box-shadow a perfect alternative to border?
A border is part of the element and influences its size. A shadow does not.
Also, browser support for old browsers might be missing.
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'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
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.