Here is my link: link text
The shadow on the slider looks great in safari, firefox, etc., but how do I make it look the same in IE?
Here is my current CSS code:
-moz-box-shadow: 0px 0px 6px #666;
-webkit-box-shadow: 0px 0px 6px #666;
box-shadow: 0px 0px 6px #666;
Try this it works in IE 6+ too
.shadow { zoom:1; /* This enables hasLayout, which is required for older IE browsers */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);
-moz-box-shadow:2px 2px 2px #b0b0b0;
-webkit-box-shadow:2px 2px 2px #b0b0b0;
box-shadow:2px 2px 2px #b0b0b0;}
You can try CSS3PIE, it adds a bunch of CSS3-isms to IE. CSS3PIE usually works but not always and there is a bit of a performance hit. You might have to deal with "haslayout" hacks but a bit of googling should help with those.
There are a few similar things kicking around but I've only used CSS3PIE.
My opinion is better you use shadow images so that it works fine in IE too....
Related
I want to achieve this text style like so:
I want to wrap the text with color white like the image above I tried using
text-shadow: 0px 0px 5px #fff;
but it turns out that the shadow will get blurry. Is there any chance that I can do it using css (if so how)? or should I just convert it into image?
You can simulate it, doing like this:
CSS
span{
text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;
}
DEMO HERE
The effect you seek is called stroke and sadly not possible (yet) with CSS in a cross browser compatible way.
Faking it with shadows will not work for a stroke thicker than 1 or 2 pixels, or require a ton of layered shadows, slowing down rendering. Other faking techniques are possible but not quite fantastic.
For now the best bet remains to use images for the rare occasions where this is useful.
Ran into this today and at least for Webkit browsers, there's a better solution. You can follow this old article using the code
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
and also try using text shadows with it. It worked well for me after some pixel-pushing. I have some bigger letters, so I ended up using a text shadow like this
text-shadow: 4px 4px 0px #010000, 2px 3px 0px #010000, 4px 5px 0px #010000, 4px 6px 0px #010000;
I hope that helps!
Can anyone please tell me the equivalent of filter:Glow(Color=#000000, strength=2); for Firefox, Opera, Safari and Chrome?
I'm guessing you're either looking for
text-shadow: 0px 0px 2px white;
or
box-shadow: 0px 0px 2px white;
You might need to stick a vendor prefix onto that.
In Firefox if I put an image in an element and then use border-radius, Firefox clips the image and it looks great! Works the same way in IE9 (amazing!). In Chrome (or any webkit browser) the border is rounded but it doesn't clip the image and it looks horrible. What am I doing wrong?
border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
Put it into a div?
And style them seperately.
http://jsfiddle.net/Stijntjhe/bFECN/1/
I don't believe the spec is defined well in this scenario, hence the two different results.
When you don't have padding, WebKit will clip the image based on the border radius. See: http://jsfiddle.net/bFECN/5/
However there isn't anything in the spec that says that the padding must also be a part of the radius drawing.
This question was posted more than one year ago and webkit has the same problem with border radius support with images. So I solve this with a small trick, instead of use css borders, I change the method using double box-shadow. In your case should be something like this.
-webkit-box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 4px #bdbdbd;
-moz-box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 4px #bdbdbd;
box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 4px #bdbdbd;
border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
I am trying to use the following two properties in my styles.css:
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
It comes up with the following message.
They are not known css properties.
You get that message beacause these are css3 properties.
To check it's validity use:
http://jigsaw.w3.org/css-validator/validator?uri=EXAMPLE.COM/STYLE.CSS&profile=css3
replace EXAMPLE.COM/STYLE.CSS with url to your css file.
If you have those errors in your browser you need to use the more border-radius types because all the browsers have there own.
an example for border-radius:
-webkit-border-radius: 5px; /* Safari and webkit */
border-radius: 5px; /* Opera, Chrome */
-moz-border-radius: 5px; /* Mozilla (FF, Seamonkey) */
an example for box shadow:
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
Support for these CSS3 properties is growing, but a lot of browsers don't have it yet.
The latest Opera has the capability, Safari, Chrome and Firefox too but they require custom properties.
The best approach is to duplicate each property, once with the prefix -moz- and once with the prefix webkit-. Always write the standards compliant rule last. Like this:
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*w3c border radius*/
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
You can check which browser supports what on Standardista.
I believe that's a Visual Studio error message, right? If so, just ignore it. But do add browser specific versions of those rules to your css for older browsers. e.g. -webkit-border-radius and -moz-border-radius etc.
Is it possible to remove a style in the case that browser specific CSS 3 items (drop shadows, rounded corners, etc.)? For example:
.fancy
{
/* only display if no drop shadow support */
border: thin solid #888;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
It's better if you don't remove style rules, but only apply them when CSS3 is enabled. You could use this fancy piece of Javascript for it, called Modernizr.
Let me give you a quick example of how you could use it in your stylesheet:
.boxshadow .fancy {
border: thin solid #888;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
Modernizr adds classes to the HTML element, which tells you what browser functionalities are enabled.
CSS doesn't do conditionals. In any version.
What you can do is dynamically serve up different stylesheets for browsers that support CSS3.
Since CSS3 is style-markup, and not a programming language, you can't do true "if-else"--however you could design your CSS3 styles to override the CSS2 styles, and the end result would be CSS3 where supported with CSS2 as a fallback.
In terms of practicality however, this approach will likely be more painful than dynamically serving CSS3 stylesheets to supported browsers.
One means -though given the patchy nature of css adoption/implementation it might/will not work exhaustively- is to use:
.fancy
{
border: thin solid #888;
}
.fancy:nth-of-type(odd), .fancy:nth-of-type(even)
{
border: 0 none transparent;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
This is a bit messy in that the selector has to explicitly target all the odd and even .fancy elements, I'd prefer a neater solution but it does work (certainly in Chrome/Linux). Demo at: http://jsbin.com/ezako3