Тем не менее, попробуем разобраться - как это делается. Хотя бы ради интереса.
- Я с детства не любил овал, я с детства угол рисовал!
Однако приходится выполнять и заказную работу, поэтому я и попытался подробнее описать способы создания закругленных углов.
Сейчас сделать рамочку можно так:
Код CSS:
.border {
margin : 20px;
padding : 10px;
border:4px outset #000;
background: #F0FFFF;
}
Код HTML:
<div class="border">
Это бокс с рамочкой Это бокс с рамочкой
Это бокс с рамочкой
</div>
Результат:
Можно задать ширину бордюра, тип и цвет, в том числе для разных сторон:
Код CSS:
.border2 {
margin : 20px;
padding : 10px;
border-top:5px solid #D2691E;
border-right:20px solid #A52A2A;
border-bottom:20px solid #000;
border-left:5px solid #D2691E;
background: #E9967A;
}
Код HTML:
<div class="border2">
Это бокс с рамочкой Это бокс с рамочкой
Это бокс с рамочкой
</div>
Результат:
Это сейчас. А вот в светлом будущем с CSS3 можно будет написать:
.border {
margin : 20px;
padding : 10px;
border:4px outset #000;
background: #F0FFFF;
border-radius: 20px;
}
и получить картинку:
Однако когда именно можно будет так просто делать скругления - неизвестно. Спецификация CSS3 только обсуждается и неизвестно, чем всё закончится.
Но зато известно, что "если нельзя, но очень хочется - то можно".
Браузеры, работающие на движках webkit (Safari/Chrome) и gecko (Firefox) уже поддерживают скругленные уголки, хотя и частично и немного по-разному. Для них в атрибуте border-radius нужно подставить префиксы -moz- (для Firefox) и -webkit- (для Safari и Chrome):
.border {
margin : 20px;
padding : 10px;
border:4px outset #000;
background: #F0FFFF;
-moz-border-radius: 2em;
-webkit-border-radius: 20px;
}
Однако другие браузеры скругленные уголки не покажут. Разумеется профессионалы делать страницы, по-разному отображающиеся в разных браузерах не будут.
Именно поэтому дизайнеры разработали "400 сравнительно честных способов" отображать уже сейчас сглаженные уголки. В Интернете можно найти множество статей и рекомендаций по этому вопросу. Желающие могут, например, посмотреть обзор 38 статей о создании закругленных углов на сайтах на http://habrahabr.ru/.
В основном всё сводится к двум принципиальным способам:
1. Вставка в углы картинок.
2. Формирование углов в виде лесенки из дополнительных элементов.
В каждом из этих способов существует множество вариаций, отличающихся, как правило, борьбой с глюками Internet Explorer.
Способ 1 с картинками мы не будем рассматривать, как не интересный. Нас интересует скругление уголков с использованием "чистого" CSS и HTML. Разумеется, мы будем учитывать и особенности MODx.
Итак, в нескольких заметках мы разберем различные варианты, а потом подведем итоги.
Написать комментарий