вопрос
Я видел на одном из сайтов красивые закруглённые уголки, но при сохранении исходного кода я ничего не понял. Мне сказали, что это сделано с помощью jquery. Подскажите как лучше и проще сделать закруглённые углы?
На самом деле очень просто!
Открываем файл main.tpl и добавляем перед
следующий код:
Далее открываем style.css и пишем следующее:
где corner.png это примерно вот такая длинная "сосиська"
bg_block.gif - картинка высотой 1px и шириной 600px - для создания фона.
10px - высота картинки corner.gif делённая на 2, оно же радиус закругления углов.
В .tpl пишем чтото типа этого:
Таким образом при обработке блоков с классом .corner внутрь будет добавлен дополнительный код, отвечающий за 4 угла. При этом в TPL будет только 1 div, а в случаи отключения javascript в браузере ничего особенно страшного не произойдёт.
UPD 10.07.2011
можно ещё воспользоваться библиотекой, предложенной в комментариях: RoCon
Открываем файл main.tpl и добавляем перед
</head>
следующий код:
<script type="text/javascript">
$(function (nice_corners) {
$('div[class*=corner]').append('<abbr class="tr"><abbr class="tl"></abbr></abbr><abbr class="br"><abbr class="bl"></abbr></abbr>');
});
</script>
Далее открываем style.css и пишем следующее:
.corner abbr {display:block; position:absolute; height:10px; background-image: url(../images/corner.png);}
.corner abbr.tr {top:0; right:0; background-position:100% 0; width: 100%;}
.corner abbr.tl {top:0; left:0; width: 10px;}
.corner abbr.br {bottom:0; right:0; background-position:100% 100%; width: 100%;}
.corner abbr.bl {bottom:0; left:0; background-position:0 100%; width: 10px;}
.block {
background: #f1f1f1 url(../images/br_news.gif) repeat-y 0 0;
padding: 10px 14px;
position: relative;
width: 600px;
}где corner.png это примерно вот такая длинная "сосиська"
bg_block.gif - картинка высотой 1px и шириной 600px - для создания фона.
10px - высота картинки corner.gif делённая на 2, оно же радиус закругления углов.
В .tpl пишем чтото типа этого:
<div class="block corner">
тут контент
</div>
Таким образом при обработке блоков с классом .corner внутрь будет добавлен дополнительный код, отвечающий за 4 угла. При этом в TPL будет только 1 div, а в случаи отключения javascript в браузере ничего особенно страшного не произойдёт.
UPD 10.07.2011
можно ещё воспользоваться библиотекой, предложенной в комментариях: RoCon
