К сожалению, на данном этапе, создание простыми средствами, имеется в виду, только, html и css, блоков не с прямыми углами, является проблемой если не номер один при дизайне, верстке web-страниц, то, как минимум номер два, это уж точно.
Как было бы прекрасно, если в не далеком будущем в спецификации "Каскадных таблиц стилей", появилась пара-тройка свойств типа - radius:параметры закругления; corner:параметры наклона угла; приблизительно так в сокращенной форме записи:
.box {
radius: 5 5 5 5;
}
.block {
corner: 45 45 45 45;
}
Принципиальный момент - возможность использовать border, но об этом пока приходиться только мечтать.
Все, о чем пойдет речь ниже, не является эксклюзивом, все придумано давно и не мной ;)
Итак, border-всемогущий.
Простой, минимально возможный html, тоже самое, можно сказать и о css.
Но по порядку:
html
<div class="border"> <div class="top"></div> <p>Текст</p> <div class="bottom"></div> </div>
Как видим, нет ничего сложного.
css
.border {
background-color:#a00;
color:#fff;
font:11px Verdana;
margin:3px 20px;
width:210px;
}
.border p {margin:0;padding:0 8px;}
.top,
.top_r,
.top_l,
.top_no,
.bottom,
.bottom_r,
.bottom_l,
.bottom_no {
background-color:#fff; /* под цвет фона страницы */
border:#fff 7px solid;
font-size:0;
height:0;
}
.top_r,.top_no,.bottom_r,.bottom_no {border-left:0;}
.top_l,.top_no,.bottom_l,.bottom_no {border-right:0;}
.top,.top_r,.top_l,.top_no {border-top:0;}
.bottom,.bottom_r,.bottom_l,.bottom_no {border-bottom:0;}
.top,.top_r,.top_l,.top_no {border-bottom:#a00;}
.bottom,.bottom_r,.bottom_l,.bottom_no {border-top:#a00;}
Стили с группированы таким образом, чтобы настройки требовали минимум усилий. Все они выделены цветом, одинаковый цвет требует одновременного изменения.
7px данный параметр создает эффект наклона, хотя все углы обрезаны под углом 45 градусов.
На скриншоте, представлены не которые варианты возможностей предлагаемых стилей. Для каждого контейнера указан html.
Предложенное решение не является универсальным, но может стать хорошим подспорьем в придании нашим страницам своеобразия и оригинальности. Используя данный прием, мы избегаем, часто не оправданного в не которых случаях применение графики и JavaScript.
|
| пн | вт | ср | чт | пт | сб | вс |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | |||||