Сайт для хорошего несварения
« Русская Водочная Церемония | Чубчик ХОРОНЬКО ОРКЕСТР »

Закруглённые углы элементов веб-страницы
3 апреля 2011 (316 дней 23 часа назад)


Закруглённые углы элементов веб-страницы несомненно улучшают визуальное восприятие и придают сайту более современный и привлекательный вид.Существует масса техник позволяющих сглаживать и закруглять уголки. У каждой из них есть свои достоинства и недостатки. В большинстве случаев визуальное закруление осуществляется посредством внедрения нескольких графических элементов в тело другого элемента, например тега DIV или TABLE. К сожалению данная техника является крайне громоздкой, трудоёмкой и негибкой, особенно когда речь идёт о множестве подобных элементов разного размера и оформления на одной странице.
Наиболее простым вариантом получения эффекта сглаженных углов может стать использование языка разметки CSS (Cascading Style Sheets — каскадные таблицы стилей).

Следующие комманды полностью реализуют эффект закругления для подавляющего большинства современных браузеров таких, как google chrome, Mozilla Firefox, Opera и .т.д.

CSS:
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;

На обе ноги, как всегда, хромает незаслуженно популярный Internet Exsplorer, где эффекты закругления и оттенения на уровне CSS реализованы только в 9-ой версии. О том как легко и надёжно лечится сей недуг и пойдёт речь ниже.

На данный момент существует немало библиотек позволяющих без особого труда и излишнего программирования получать довольно симпатичные эффекты закруглённых углов, а так же эффект оттенения, которые одинаково прилично работают как браузерах на основе движков WebKit и Gecko, так и в упрямом ослике IE (Internet Explorer), таким образом реализуя кроссбраузерность.

К подобным библиотекам можно отнести крайне популярный jQuery с его плагинами , а также наиболее приглянувшийся мне css3pie о котором, собственно я и хочу рассказать.

Реализация:

1. Закачиваем библиотеку на сайте автора link
2. Прописуваем соответствующие комманды CSS3:

#myAwesomeElement {
border: 3px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

3. Включаем библиотеку в HTML :
behavior: url(path/to/PIE.htc);

Либо, что на мой взгляд предпочтительнее:
<script type="text/javascript" src="path/to/PIE.js"></script>
$(function() { $('.rounded').each(function() { PIE.attach(this); });});


И окончательный пример с закруглением и оттенением
background: #FFF2D9;
border: 2px solid #FECAB8;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(libs/PIE.htc);

«
Добавить комментарий к «Закруглённые углы элементов веб-страницы»
Имя

E-mail

Домстраница





[b]Жирный[/b]
[i]Наклонный[/i]
[u]Подчеркнутый[/u]
[del]Зачеркнутый[/del]
[q]Цитата[/q]
 


  20 САМЫХ ЧИТАЕМЫХ


  Яндекс цитирования