Асенов

В последно време все по – актуален става 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 пъти със съответните префикси, което прави неудобно за използване тези декларации.

[Show as slideshow]

[View with PicLens]

В примерите тук ще използвам 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

 <title>Border radius</title>

 <link rel="stylesheet" type="text/css" href="./css/reset.css" />
 <link rel="stylesheet" type="text/css" href="./css/border_radius.css" />

</head>
<body>
<div id="wrapper">
 <div id="header"></div>
 <div id="content">
 <div class="items" >

 <div class="item example1">
 <h2>Element with border radius example1</h2>
 <p>Този елемент съдържа клас example1, където border-radius е 20px. Т.е border-radius: 20px;</p>
 </div>

 <div class="item example2">
 <h2>Element with border radius .example2</h2>
 <p>Съдържа клас example2, css декларация:<br />
 <pre></pre>
 </p>
 </div>

 <div class="item example13">
 <h2>Element with border radius .example3</h2>
 <p>Този елемент има клас example3.</p>
 </div>

 <div class="item example4">
 <h2>div.example4</h2>
 <p></p>
 </div>

 <div class="item example5"></div>

 <div class="item example6"></div>

 <div class="item example7" ></div>

 <div class="item example8"></div>

 <div class="item example9" ></div>

 <div class="item example10" ></div>

 <div class="item example11"></div>

 <div class="item example12" ></div>

 <div class="item example13"></div>

 <div class="item example14" ></div>

 <div class="item example15" ></div>

 <div class="item example16" ></div>

 <div class="item example17"></div>

 <div class="item example18" ></div>

 <div class="item example19"></div>

 <div class="item example20" ></div>
 </div>
 </div>
 <div id="footer"></div>
</div>
 <!-- /#wrapper -->
</body>
</html>

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

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

Tags: CSS, css3, HTML