Довелось мне прошлый месяц озадачится веб-интерфейсом. Со всей начинкой, которая там полагается - кнопочки, табы и иже с ним.
Помимо графической разработки, которая упала на мои плечи, мне пришлось по совместительству заняться версткой этого интерфейса (где познала разницу между дизайнерами-верстальщиками и программистами-верстальщиками, но об этом как-нибудь в другой раз :-) ).В процессе верстки, сделала для себя мини-удобную штуку, эдакие печенюшки - мини фреймворк для домохозяек.
В интерфейсе есть много кнопочек, хороших и разных. Разных габаритов (2 вида габарита) и четыре цветовых решения. Проект , изначально, сам по себе мультиязычный, и обходится деревенскими костылями вроде "запекания картинки-кнопочки для разных языковых версий" это не комильфо ни разу. Посему, пришлось выкручиваться.
рисунок 1. так выглядят кнопочки в макете
вот так выглядит разметка для кнопки
<a href="#"> Leave</a>
Как известно, у элемента может быть один ID и несколько классов. Этим можно как раз грязно воспользоваться - описать габарит кнопки, цветовое решение (это общие классы) и расположение кнопки (дополнительный класс) отдельно.
в классе, который предназначен для габарита кнопки, указываем следующие параметры:
.size {width: ; height: ; display: ;
font-size:; text-align:center ; text-decoration:none ; color: ; }
(где width ,height и font-size разные для разных габаритов)
в классе, который предназначен для цвета, прописываем
.color {backgound:(url'') no-repeat top left }
и при наведении мыши, естественно
.color:hover {backgound:(url'') no-repeat top left }
background, естественно, разный для каждого цветового решения: это картинка - фон кнопки
рисунок2 . фон кнопки - каждому свой
и третий вид класса - расположение. где указываете position, если нужно, или float
в итоге, в сборке, разметка будет выглядеть вот так:
<a href="#" class="size color position"> Leave</a>
Преимущество сей печеньки в гибкости - можно поменять размер, цвет, или расположение кнопки одним мановением ноги или руки.
Или название кнопки. Было Yes, станет No или еще как-нибудь.
При отключенных картинках все будет замечательно читаться и видеться.
Такие дела. Домохозяйки пекут не только пироги, но и вот такие вот печеньки.