css3: border-radius

В последно време все по – актуален става css3, като стандарт с неговите възможности. В този пост ще разгледаме една много удобна декларация, която позволява без да се използват картинки по html и css документа, да може да използват заоблени бордери на елементите. Тази декларация се нарича border-radius, работи с успех и малко фиксове на всички стандартни браузъри. Жалко, че интернет експлорер спира използването на css3, доста потребители са все още са на стари версии на IE, което прави използването на css3 и съвременните web технологии нежелателно. Може да се постигне същият ефект и на по – стари версии браузъри, но това би направило, така че сайта да се отваря по – бавно и би отнело повечко време на разработчиците.

Този пост съдържа примери за border-radius и пояснения, примерният css и html код може да бъде използван направо с копи & пасте за разглеждане и експерименти. Border-radius свойството от css3, позволява да бъдат използвани заоблени и закръглени ъгли на html елементи, без използването на картинки.

Ипозлването на бордер радиус, под различните съвременни браузъри изисква да се окаже поотделно за всеки един браузър декларацията, например:


#wrapper .items .example1 {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
}

Тези префикси се оказват за съответните браузъри:
-moz-border-radius – За mozilla
-webkit-border-radius – Например за Google chrome, Safari
-khtml-border-radius – Оказваме на khtml базираните браузъри, като Konqueror

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

Браузъри, който поддържат border-radius:
– Internet explorer 9
– FireFox от версия 1.0, с използване на префикс -moz. От версия 4 ще се поддържа декларации без префикс -moz
– Konqueror – с префикс -khtml
– Opera – от версия 10.05
– Safari – от версия 3.0 – до версия 5.0 изисква префикс -webkit
– Chrome – от версия 0.2 – до версия 4.0 изисква префикс -webkit

Стойностите биха могли да бъдат декларирани така:
border-top-left-radius (a), border-top-right-radius (b), border-bottom-right-radius (c), border-bottom-left-radius (d), но за такива декларации, означава, че за всяка една от страните ще се повтаря по 4 пъти със съответните префикси, което прави неудобно за използване тези декларации.

В примерите тук ще използвам reset.css, border_radius.css и border-radius.html

Файл: css/border_radius.css


body {
 font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#wrapper {
 width: 970px;
 margin: 0 auto;
}
#wrapper .items {
 width: 100%;
}
#wrapper .items .item {
 width: 200px;
 height: 200px;
 background-color: #454545;
 padding-top: 20px;
 padding-left: 20px;
 color: #FFF;
 float: left;
 margin-bottom: 10px;
 margin-left: 10px;
 border: 1px solid red;
}
#wrapper .items .item h2 {
 font-size: 18px;
 margin-bottom: 10px;
}
#wrapper .items .example1 {
 border-radius: 20px;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 -khtml-border-radius: 20px;
}
#wrapper .items .example2 {
 border-radius: 20px 20px 0px 0px;
 -moz-border-radius: 20px 20px 0px 0px;
 -webkit-border-radius: 20px 20px 0px 0px;
 -khtml-border-radius: 20px 20px 0px 0px;
}
#wrapper .items .example3 {
 border-radius: 0px 0px 20px 20px;
 -moz-border-radius: 0px 0px 20px 20px;
 -webkit-border-radius: 0px 0px 20px 20px;
 -khtml-border-radius: 0px 0px 20px 20px;
}
#wrapper .items .example4 {
 border-radius: 20px 0px;
 -moz-border-radius: 20px 0px;
 -webkit-border-radius: 20px 0px;
 -khtml-border-radius: 20px 0px;
}
#wrapper .items .example5 {
 border-radius: 0px 20px;
 -moz-border-radius: 0px 20px;
 -webkit-border-radius: 0px 20px;
 -khtml-border-radius: 0px 20px;
}
#wrapper .items .example6 {
 border-radius: 200px;
 -moz-border-radius: 200px;
 -webkit-border-radius: 200px;
 -khtml-border-radius: 200px;
}
#wrapper .items .example7 {
 border-radius: 250px 250px 0px 0px;
 -moz-border-radius: 250px 250px 0px 0px;
 -webkit-border-radius: 250px 250px 0px 0px;
 -khtml-border-radius: 250px 250px 0px 0px;
}
#wrapper .items .example8 {
 border-radius: 0px 0px 250px 250px;
 -moz-border-radius: 0px 0px 250px 250px;
 -webkit-border-radius: 0px 0px 250px 250px;
 -khtml-border-radius: 0px 0px 250px 250px;
}
#wrapper .items .example9 {
 border-radius: 250px 0px 0px 0px;
 -moz-border-radius: 250px 0px 0px 0px;
 -webkit-border-radius: 250px 0px 0px 0px;
 -khtml-border-radius: 250px 0px 0px 0px;
}
#wrapper .items .example10 {
 border-radius: 0px 250px 0px 0px;
 -moz-border-radius: 0px 250px 0px 0px;
 -webkit-border-radius: 0px 250px 0px 0px;
 -khtml-border-radius: 0px 250px 0px 0px;
}
#wrapper .items .example11 {
 border-radius: 500px 0px 500px 0px;
 -moz-border-radius: 500px 0px 500px 0px;
 -webkit-border-radius: 500px 0px 500px 0px;
 -khtml-border-radius: 500px 0px 500px 0px;
}
#wrapper .items .example12 {
 border-radius: 0px 500px 0px 500px;
 -moz-border-radius: 0px 500px 0px 500px;
 -webkit-border-radius: 0px 500px 0px 500px;
 -khtml-border-radius: 0px 500px 0px 500px;
}
#wrapper .items .example13 {
 border-radius: 0px 0px 0px 250px;
 -moz-border-radius: 0px 0px 0px 250px;
 -webkit-border-radius: 0px 0px 0px 250px;
 -khtml-border-radius: 0px 0px 0px 250px;
}
#wrapper .items .example14 {
 border-radius: 0px 0px 250px 0px;
 -moz-border-radius: 0px 0px 250px 0px;
 -webkit-border-radius: 0px 0px 250px 0px;
 -khtml-border-radius: 0px 0px 250px 0px;
}
#wrapper .items .example15 {
 border-radius: 0px 500px 0px 500px;
 -moz-border-radius: 0px 500px 0px 500px;
 -webkit-border-radius: 0px 500px 0px 500px;
 -khtml-border-radius: 0px 500px 0px 500px;
}
#wrapper .items .example16 {
 border-radius: 500px 0px 500px 0px;
 -moz-border-radius: 500px 0px 500px 0px;
 -webkit-border-radius: 500px 0px 500px 0px;
 -khtml-border-radius: 500px 0px 500px 0px;
}
#wrapper .items .example17 {
 border-radius: 250px 250px 250px 0px;
 -moz-border-radius: 250px 250px 250px 0px;
 -webkit-border-radius: 250px 250px 250px 0px;
 -khtml-border-radius: 250px 250px 250px 0px;
}
#wrapper .items .example18 {
 border-radius: 0px 250px 250px 250px;
 -moz-border-radius: 0px 250px 250px 250px;
 -webkit-border-radius: 0px 250px 250px 250px;
 -khtml-border-radius: 0px 250px 250px 250px;
}
#wrapper .items .example19 {
 border-radius: 250px 0px 250px 250px;
 -moz-border-radius: 250px 0px 250px 250px;
 -webkit-border-radius: 250px 0px 250px 250px;
 -khtml-border-radius: 250px 0px 250px 250px;
}
#wrapper .items .example20 {
 border-radius: 250px 250px 0px 250px;
 -moz-border-radius: 250px 250px 0px 250px;
 -webkit-border-radius: 250px 250px 0px 250px;
 -khtml-border-radius: 250px 250px 0px 250px;
}

Файл: border-radius.html

Това е засега от мен, спестявам си малко обяснения по кода, но всичко е написано и се вижда добре. Ако все пак има нещо ще обесня. До скоро и да си актуализирате (update) браузърите!

За повече информация https://www.w3.org/

Comments are closed.

Post Navigation