Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Закруглённые углы на jquery

Закруглённые углы на jquery


     21.06.2011    Стили (CSS)    3510

вопрос
Я видел на одном из сайтов красивые закруглённые уголки, но при сохранении исходного кода я ничего не понял. Мне сказали, что это сделано с помощью jquery. Подскажите как лучше и проще сделать закруглённые углы?

Ответил: ПафНутиЙ


На самом деле очень просто!

Открываем файл 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 это примерно вот такая длинная "сосиська"

Закруглённые углы на jquery

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
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы