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.

http://www.w3.org/tr/css3-background/#layering


Comments

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

aspxgridview - Devexpress grid - header filter does not work if column is initially hidden -

c# - How to execute a particular part of code asynchronously in a class -