 |
Форум вебмастеров на AlfaSpace.NET / Создание сайта / [CSS] Закругляем края блоков без картинок |
| Автор | Сообщение |
| acsid Alfa Guru  2466 |
# Дата: 31 Янв 2006 10:07 ° Поправил: acsid Вот очень полезная вещь вэб мастерам нового поколения: Наверника все уже успели познакомится с новым дизайном @mail.ru, должен заметить, он изменился в хорошую сторону. Что сразу кидается в глаза: практически у всех блоков нет острых краев - везде выжат один пиксель с угла. 
Действительно, любой более менее вменяемый web дизанер скажет, что острых углов у подобных блоков быть по идее не должно и что практически в любом случае их надо закруглять, хотя бы выжимая один пиксель. Решил глянуть как это сделано у мейла... Ужаснулся. Цитирую: <style>div.plash{width:100%;background-color:#00468C;text-align:center ;}div.cor{width:100%;height:1px;background-image:url('http://img.mail. ru/1.gif');background-repeat:no-repeat;text-align:right;background-col or:#D9D9D9;}div.plash div.cor, td.bg1 div.cor, table.header div.cor{background-color:#00468C;}</style><table cellpadding=0 cellspacing=0 border=0 width=29% align=left><tr><td width=17% rowspan=2><img src=http://www.mail.ru/0.gif width=5 height=1></td><td width=83%><img src=http://www.mail.ru/0.gif width=240 height=1></td></tr><tr><td><div class=plash><div class=cor><img src=http://www.mail.ru/1.gif width=1 height=1></div><img src=http://www.mail.ru/mail/ru/images/logon.gif width=176 height=48 alt=Mail.Ru vspace=3><div class=cor><img src=http://www.mail.ru/1.gif width=1 height=1></div></div> Суть, думаю, понятна. Блок нарезается таблицей и вставляется <div>, с бэкграундом в один белый пиксель. Впринципе, все ведь работает во всех браузерах и у пользователей обычных нареканий нет. Но мы то с вами крутые разработчики  и критиковать чужей код у нас в крови шучу. Просто хочу показать как можно достаточно просто, без лишних затрат, ьаблиц и картинок "выжать" пиксели по краям у блока.
Начнем. <div class='block'>Какой-то текст</div> Создаем <div> с нужным текстом/ссылкой и присваеваем ей class='block'. 
Все просто. Теперь создадим небольшой стиль для данного блока. <style> .block{ background:#666; color:white; font-weight:bold; font-family:tahoma, verdana, arial; width:200px; font-size:12px; text-align:center; padding:4px 0; } </style> <div class='block'>Какой-то текст</div> Теперь, собственно, выжимаем пиксели. Я использую свой собственный прием, но это не факт что я один такой умный. Я не притендую на 5+ за этот способ, возможно можно намного проще/красивее, но, меня он устраивает. Смысл простой - нужно добавить до и после нажего <div> какой-либо тег (я использовал <span>, но можно и любой другой), который представляет из себя линию, смещенную на 1 пиксель вправа от блока и длинной на 2 пикселя меньше. 
Демонстрирую: <style> .block{ background:#666; color:white; font-weight:bold; font-family: tahoma, verdana, arial; width:200px; font-size:12px; text-align:center; padding:4px 0; } .top-line{ width:198px; margin-left:1px; border-bottom:1px solid #666; display:block; font-size:0; // для IE }</style> <span class='top-line'></span> <div class='block'>Какой-то текст</div> К сожалению нельзя использовать один и тот же <span> тег для верхней и нижней линии, в IE между блоком и нижней линеей получается прозрачное пространство в один пиксель, это очевидно, ведь у нас border-bottom чертит линию. Поэтому чтобы начертить нижнюю линию нам нужен <span> другово, похожего класса. <style> .block{ background:#666; color:white; font-weight:bold; font-family:tahoma, verdana, arial; width:200px; font-size:12px; text-align:center; padding:4px 0; } .top-line{ width:198px; margin-left:1px; border-bottom:1px solid #666; display:block; font-size:0; } .bottom-line{ width:198px; margin-left:1px; border-top:1px solid #666; display:block; font-size:0; } </style> <span class='top-line'></span> <div class='block'>Какой-то текст</div> <span class='bottom-line'></span> В итоге мы получаем кроссбраузерный код (протестил в IE6, FF 1.5, Opera 9). 
Сразу заметный его недостаток - надо заранее знать длину блока. Это порой неудобно, тем более для резиновых сайтов. Решение этой проблемы найдено : <style type="text/css"> body{ padding: 20px; background-color: #FFF;font: 100.01% Verdana,Arial,sans-serif} h1,h2,p{margin: 0 10px} h1{font-size: 250%;color: #FFF} h2{font-size: 200%;color: #f0f0f0} p{padding-bottom:1em} h2{padding-top: 0.3em} div#rnd{ margin: 0 10%;background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} </style> <div id="rnd"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <h1>округляем углы div'a</h1> <p>Кажется, получилось</p> <h2>Даже без графики</h2> <p>Одесса</p> <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div> P.S. как видно CSS код не оптимизирован, 4 строки из 5-ти для классов линий идентичны. Не стал я это делать так как в данном коде нет никакого родительского тега. А назначать стиль глобально для тега <span> будет неверно. Если вы будете использовать данный код для своих проектов - будет оптимальнее одинаковые строки в стиле для линий вынести под тег родительского блока, который будет у вас. Например так: <style> .block{ background:#666; color:white; font-weight:bold; font-family:tahoma, verdana, arial; width:200px; font-size:12px; text-align:center; padding:4px 0; } #menu span{ width:198px; margin-left:1px; display:block; font-size:0; margin-right:2px; } .top-line{ border-bottom:1px solid #666; } .bottom-line{ border-top:1px solid #666; } </style> <div id='menu'> <span class='top-line'></span> <div class='block'>Какой-то текст</div> <span class='bottom-line'></span></div> By FAQ Master У Фокса есть свой тэг округления краёв: -moz-border-radius:7px; #ugolkov_net { position:absolute; WIDTH:145px; HEIGHT:70px; background:#0D3E52; line-height:14px; border:2px solid #125975; -moz-border-radius:7px; background-repeat:no-repeat; } |
| maxtat pda killer  1518 |
# Дата: 31 Янв 2006 12:18
круто, только легче картинкой сделать. Ради каких-то пары килобайт? |
| acsid Alfa Guru 2466 |
# Дата: 31 Янв 2006 12:21 maxtat ну это не модно..уже |
| admin powered by admin  7231 |
# Дата: 1 Фев 2006 07:36 круто  |
| FAQ Master Участник 439 |
# Дата: 1 Фев 2006 08:19 acsid Хорошо написано.. молодец. Может кому пригодится. У Фокса есть свой тэг округления краёв: -moz-border-radius:7px; #ugolkov_net {position:absolute; WIDTH:145px; HEIGHT:70px; background:#0D3E52; line-height:14px; border:2px solid #125975; -moz-border-radius:7px; background-repeat:no-repeat; } |
| l1nk0ln Участник  269 |
# Дата: 22 Мар 2006 13:52 acsid Молодец, тебя реально можно назвать Alfa Guru - супер!!! |
| Андрей Алексеевич  2123 |
# Дата: 22 Мар 2006 14:10 Я видел эту статью я nnm, до 31 Янв 2006 08:07 |
| gl_SPICE Участник  1823 |
# Дата: 22 Мар 2006 14:16 <style><!-- .pxburn { width=1; height=1; background=#FFFFFF; } --></style> <table width="50%" height="50%" cellspacing="0" cellpadding="0" bgcolor="#000000"> <tr><td class="pxburn"></td><td></td><td class="pxburn"></td></tr> <tr><td></td><td><p align="center"><font color="#FFFFFF">Бе-Бе-Бе</font></td><td></td></tr> <tr><td class="pxburn"></td><td></td><td class="pxburn"></td></tr> </table> |
| acsid Alfa Guru 2466 |
# Дата: 22 Мар 2006 15:09 ° Поправил: acsid Андрей эту статью я nnm, до 31 Янв 2006 08:07 я и не говорил что я её написал
gl_SPICE молодца) |
| l1nk0ln Участник 269 |
# Дата: 22 Мар 2006 15:18 acsid Все равно молодец! |
| acsid Alfa Guru 2466 |
# Дата: 22 Мар 2006 15:20 l1nk0ln Думаю тебе в твоей нюке пригодится |
![[Valid RSS]](valid-rss.png "Validate my RSS feed")