Скругленные границы через CSS
Боремся с дизайнерскими фантазиями — ищем простые способы верстки скругленных границ и произвольных многоугольников
Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.
В этой статье приводится пара полезных на взгляд автора рецептов. Возможны вы уже с ними знакомы, а возможно вынесите для себя что-то новое, решать вам.
1. Скругленные границы
Сразу поясню о чем речь:
Необходимо сверстать этот блок так, чтобы он тянулся по ширине и высоте. Как правило, первое что приходит в голову — сверстать таблицу 3x3. В угловые ячейки положить 4 разных изображения с уголками, в центр поместить контент, а остальным ячейкам повесить соот-ие бордеры. Способ кроссбраузерный и довольно простой. Но во-первых, верстать такие блоки таблицами не по фэншую, а во-вторых можно отказаться от четырех мелких изображений.
Итак, соберем четыре угла в одно изображение. В моем примере получился такой результат (32x26 px):
Теперь нам осталось спозиционировать это изображение в фоне четырьмя разными способами в блоках размером 16x13px, стоящими в углах блока. В результате у автора получилось вот так:
CSS:
HTML:
Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом. Итак, задача решена: мы избавились от таблиц и уменьшили число HTTP-соединений на три, за счет сбора углов в один овал.
источник: fastcoder.org
Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.
В этой статье приводится пара полезных на взгляд автора рецептов. Возможны вы уже с ними знакомы, а возможно вынесите для себя что-то новое, решать вам.
1. Скругленные границы
Сразу поясню о чем речь:
Необходимо сверстать этот блок так, чтобы он тянулся по ширине и высоте. Как правило, первое что приходит в голову — сверстать таблицу 3x3. В угловые ячейки положить 4 разных изображения с уголками, в центр поместить контент, а остальным ячейкам повесить соот-ие бордеры. Способ кроссбраузерный и довольно простой. Но во-первых, верстать такие блоки таблицами не по фэншую, а во-вторых можно отказаться от четырех мелких изображений.
Итак, соберем четыре угла в одно изображение. В моем примере получился такой результат (32x26 px):
Теперь нам осталось спозиционировать это изображение в фоне четырьмя разными способами в блоках размером 16x13px, стоящими в углах блока. В результате у автора получилось вот так:
CSS:
.roundborder { border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB;} .roundborder .content { border-left:1px solid #DBDBDB; border-right:1px solid #DBDBDB; text-align:center; color:#7A7A7A; padding:10px 15px; } .roundborder .t, .roundborder .b { position:relative; height:12px; } .roundborder .t div, .roundborder .b div { position:absolute; width:16px; height:13px; padding:0; margin:0; } .roundborder .t .l { top:-1px; left:0; background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top left; } .roundborder .t .r { top:-1px; right:0; background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) top right; } .roundborder .b .l { background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom left; bottom:-1px; left:0; } .roundborder .b .r { background:#FFF no-repeat url(http://fastcoder.org/demo/angles.gif) bottom right; bottom:-1px; right:0; }HTML:
<div class="roundborder"> <div class="t"> <div class="angles l"></div> <div class="angles r"></div> </div> <div class="content"> Content </div> <div class="b"> <div class="angles l"></div> <div class="angles r"></div> </div></div>Изначально углы были сверстаны через 4 ДИВа, разбросанных по углам, и всё бы хорошо, если бы не одно НО — IE6. В нем этот номер не пролез, пришлось всё переверстывать таким вот образом. Итак, задача решена: мы избавились от таблиц и уменьшили число HTTP-соединений на три, за счет сбора углов в один овал.
источник: fastcoder.org
1 Комментарии