Потребител Парола | Регистрация | Забравена парола
Меню
· Начало
· Файлове
· Форум
· Връзки
· Категории на уроците
· За контакти
· Фото галерия
· Търсене
Кажи на приятел

Вашия email:
email на приятел:
Копие за вас?
Реклама

Закръгляне на ъгли чрез CSS

CSSЗакръглените ъгли, чрез използване на CSS е един прийом в съвременния уеб дизайн, който се изпозва от много дизайнери. Този урок си поставя за цел да покаже закръглянето на ъглите без да използваме никакви изображения.

Основната идея на тази техника е чрез добавяне на няколко оцветени линиии към елементите, да получим ефект на закръгляване на ъглите. Ето един пример за закръгляне на раздел:

Код
<div id=\"container\">
<b class=\"rtop\">
<b class=\"r1\"></b> <b class=\"r2\"></b> <b class=\"r3\"></b> <b class=\"r4\"></b>
</b>
<!--content goes here -->
<b class=\"rbottom\">
<b class=\"r4\"></b> <b class=\"r3\"></b> <b class=\"r2\"></b> <b class=\"r1\"></b>
</b>
</div>




Ето и кода на CSS:

Код
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}




Имаме необходимост от допълнителни елементи за да създадем закръглени ъгли.Така, че избираме b вместо span, тъй като е по-кратко и не носи в себе си симантично значение.

Тази техника работи дори и с плаващи, абсолютно позиционирани или елементи със зададена процентна широчина. Не може да работи с елементи, които имат фиксирана височина, или с набъбване. И двата проблема могат да бъдат лесно решени с добавянето на един допълнителен пълнител около съдържанието.

Познатите проблеми са: text-indent не работи със закръглени елементи в Opera, и IE.

Поддръжката може да бъде приложена към всички модерни браузери: Тази техника е тествана успешно с Internet Explorer 6, Opera 7.6, FireFox 1.0, Safari 1.1 Mac IE. Но пропада при IE 5.х РС.

Document Object Model (DOM) и javascript

В горния пример видяхме как се получават закръглени ъгли без изображения, използвайки само около 6-8 Кb. Но тъй като тряб ва да се спазват стандартите допълнително изчистваме кода като използваме javascript и DOM.

Следващата стъпка е да премахнем излишния b елемент като го заменим с javascript и DOM, правейки няколко функции, чрез които можем да закръглим почти всички елементи в страницата без да добавяме единичен ред в HTML или CSS отделно от основните правила които видяхме. Нека да погледнем примера Пример 2 Както може да видите от сорс кода няма допълнителни markup елементи в него. Решението е използването на комбинация от CSS и javascript. Техниката се състои от четери основни части:

1. CSS file за екран:

Код
.rtop,.rbottom{display:block}
.rtop *,.rbottom *{display:block;height: 1px;overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px;height: 2px}
.rs1{margin: 0 2px}
.rs2{margin: 0 1px}




2.CSS file за принтиране:

Код
.rtop,.rbottom{display: none}




3.Javascript library за да получим елегантни закръгления:

Код
function NiftyCheck()
{
if(!document.getElementById || !document.createElement)
return(false);
var b=navigator.userAgent.toLowerCase();
if(b.indexOf(\"msie 5\")>0 && b.indexOf(\"opera\")==-1)
return(false);
return(true);
}

function Rounded(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
var l=v.length;
for(i=0;i AddBottom(v[i],bk,color,size);
}
}

function RoundedTop(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
for(i=0;i AddTop(v[i],bk,color,size);
}

function RoundedBottom(selector,bk,color,size){
var i;
var v=getElementsBySelector(selector);
for(i=0;i AddBottom(v[i],bk,color,size);
}
function AddTop(el,bk,color,size){
var i;
var d=document.createElement(\"b\");
var cn=\"r\";
var lim=4;
if(size && size==\"small\"){ cn=\"rs\"; lim=2}
d.className=\"rtop\";
d.style.backgroundColor=bk;
for(i=1;i<=lim;i++){
var x=document.createElement(\"b\");
x.className=cn + i;
x.style.backgroundColor=color;
d.appendChild(x);
}
el.insertBefore(d,el.firstChild);
}

function AddBottom(el,bk,color,size){
var i;
var d=document.createElement(\"b\");
var cn=\"r\";
var lim=4; if(size && size==\"small\"){ cn=\"rs\"; lim=2}
d.className=\"rbottom\";
d.style.backgroundColor=bk;
for(i=lim;i>0;i--){
var x=document.createElement(\"b\");
x.className=cn + i;
x.style.backgroundColor=color;
d.appendChild(x);
}
el.appendChild(d,el.firstChild);
}

function getElementsBySelector(selector){
var i;
var s=[];
var selid=\"\";
var selclass=\"\";
var tag=selector; var objlist=[]; if(selector.indexOf(\" \")>0){ //descendant selector like \"tag#id tag\"
s=selector.split(\" \");
var fs=s[0].split(\"#\");
if(fs.length==1) return(objlist);
return(document.getElementById(fs[1]).getElementsByTagName(s[1]));
}

if(selector.indexOf(\"#\")>0){ //id selector like \"tag#id\"
s=selector.split(\"#\");
tag=s[0];
selid=s[1];
}
if(selid!=\"\"){
objlist.push(document.getElementById(selid));
return(objlist);
}
if(selector.indexOf(\".\")>0){ //class selector like \"tag.class\"
s=selector.split(\".\");
tag=s[0];
selclass=s[1];
}
var v=document.getElementsByTagName(tag); // tag selector like \"tag\"
if(selclass==\"\")
return(v);
for(i=0;i if(v[i].className==selclass){
objlist.push(v[i]);
}
}
return(objlist);
}




4. Javascript казва кой от елементите да бъде закръглен.

Първите три компонента нямат нужда от промени. Необходимо е те да бъдат само декларирани в head секцията на всяка HTML страница както следва:

Код
window.onload=function(){
if(!!NiftyCheck())
return;
Rounded(\"div#header\",\"transparent\",\"#C3D9FF\",\"small\");
}



· smilev на January 12 2011 08:00:28 · 0 Коментари · 1739 Прочитания · Отпечатай
Коментари
Няма добавени коментари.
Напиши коментар
Моля влезте, за да коментирате.
Оценка
Рейтингите са достъпни само за регистрирани.

Моля влезте или се регистрирайте за да гласувате.

Няма оценки.
Вход
Потребител

Парола



Не сте регистрирани?
Натиснете тук за регистрация.

Забравена парола?
Натиснете тук за нова.
Анкета
С каква операционна система работите











Трябва да влезете за да гласувате.
ЧАТ
Трябва да влезате за да пуснете съобщение.

Няма съобщения.
Статистика