css - Progressive Enhancement with box-shadow -
i use webkit's box-shadow css property little drop-down. code like:
.drop_down{ -webkit-box-shadow: 1px 1px 4px #888; box-shadow: 1px 1px 4px #888; }
however, browsers not have capability, use borders approximate drop shadow, so:
.drop_down{ border-top: 1px solid #bbb; border-left: 1px solid #bbb; border-right: 2px solid #bbb; border-bottom: 2px solid #bbb; }
the problem is, don't want border-based shadow show browsers support box-shadow. avoid browser sniffing because assume it's hard cover cases. simplest way this? prefer javascript-less solution, consider simple javascript-based ones too.
modernizr feature detection. code be:
.drop_down{ border-top: 1px solid #bbb; border-left: 1px solid #bbb; border-right: 2px solid #bbb; border-bottom: 2px solid #bbb; } .boxshadow .drop_down{ border: 0px none; -webkit-box-shadow: 1px 1px 4px #888; box-shadow: 1px 1px 4px #888; }
you need include modernizr javascript library work.
Comments
Post a Comment