Боремся с дизайнерскими фантазиями — ищем простые способы верстки скругленных границ и произвольных многоугольников
Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет немало хлопот верстальщикам. Развивающиеся технологии позволяют создавать в WEBе сложные приложения (Google не даст мне соврать), поэтому дизайнеры себя не сдерживают и рисуют всё более навороченные вещи. Как правило, это приводит к большому количеству графики на страницах.
В этой статье приводится пара полезных на взгляд автора рецептов. Возможны вы уже с ними знакомы, а возможно вынесите для себя что-то новое, решать вам.
1. Скругленные границы
Сразу поясню о чем речь:
Необходимо сверстать этот блок так, чтобы он тянулся по ширине и высоте. Как правило, первое что приходит в голову — сверстать таблицу 3x3. В угловые ячейки положить 4 разных изображения с уголками, в центр поместить контент, а остальным ячейкам повесить соот-ие бордеры. Способ кроссбраузерный и довольно простой. Но во-первых, верстать такие блоки таблицами не по фэншую, а во-вторых можно отказаться от четырех мелких изображений.
Итак, соберем четыре угла в одно изображение. В моем примере получился такой результат (32x26 px):
Теперь нам осталось спозиционировать это изображение в фоне четырьмя разными способами в блоках размером 16x13px, стоящими в углах блока. В результате у автора получилось вот так:
CSS:
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="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-соединений на три, за счет сбора углов в один овал.
2. Углы меньше 90°
Вы видите макет с вот таким блоком:
Первое что приходит в голову: "Чооорт, придется вырезать этот треугольник и как-то прицеплять к блоку". Оказывается не нужно. Прием был подсмотрен в верстке hh.ru, за что верстальщику хэдхантера громадный респект!
Оказывается, границы блока делят совместные углы в равных долях, что позволит создать любые острые углы. Иллюстрация:
Это всего лишь одна строчка HTML/CSS-кода:
Здесь вы найдете более причудливое применение этого приёма. Скриншот для тех, кому лень заглядывать в демку:
За примером использования далеко ходить не надо. Всем знакома морда Яндекса:
Вместо png-шки, которую они используют для создания угла, можно создать такой угол из единственного бордера:
Заключение
Если кто-то желает поделится своими способами решения аналогичных задач — прошу в комменты. Удачи вам в борьбе с дизайнерским произволом!
------
Камрад 40a озадачился и заверстал звезду НАТО и флаг Великобритании. Флаг получился особенно впечатляющим. Скрин:
ЗЫ: не надо ущемлять владельцев доменов в зоне .name (это я про форму регистрации)
С .name-зоной исправлюсь, спасибо!
Можно пример мыла, которое у вас не прошло? Вместо алфавитно-цифровых символов можно указать xxx.
Попробуйте обработчик помимо change еще и на blur повесить - обычно это избавляет от косяков с автозаполнением.
.block {
background-color: #BBCFDF;
color: #1C2C39;
width: 30%; }
.block .hrt, .block .hrb, .block .hrt div, .block .hrb div {
background: url(bg.png) no-repeat 0 0; }
.block .hrt, .block .hrb {
font-size: 1px;
line-height: 1px;
height: 8px;
clear: both; }
.block .hrt div, .block .hrb div {
float: right;
width: 8px;
height: 8px; }
.block .hrb {
background-position: 0 100%; }
.block .hrt div {
background-position: 100% 0; }
.block .hrb div {
background-position: 100% 100%; }
<div class="block">
<div class="hrt"><div></div></div>
<div>content</div>
<div class="hrb"><div></div></div>
</div>
Поменьше кода получается...
А с закруглениями мы у себя прикинули сколько надо верстки перелопачивать, проект большой и очень не оправдано. Сделали все парой строчек через css3. А так как проект интранетовский то мы оставляем за собой право рекомендуемого браузера, такое решение иногда получается, да и у ИЕ постоянно снижается популярность :)
Насчёт бордеров - спасибо, не знал о таком свойстве.
Но вот скруглённые углы могут потерпеть, так как на функциональность не влияют. И это - лучше, чем плодить дивы, по крайней мере в случае простых скругленных углов. Лишь бы заказчик с этим также был согласен.
Иное дело - если уголки имеют более сложную форму. Зазубрины какие-нибудь, к примеру. Тогда описанный метод очень пригодится.
С 4 блоками из бордюров можно получить звезду НАТО.
height:200px;
position: relative;">
<div style="border-top:80px solid #fff;
border-left:80px solid #fff;
border-bottom:20px solid #00aeef;
border-right:20px solid navy;
width:0;
line-height:0;
position: absolute;
left:0;
top:0;">
</div>
<div style="border-top:80px solid #fff;
border-left:20px solid #00aeef;
border-bottom:20px solid navy;
border-right:80px solid #fff;
width:0;
line-height:0;
position: absolute;
right:0;
top:0;">
</div>
<div style="border-top:20px solid navy;
border-left:80px solid #fff;
border-bottom:80px solid #fff;
border-right:20px solid #00aeef;
width:0;
line-height:0;
position: absolute;
left:0;
bottom:0;">
</div>
<div style="border-top:20px solid #00aeef;
border-left:20px solid navy;
border-bottom:80px solid #fff;
border-right:80px solid #fff;
width:0;
line-height:0;
position: absolute;
right:0;
bottom:0;">
</div>
</div>
height:200px;
position: relative;">
<div style="border-top-width:0;
border-left:100px solid #FFF;
border-bottom:100px solid #0AF;
border-right-width:0;
width:0;
line-height:0;
position: absolute;
left:0;
top:0;">
</div>
<div style="background-color:#00F;
border-top:1px solid #0AF;
border-right:1px solid navy;
width:100px;
line-height:100px;
position: absolute;
right:0;
top:0;
text-align:center;
color:#FFF"> Эффект куба
</div>
<div style="border-top-width:0;
border-left:100px solid #0AF;
border-bottom:100px solid navy;
border-right-width:0;
width:0;
line-height:0;
position: absolute;
left:0;
bottom:0;">
</div>
<div style="border-top-width:0;
border-left:100px solid navy;
border-bottom:100px solid #FFF;
border-right-width:0;
width:0;
line-height:0;
position: absolute;
right:0;
bottom:0;">
</div>
</div>
И уже полностью моё: Вкладки со скошенными углами. На всех сайтах используют картинки. Применим вышеописанный способ:
border-top-width: 0; border-right-width: 0; border-left: 10px solid #FFFFFF; border-bottom: 20px solid #0033CC;"></div>
<div style="float: left; height: 20px; background-color: #0033CC;">Главная</div>
<div style="float: left; width: 0; line-height: 0;
border-top-width: 0; border-left-width: 0; border-right: 10px solid #9988FF; border-bottom: 20px solid #0033CC;"></div>
<div style="float: left; height: 20px; background-color: #9988FF;">Описание</div>
<div style="float: left; width: 0; line-height: 0;
border-top-width: 0; border-left-width: 0; border-right: 10px solid #9944FF; border-bottom: 20px solid #9988FF;"></div>
<div style="float: left; height: 20px; background-color: #9944FF;">Фотографии</div>
<div style="float: left; width: 0; line-height: 0;
border-top-width: 0; border-left-width: 0; border-right: 10px solid #9900FF; border-bottom: 20px solid #9944FF;"></div>
<div style="float: left; height: 20px; background-color: #9900FF;">Вход</div>
<div style="float: left; width: 0; line-height: 0;
border-top-width: 0; border-left-width: 0; border-right: 10px solid #FFFFFF; border-bottom: 20px solid #9900FF;"></div>
Это конечно упрощённый скелет. Чтоб это адекватно работало придется ещё покодить. Но суть этой темы всётаки вёрстка а не функционал.
P.S. Огромное спасибо автору этого способа.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>uk</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
#wrap{
background-color:#fff;
border:5px solid #eee;
height:400px;
margin:40px;
position:relative;
width:800px;
}
#wrap *{overflow:hidden; position:absolute; border-style:solid;}
#tl, #tr, #bl, #br{width:360px; height:160px; border-color:#be0027;}
#tl *, #br *{border-width:165px 0 0 330px; height:0;}
#tr *, #bl *{border-width:165px 330px 0 0; height:0;}
/*navy*/
.tn {border-top-color:#00247d;}
.rn {border-right-color:#00247d;}
.ln {border-left-color:#00247d;}
/*red*/
.tr {border-top-color:#be0027;}
.rr {border-right-color:#be0027;}
.lr {border-left-color:#be0027;}
/*white*/
.tw {border-top-color:#fff;}
.rw {border-right-color:#fff;}
.lw {border-left-color:#fff;}
/*transparent*/
.tt {border-top-color:transparent;}
.rt {border-right-color:transparent;}
.lt {border-left-color:transparent;}
</style>
<!--[if IE 6]>
<style type="text/css">
.tt {border-top-color:pink; filter: chroma(color=pink);}
.rt {border-right-color:pink; filter: chroma(color=pink);}
.lt {border-left-color:pink; filter: chroma(color=pink);}
</style>
<![endif]-->
</style>
</head>
<body>
<div id='wrap'>
<div id='tl' style='border-width:0 40px 40px 0;'>
<div id='tl-navy' class='tn lt' style='left:5px;top:-40px;'></div>
<div id='tl-red' class='tt lr' style='left:-60px;top:-30px;'></div>
<div id='tl-white' class='tt lw' style='left:-115px;top:-30px;'></div>
<div id='lt-navy' class='tt ln' style='left:-145px;top:-30px;'></div>
</div>
<div id='tr' style='right:0;border-width:0 0 40px 40px;'>
<div id='tr-navy' class='tn rt' style='right:5px;top:-40px;'></div>
<div id='tr-red' class='tt rr' style='top:-30px;right:-5px;'></div>
<div id='tr-white' class='tt rw' style='right:-60px;top:-30px;'></div>
<div id='rt-navy' class='tt rn' style='right:-145px;top:-30px;'></div>
</div>
<div id='bl' style='bottom:0;border-width:40px 40px 0 0;'>
<div id='bl-red' class='tr rt' style='bottom:-30px;left:-5px;'></div>
<div id='bl-white' class='tw rt' style='left:-60px;bottom:-30px;'></div>
<div id='bl-navy' class='tt rn' style='left:5px;bottom:-40px;'></div>
<div id='lb-navy' class='tn rt' style='left:-145px;bottom:-30px;'></div>
</div>
<div id='br' style='right:0;bottom:0;border-width:40px 0 0 40px;'>
<div id='br-red' class='tr lt' style='right:-60px;bottom:-30px;'></div>
<div id='br-white' class='tw lt' style='right:-115px;bottom:-30px;'></div>
<div id='br-navy' class='tt ln' style='right:5px;bottom:-40px;'></div>
<div id='rb-navy' class='tn lt' style='right:-145px;bottom:-30px;'></div>
</div>
</div>
</body>
</html>
Флаг прекрасен, добавлю его изображение в статью с ссылкой на ваш коммент.
У меня много понаписано "круглых углов", с картинками и без, на CSS, JS, DIV, TABLE, но таких нет, буду разбираться. Интересно.
Спасибо всем.