Закругленные углы «в идеале»
Каждый, кто хоть раз верстал сайт с блоками, имеющими закругленные углы, задавался вопросом, как это сделать. В сети полно описаний методов и даже подборок а‑ля «38 статей о создании закругленных углов».
Требования к методу
- минимум HTML‑элементов (в идеале – отсутствие), создающих закругления,
- минимум картинок,
- адекватный вид блока у пользователей с отключенной загрузкой изображений,
- возможность растяжки блока по горизонтали и вертикали,
- кроссбраузерность (это само собой, однако в сети есть уроки по некроссбраузерному решению этой проблемы – пример 1, пример 2)
Для себя я выработал методику, использующую одно изображение и 4 пустых тега <span>. В Чисто эстетических целях, эти теги можно вставлять в документ каким‑либо JS скриптом. Поскольку почти во всех проектах я использую JS фреймворк jQuery, то его и использую в этих целях.
Достоинства метода
- кроссбраузерность,
- использование одного изображения,
- растяжение блока по вертикали и горизонтали,
Недостатки метода
- нереализуема тень у блока с закругленными краями,
- блок с закругленными краями позиционирован относительно своего места (
position: relative)
Реализация
Понадобится одна картинка – квадратное изображения со всеми четырьмя уголками. Эту картинку мы будем использовать как фон для блоков, образующих углы и спозиционированных внутри родительского блока абсолютно (position:absolute).
Я сделал один PSD‑файл с четырьмя слоями для уголков, закругленных с радиусом в 3, 5, 7 и 9 px.
К слоям применен эффект Stroke, добавляющий серую обводку толщиной в 1 px по внутренней стороне слоя. Поскольку обводка внутренняя, реальная кривизна на 1 px больше, то есть – 4, 6, 8 и 10 px.
В примере я использую блок с углами, сглаженными с радиусом 9 px. Используемая в этом случае картинка выглядит так, а исходный слоеный PSD – так.
PSD‑файл со слоями я выкладываю «для ленивых» – достаточно будет сделать видимым нужный слой (названия слоев соответствуют радиусу сглаживания), сменить цвет обводки и, быть может, заливку фона или цвет векторного слоя. Таким образом можно получить не только блоки с обводкой разной толщины и радиуса, но и блоки, отличающиеся по цвету от фона.
Далее – HTML примера:
<div class="nth-corners">
<h1>Блок с углами</h1>
<p>[некий контент]</p>
<!– уголки –>
<span class=”top-right”></span>
<span class=”top-left”></span>
<span class=”bot-right”></span>
<span class=”bot-left”></span>
</div>Ничего сложного. Четыре <span> в самом конце блока <div> – и есть уголки.
CSS примера, так же, чрезвычайно прост. (В листинге я использую кириллические комментарии – в реальном CSS так делать нельзя – это только для понятности.)
.nth-corners { /* целевой блок */
width:80%;
border:1px solid #828282;
position:relative;
margin:1em auto;
padding:1em;
}
.nth-corners span { /* все блоки, формирующие углы */
display:block;
position:absolute;
width:10px;
height:10px;
background-image:url(img/corners.png);
}
.top-right { /* верхний правый */
top:-1px;
right:-1px;
background-position:100% 0;
}
.top-left { /* верхний левый */
top:-1px;
left:-1px;
}
.bot-right { /* нижний правый */
bottom:-1px;
right:-1px;
background-position:100% 100%;
}
.bot-left { /* нижний левый */
bottom:-1px;
left:-1px;
background-position:0 100%;
}Как видно, для блоков с абсолютным позиционированием заданы положения по углам целевого блока, фиксированные размеры и единое фоновое изображение, которое смещается для разных углов. Для верхнего левого <span> смещение фоновой картинки не задано, так как не нужно – по умолчанию она выравнивается по верхнему левому краю.
Понадобится добавить еще несколько корректирующих правил для IE6. (см. исходный код примера)
Результат
В результате имеем:
- валидный HTML,
- валидный CSS,
- только одно изображение,
- пользователи с отключенной загрузкой графики увидят все тоже самое, но без закругленных углов.
Идеальный вариант
А в идеале – чтобы тех <span>, которыми формируются скругления, в коде страницы не было.
Пока не настала эра CSS3, это возможно только с использованием JS. Пример на основе JS‑фреймворка jQuery иллюстрирует такой вариант решения проблемы. JS в данном случае выглядит так:
jQuery(document).ready(function() {
$('.nth-corners').append('<span class="top-right"></span><span class="top-left"></span><span class="bot-right"></span><span class="bot-left"></span>');
});Принцип действия: находим элемент DOM с классом .nth-corners и добавляем перед закрывающим тегом этого элемента те самые четыре <span>, закругляющие уголки.
Заключение
Может возникнуть вопрос:, а почему я не использую плагины для фреймворка jQuery? Отчего же, иногда использую. Однако ни один плагин не позволяет реализовать сглаживание бордюра столь же легко, как используемая мной методика (со сглаживанием углов блоков, отличающихся от фона цветом, плагины справляются хорошо).
Существует два вполне нормальных плагина jQuery, сглаживающих углы (на самом деле, плагинов то больше, но я говорю только о тех, что создают мягкие сглаживания, без «зазубрин»):
- JQuery Curvy Corners (демонстрация)
- Nifty Corners Cube (особо интересен этот пример)
27 октября 2008
Категория: Web–разработка
Комментировать ↓
Комментарии (уже 35)
Ответить
Я упустил глюк в 1 пиксель для right и bottom при абсолютном позиционировании в IE6.
На данный момент я подправил примеры и все работает и в этом недобраузере отлично. Использованы expressions.
Ответить
Ответить
Ответить
Ответить
Ответить
Ответить
Ответить
Ответить
Ответить
Ответить
технология спрайтов.
4 квадратных блока одинаковых фиксированных размеров имеют в фоне одно и то же изображение, но с разным горизонтальным и вертикальным выравниванием.
Ответить
тут и есть один спрайт.
технические приемы не подвержены моде, они или актуальны (работают и не нарушают спецификаций), или не актуальны (не работают или имеют значимые недостатки).
Ответить
да, в браузерах, не поддерживающих CSS 3 (к которым относятся, на данный момент, все поколения Opera и IE), мой блог выглядит иначе.
в Сафари, Хроме и ФФ введена частичная поддержка CSS 3.
Ответить
я вижу, что здесь один спрайт.. смысл заключается в верстке более простой и более корректной в плане кроссбраузерности.. имеется в виду, что фиксы аля expressions не обязательны... чем больше абсолютного/относительного позиционирования, тем сложнее становиться выживать ИЕ6/7, особенно когда у нас еще и попапы есть, глубокая вложенность закругленного блока и так далее.. если хотите, посмотрите реализацию на моем блоге webarium.blogspot.com, Вы поймете, что Ваши уголки далеко не "в идеале", так как требуют дополнительных фиксов для работы в ИЕ6. но все же знать expressions и верстку с помощью абсолютного позиционирования всегда пригодится..
Ответить
тем сложнее становиться выживать ИЕ6/7мягкий знак не ставится :)
есть другие способы делать закругленные углы, кто ж спорит? только смотреть примеры реализации нужно не у Вас, а, к примеру, у Лебедева, или в сервисах гугла :)
год назад, когда я писал эту статейку, метод с абсолютным позиционированием казался мне наиболее удобным и правильным. сейчас мое мнение не изменилось, хотя применяю и другие методики, если считаю их более подходящими.
Ответить
1) Слишком сложно реализуемо, не подходит для верстки эксклюзивных сайтов (то есть с индивидуальным дизайном) в промышленном масштабе.
2) Не в коем случае не использовать плавающие элементы.
3) Ну что вы, не работает в strict - а верстка в стандарте это главный показатель.
4) Гораздо дурабильнее, обратно совместимо и быстра верстка с картинками по углам - Другое дело как их туда поставить =), об этом я конечно не буду сильно толковать потому что блог не мой.
5) Хорошего верстальщика не должны волновать браузеры вообще, потому что они все отображают нормально за исключением некоторых вещей, такие вещи обычно делаются с "запасом прочности" - да еще раз прочитайте пункт 2.
Ну вот что я хотел по этому поводу сказать.
ЗЫ к шутке: я однажды увидел метод верстки, когда берут точку, увеличивают до 60-го размера и ставят на округление в угла с абсолютными значениями, во я зверско поржал ))).
Ответить
уверен, что правила верстки Вы знаете лучше правил русского языка :D
работает.
в такой форме этот посыл — натуральное пустозвонство.
есть несколько способов делать закругленные углы картинками, в моей практике чаще встречаются случаи, когда указанный мною способ наиболее прост и уместен.
ерунду сказали. полную и абсолютную. лишь дилетантов не волнует то, как верстка отображается в разных браузерах. а если точнее, то в браузерах и IE6,7.
в Gmail сделано примерно так. над чем тут ржать — непонятно.
Ответить
Ответить
Ответить
и зачем это может понадобиться? нет случаев, когда нужный SPAN нельзя прописать рядом с ними.
Ответить
Есть одно НО, если будет SPAN в тексте - будет не гут, по этому предлагаю немного унифицировать:
[b].top-right, .top-left, .bot-right, .bot-left вместо .nth-corners span[/b]
Вот тогда вообще сказка!
Ответить
Но заметил глюк в 6 "осле"...если изображение меньше 30пикс в высоту, то он пытается "набрать" эти 30 пикс дублями.
Пришлось делать 10*30 px а так все оч гут ... =)
Ответить
эх… если бы не IE, давно бы уже не нужны были картинки для уголков…
Ответить
http://www.css3.info/preview/rounded-border/
https://developer.mozilla.org/en/CSS/-moz-border-radius
http://border-radius.narod.ru/
Ответить
http://trends.openstat.ru/global-statistic-browsers — доля IE составляет 37,8%, в версиях 6, 7, 8 он не поддерживает свойства CSS3.
готовы принеюречь 40% пользователей? :)
то-то и оно…
Ответить
А вообще, кому интересно, посмотрите как делают скругления в Студии Лебедева, никаких проблем при стрикте и стандарте и т.д.
Ответить
смотрел, конечно. не устроило.
Ответить
Куча способов и не одного универсального. Уже думаю может картинки прилепиять. Опять же многие отключают загрузку картинок в браузере, для облегчения загрузки страницы.
Пока использую border-radius,
но как было сказано, это не идеальное решение. Опять же надо учитывать если юзер выключит подгруз изображений...
Появилось что то новое более универсальное?
Ответить
Вот я вставил код в чистый html
Дальше что, где тут изображение подвязывать?
Ответить
дальше добавляем в head страницы CSS и саму картинку кладем на сервере рядом.
изображения добавляются с помощью CSS — так они не дадут блоков «незагруженная картинка» при отключенных картинках.
Ответить
По поводу еще бордера, все это дело оборачиваем в еще один див и даем ему бордер, а в первом его дочернем div ставим margin:-3px; и все работает без js(единственное для Ie надо прописать z-index хотя бы один, а то виден бордер нижний)
P.S. если кого интересует могу дать универсалку для углов на ЛЮБОМ!!! фоне (увы только таблицей)
но вот сейчас придумал как сделать div =)
Ответить
интересно, как вы перемещаете блочные элементы background_ом...
видимо, Вы имеете в виду абсолютное позиционирование, которое описано в статье.
загругленные углы таблицами?
ну-ну... )
Ответить
Ответить
из-за IE6.
Ответить