On Wed, 04 Aug 2010 23:43:27 +0100, Martin <[email protected]> wrote:
> Hi there.
>
> Is there any way of imitating it in opera and IE. It works fine in FF
> and Chrome.
>
> .shadowed {
> border: 1px solid #c4c8cc;
> -moz-box-shadow: 3px 3px 7px #999;
> -moz-border-radius-bottomright: 15px;
> -moz-border-radius-topright: 15px;
> -webkit-box-shadow: 3px 3px 7px #888;
> -webkit-border-bottom-right-radius: 15px;
> }
>
>
> Or possibly ignore this class altogether when a user opens it with
> opera/IE?
>
> Thanks a lot.
>
> Martin
For Opera, above 10.10 I think, maybe somewhat earlier versions for some
things,
simply give the rule without any vendor prefix.
e.g box-shadow: ..... and border-radius: ...
the usual recommendation is to give the rules with vendor prefix first,
followed by the 'natural' rule so that when Mozilla and Webkit fully adopt
the property, their browsers will respond to the 'natural' rule and ignore
the prefixed version. Your code above would look like:
.shadowed {
border: 1px solid #c4c8cc;
-moz-box-shadow: 3px 3px 7px #999;
-webkit-box-shadow: 3px 3px 7px #888;
box-shadow: 3px 3px 7px #888;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
}
IE will need some JavaScript to help it along, there are many versions
available of either stand-alone scripts or built into libraries like
jQuery.
A useful little tool that I just found for getting the syntax correct on
border radius is
http://border-radius.com/
Best wishes
Duncan
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
