html - CSS3 multiple backgrounds across selectors -
what want achieve set background in 2 separate css classes (using css3's multiple backgrounds great). little markup possible , universal.
example:
css
.button { display: block; } .green { background-color: #87b400; background: -moz-linear-gradient(top, #a4d400, #739e00); } .icon { background-repeat: no-repeat; } .icon.add { background-image: url('../img/icons/add.png'); }
html
<a href="#" class="button green icon add">add item</a> <input type="submit" name="example" value="add item" class="button green icon add" /> <button type="submit" class="button green icon add">add item</button>
i realize can that
<a href="#" class="button green"><span class="icon add">add item</span></a>
but think there better way , wouldn't able use inside input
element.
i don't want this
.button.green.icon.add { background: -moz-linear-gradient(top, #a4d400, #739e00), url('../img/icons/add.png'); }
because having, let's say, 5 colors , 11 icons going horror.
it understanding css3 multiple image backgrounds possible in same declaration.
Comments
Post a Comment