Я тоже когда-то наткнулся на такой трюк, потом расковырял всё это дело и понял, в чём тут фикус. Подробно не буду описывать, т.к. лень, но если кто-то захочет в этом разобратся сам - опишу.
Взамен хотел бы скинуть вам простую функцию, которая просто поможет всё это понять.
function createEle(ele,tag,className){
var e=document.createElement(tag);
e.className=className;
ele.appendChild(e);
}
function createRainbow(e,top){
var r=createEle(e,'div',(top)?'rtop':'rbottom');
if(top) for(i=14;i>=0;i--) createEle(r,'div','r'+i);
else for(i=0;i<=14;i++) createEle(r,'div','r'+i);
}
Функция createEle просто в помощь, так что не придерацца. Использовать так: 1. У нас есть див (div). 2. В этот див генерим верхние углы: createRainbow(div,true). 3. Вставляем туда див для контента: createEle(div,'div',className). 4. Генерим нижние углы: createRainbow(div). Вот стили:
.r1, .rbottom .r0{
height:1px;
}
.r10 {
margin:0 8px;
height:1px;
}
.r11 {
margin:0 9px;
height:1px;
}
.r12 {
margin:0 11px;
height:1px;
}
.r13 {
margin:0 13px;
height:1px;
}
.r14 {
margin:0 16px;
height:1px;
}
.r2 {
margin:0 1px;
height:3px;
}
.r3{
margin:0 2px;
height:2px;
}
.r4, .r5 {
margin:0 3px;
height:1px;
}
.r6 {
margin:0 4px;
height:1px;
}
.r7 {
margin:0 5px;
height:1px;
}
.r8 {
margin:0 6px;
height:1px;
}
.r9 {
margin:0 7px;
height:1px;
}
.rbottom {
width:100%;
overflow:hidden;
}
.rtop {
width:100%;
overflow:hidden;
}
.rtop div, .rbottom div{
background:#000;
overflow:hidden;
}
Этот пример не претендует на широкое использование. Запостилось для того, чтобы вы сами могли во всём разобраться и не мучиться с левыми библиотеками. После осознования сего, вы сами сможете написать полноценную либу скругления углов у дива. |
Помогите, пожалуйста, разобраться, как работает скрипт с сайта http://fantactuka.net/canvasul/.
Скрипт выдал мне код в виде архива. Я подключила скрипты и файл стилей, прописала div .underlayer - как предлагается. Но ничего не работает - даже на странице ничего не отображается. Как этот скрипт работает? Что я не учла? Кто имел с ним дело, помогите разобраться, плиз... |
Того скрипта там уже нет, там одна реклама. В 19 посте он выложен.
|
Riim, вы точно Рассеянный профессор
Я же написала, что не могу разобраться, как этот скрипт встроить в страницу сайта, а не "дайте ссылку на закачку". |
Цитата:
|
Там только сам скрипт, а никаких примеров нет.
Если не трудно, выложите где-нибудь пример. Может на какой либо файлообменник или в присоединенном архиве. Очень хочется разобраться, как это все работает. |
Цитата:
|
Riim, Вместо того, чтобы помочь страждущему вы играетесь словами.
Ну поигрались... А толку? |
ludmilal, я предлагаю вам еще раз скачать архив из 19-го поста и посмотреть его содержимое с широко открытыми глазами.
|
Скачала еще раз.
Распаковала архив canvasul.zip. Подключила стили и скрипты, который находились в архиве. Так нужен еще и html-код, который вставляется в страницу и который, собственно и образует сам блок - иначе для чего делать эти круглые углы и тени. Какой html-код? |
| Часовой пояс GMT +3, время: 10:24. |