Закръглените ъгли, чрез използване на 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\");
}
Моля влезте, за да коментирате.
|
Рейтингите са достъпни само за регистрирани.
Моля влезте или се регистрирайте за да гласувате.
Няма оценки.
|