Сглаженные закругленные углы без использования изображений
Различные фишки и приемы с использованием CSS всегда привлекали и привлекают мое внимание. В их числе находится и способ закругления углов блока без использования какой-либо графики.
Вот несколько статей, описывающих технику закругления углов, о которой я веду речь в этой статье:
- Закругление углов без использования изображений
- Рамки таблиц с округленными краями без использования графики
- Закругленные углы – градиент, html and css
Мне данный подход очень понравился, но единственное, что сдерживало от применения оной методики – такие углы не выглядят сглаженными (да, вот такой я привередливый :). А этого мне не хватало, поэтому решил пойти до конца, доработав имеющийся вариант.
Итак, моя задача заключалась в реализации с помощью CSS вот такой рамки, абсолютно не используя изображения:
Увеличенное изображение угла выглядит следующим образом:
Я сделал абсолютно идентичный вариант с помощью CSS. За основу был взят предложенный ранее вариант. Чтобы добавить дополнительные пиксели, которые придадут углам сглаженность, я использовал несколько вложенных тегов, каждый из которых состоит из одной буквы (b, i, q). Это позволяет максимально оптимизировать HTML-код.
HTML
<div class="b1"><b></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b4"><b></b></div>
<div class="b5"><b></b></div>
<div class="text">
CSS - это здорово!
</div>
<div class="b5"><b></b></div>
<div class="b4"><b></b></div>
<div class="b3"><b><i></i></b></div>
<div class="b2"><b><i><q></q></i></b></div>
<div class="b1"><b></b></div>
Получилась довольно-таки некрасивая конструкция, что “попахивает” извращением, но я лично готов пожертвовать этим ради возможности обойтись без графики. Если сравнивать размер HTML-кода с “несглаженным” вариантом, то разница не такая уж и значительная.
CSS
.b1, .b2, .b3, .b4, .b5,
.b1 i, .b2 i, .b3 i, .b4 i, .b5 i,
.b1 b, .b2 b, .b3 b, .b4 b, .b5 b,
.b1 q, .b2 q, .b3 q, .b4 q, .b5 q {
height: 1px;
font-size: 1px;
overflow: hidden;
border-style: solid;
border-width: 0 1px;
display: block;
}
.b1 {
margin: 0 2px;
background: #EBEEF0;
border: none;
}
.b1 b {
margin: 0 1px;
background: #B8C3C8;
border-color: #CBD3D7;
}
.b2 {margin: 0 1px; border-color: #D6DCDF;}
.b2 b {border-color: #B8C3C8;}
.b2 i {border-color: #E4E8EA;}
.b2 q {border-color: #F7F8F9;}
.b3 {border-color: #EBEEEF;}
.b3 b {border-color: #BCC6CB;}
.b3 i {border-color: #F9FAFB;}
.b4 {border-color: #CAD2D6;}
.b4 b {border-color: #E5E9EB;}
.b5 {border-color: #B5C0C6;}
.b5 b {border-color: #FAFBFB;}
.text {
border: 1px solid #B0BCC2;
border-width: 0 1px;
padding: 0 12px;
}
Примеры решения
Для сравнения 3-х вариантов посмотрите примеры решения задачи закругления углов: с помощью изображений, простое закругление с использованием CSS и сглаженное закругление.
Что мы имеем в результате:
- валидный код CSS и HTML;
- кроссбраузерность кода;
- углы закруглены без использования графики;
- углы сглажены.
Из минусов данной модели стоит отметить лишь несемантическую верстку и размер кода, который, имхо, не так существенен.
Смотрите также
Обновление CSStemplater.com (CSS Layout Generator)
На сайте CSStemplater.com, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера: Появилась возможность задавать произвольные параметры у прежних опций, это: ширина макета; минимальная ...
Web 2.0 генератор шаблонов HTML + CSS
Сегодня двумя веб-разработчиками в лице меня и PHP-мастера Антона a.k.a. molodoy официально дан старт онлайн-сервису под названием “CSS Layout Generator” – генератор шаблонов HTML + CSS. Собственно, из названия сервиса ...
Цвет курсора в поле input и кроссбраузерность
Однажды я верстал страницу, на которой присутствовало текстовое поле поисковой формы. Ее особенность состояла в том, что фон был темно-серого цвета (с текстом белого цвета), с чем я встретился впервые ...
5 советов верстальщику
Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что “пинок” получил от трех человек. 1) Читайте блоги специалистов в данной ...
Комментарии (72)
Спасибо большое , оригинальное решение! Ещё раз спасибо!
Класс, очень познавательный и интересный материал, особенно хотелось бы отметить рекламу виагры наверху
вот вариант со скриптом:
http://www.html.it/articoli/niftycube/index.html
Гран Мерси за уголки! Если пришлете комментарии к моему первенцу (www.eniounits.com), будет всем Гран мерси с поясным поклоном.
[quote comment=”1302″]40*(1282-174)*1000000/1024/1024/1024=41,275391 гига трафа лишнего почти 42 гига тока на уголках[/quote]вот только все картинки кэшируются браузером и загружаются с сервера только один раз, а html грузиться постоянно, так что если на странице с десяток “окошек” с такими рюшечками и грузяться они миллион раз в сутки, то вот здесь-то и будет лишний траффик!
Я считаю не слишком целесообразным использовать теги только в декоративных целях – мы еще далеко не ушли от ситуации, когда таблицы используют не для табличных данных, а для создания визуальной структуры страницы.
Спасибо! очень инфа пригодилась!
А теперь предлагаю автору с помощью его метода сделать загругленные углы радиусом эдак пикселей 30 (для больших блоков часто бывает нужно).
Для jQuery сейчас есть плагин, который умеет рисовать сам закругленные углы, причем он даже учитывает фонофое изображение и границу блока, однако при большом количестве блоков это все безбожно тормозит – сначала загружаются блоки с острыми углами, затем углы постепенно округляются. При этом если не дай бог закругленные углы есть у динамических блоков (которые появляются или исчезают по событиям), то это все еще и прыгать начинает.
Вобщем любое решение в данном случае компромисное, до тех пор, пока не появится официальная поддержка браузерами CSS3.
Оригинально, но не актуально :)
Подскажите, как убрать черные точки в левух углах. Они появляются в ФФ и ГуглХром
blagoy, не наблюдаю в этих браузерах никаких черных точек.
keep4u.ru/imgs/b/081030/c4/c49db4b8bc66da5242.jpg
сайт vykza.ru
Может быть где-то не тот цвет указан. В моем примере же нет черных точек.
Dimox, я брал блок из вашего примера, не меняя. Заметил такую особенность: точки в ФФ3 и ГХ видно под Windows Vista, в XP не видно :-)
blagoy, в XP тоже видно. Весьма загадочная ситуация. Могу лишь сказать, что эти левые точки появляются, когда в этот код:
<div class="b2"><b><i><q></q></i></b></div>между
<q>и</q>вставлен какой-то текст. Но текста у вас я там не вижу, поэтому…Опытным путем выяснилось, что FF3 неправильно показывает пустой тег
Виктор, спасибо за информацию! Будем знать.
Пример хороший, только если в странице таких блоков 20-50 вес страниці превратится в проблему. Я думаю что данній метод хорош для малого количества блоков а с картинками всетаки для большого.
и все таки – извращение.
верстайте уж таблицами тогда,если не по душе семантика.
на мой взгляд,применение изображений более оправдано,
для браузеров не дружащих с возможностями css3,
нежели хлам в html коде.
если цвет фона изменить, задолбаешься цвета блоков подбирать :D
Лично я считаю, что на дворе 21 век, и лишние изображения (тем паче, в формате png) – не проблема. Хотя сама мысль интересна.