Как сделать закругленные углы у модуля, шаблоны joomla и расширения от Design4free.org

Как сделать закругленные углы у модуля

08.09.2008 г.

Многих интересует вопрос "Как сделать закругленные углы у модуля?"На самом деле вариантов достаточно много, но без знаний css реализовать это может оказаться очень непросто.
Собственно данный способ заключается в том, что мы будем использовать вывод содержимого модуля, обрамленного в 3 div-a, для этого нужную нам позицию модуля будем выводить через <?php mosLoadModules ('...', -3); ?> , обратите внимание на -3 - этот стиль отображения и обеспечавает генерацию нужного нам html кода.

На выходе в html у нас получается
<br />
<div class="module"><br />
<div><br />
<div><br />
<div><br />
<br />
</div><br />
</div><br />
</div><br />
</div>
Именно такая конструкция и позволяет на все четыре угла "положить" картинку с уголком, при этом блок модуля будет еще и тянуться по горизонтали в случае, если у Вас резиновый шаблон.

Что нам следует сделать дальше:

в любой подходящей программе (допустим, photoshop) создать 4 уголка нужного радиуса
закачать их в папку images используемого шаблона
в template_css.css шаблона внести следующие стили ( в данном примере будет использован общий класс для всех модулей со стилем вывода -3, для избежания применения этих стилей на другие модули следует в настройках модуля задать какой-либо суффикс модуля или составить индивидуальный селектор и в соответствии с этим подправить приведенный ниже код ).

Код для вставки в Ваш template_css.css
<br />
div.module { background:url(../images/cornet_top_left.jpg) no-repeat
top left #d6d6d6; padding-top:10px; /** Данный отстпуп нужен для того,
чтобы текст не попадал на закругление **/ }<br />
div.module div { background:url(../images/cornet_top__right.jpg) no-repeat top right; }<br />
div.module div div { background:url(../images/cornet_bottom_right.jpg) no-repeat bottom right; }<br />
div.module div div div {
background:url(../images/cornet_bottom_left.jpg) no-repeat bottom left;
padding-bottom:15px; /** Данный отстпуп нужен для того, чтобы текст не
попадал на закругление **/ }

Если требуется градиентный фон, то обе картинки слева нужно сделать, допустим, шириной в 300 пикселей и нужной высоты в соответствии с градиентом, общий фон выбрать так, чтобы он позволил создать разрыв блока с модулем сразу под низом верхних картинок и стыковку с нижними. Т.е в итоге получается эффект растягивания засчет того, что левые картинки обладают большой шириной, а те, что справа просто "замыкают" их.

Вот и есть примерный метод создания закругленных уголков модулям. Хотя, конечно, многое зависит от потребностей, но любой другой метод будет не особо сильно отличаться от данного.