Нaучете се с Lesson2Me.Com

Закръгляне на ъгли чрез CSS
Публикувана от smilev на January 12 2011 08:00:28

Разширена новина

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

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

[code]<div id="container">

 



 

</div>[/code]

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

[code].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}[/code]

Имаме необходимост от допълнителни елементи за да създадем закръглени ъгли.Така, че избираме 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 за екран:

[code].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}[/code]

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

[code].rtop,.rbottom{display: none}[/code]

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

[code]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);
}[/code]

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

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

[code]window.onload=function(){
if(!!NiftyCheck())
return;
Rounded("div#header","transparent","#C3D9FF","small");
}[/code]