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