MitrichLab.Ru - сайт Joomla! программиста

Хочу поделиться некоторыми своими наработками с коллегами "по цеху". Вопросы закругленных углов, тянущихся фонов и т.д. поднимаются довольно часто, вызывают повышенный интерес в связи с широким диапазоном возможностей и относительной легкостью, я бы сказал шаблонизацией (ну можно ещё назвать - кирпичностью) применения элементов, т.к. внешний вид элементов легко меняется посредством CSS. К моему глубокому сожалению, детальных рекомендаций по данному вопросу встречается крайне мало, к тому же большинство из них на английском языке. Предлагаю ниже описанный способ как один из вариантов.
Итак, приступим...
Два вложенных объекта. Растягивающаяся кнопка
Наша задача создать кнопку с закругленными краями, растягивающуюся по ширине в зависимости от текста кнопки.
Простейший пример: нам нужна кнопка следующего вида.

Сначала подготовим картинку фона. Ширина картинки должна быть заведомо шире максимальной ширины кнопки.
В результате мы должны получить две картинки

Для реализации такой кнопки (если это не просто растягивающийся элемент) нам нужна следующая конструкция.

<a class="myclass" href="#">

<span> Наш текст </span>

</a>

И CSS к ней

.myclass{

float:left; display:block; height:40px;

background:#fff url(images/slidingdoors/sl_doors_1_l.png) no-repeat left top; text-decoration:none; text-transform:uppercase;

font-family:Arial, Helvetica, sans-serif;

font-weight:bold;

font-size:14px;

color:#FFF;

margin-right:5px;

}

.myclass:hover {

color:#600;

}

span {

display:block;

height:30px;

background:url(images/slidingdoors/sl_doors_1_r.png) no-repeat right top;

padding:10px 15px 0 15px;

}

Реализацию кнопок можно увидеть здесь