Сглаженные закругленные углы без использования изображений
Различные фишки и приемы с использованием CSS всегда привлекали и привлекают мое внимание. В их числе находится и способ закругления углов блока без использования какой-либо графики.
Вот несколько статей, описывающих технику закругления углов, о которой я веду речь в этой статье:
- Закругление углов без использования изображений
- Рамки таблиц с округленными краями без использования графики
- Закругленные углы - градиент, html and css
Мне данный подход очень понравился, но единственное, что сдерживало от применения оной методики - такие углы не выглядят сглаженными (да, вот такой я привередливый :). А этого мне не хватало, поэтому решил пойти до конца, доработав имеющийся вариант.
Итак, моя задача заключалась в реализации с помощью CSS вот такой рамки, абсолютно не используя изображения:
Увеличенное изображение угла выглядит следующим образом:
Я сделал абсолютно идентичный вариант с помощью CSS. За основу был взят предложенный ранее вариант. Чтобы добавить дополнительные пиксели, которые придадут углам сглаженность, я использовал несколько вложенных тегов, каждый из которых состоит из одной буквы (b, i, q). Это позволяет максимально оптимизировать HTML-код.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | .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;
- кроссбраузерность кода;
- углы закруглены без использования графики;
- углы сглажены.
Из минусов данной модели стоит отметить лишь несемантическую верстку и размер кода, который, имхо, не так существенен.
* * *
В нашей жизни, наполненной заботами, очень важно иметь возможность хорошо отдохнуть. Правильно подобранная и недорогая мебель для спальни от компании “МИРТ-СЕРВИС” поможет вам в этом.
Ну а разве сейчас с графикой такие проблемы чтоб так фанатеть до отказа от нее. Уж на уголки то можно и не жалеть.
Нет, конечно. Я же не отказываюсь от других изображений, касающихся дизайна, но такие миниатюрные элементы вполне можно заменить.
Я так считаю потому, что сам очень часто просматриваю сайты без графики. И, когда вижу подобные штуки, “нарисованные” без картинок, это радует и привлекает внимание.
SEO diary пишет: …Уж на уголки то можно и не жалеть.
Можно, но сколько надо графики, если таких блоков немерено и все они разного цвета?
Дмитрий, респект!
Сглаженные углы отлично смотрятся. У самого руки пока не дошли, буду пользоваться твоим приемом ;)
Пожалуйста, Сергей! Рад, что тебе понравилось ;).
Было бы круто иметь скрипт, у которого на входе цвета снаружи, внутри и самой рамки. И возможно её радиус закругления и толщина в пикселях. А на выходе шаблоны кода html и css.
К сожалению без ложки дегтя не обошлось ;)
1. Сложность подбора цвета бордера закругленных углов.
2. Заливка блока background-ом или фоновая картинка с градиентом, показывают не достатки данной конструкции. Возможно они исправимы, но над этим еще надо поработать ;)
Хм, Сергей, а мне есть чем опровергнуть данные пункты :)
1) Здесь нужно плясать именно с прорисовки этих углов в графическом редакторе, после чего создавать угол по увеличенным пикселям, а не пытаться придумать цвета этих пикселей самому :). Т.е. сначала нужен рисунок.
2) Не знаю, почему у тебя возникли затруднения с бэкграундом, я уже делал подобное, получилось без проблем. Если надо, могу выложить скрин такого блока. А на счет фоновой картинки я точно не уверен, но поскольку эта модель похожа на ту, которую применял ты, то тоже не понимаю, почему у тебя не получилось адаптировать ее.
P.S. Думаю, можно было бы обсудить эти темы в привате, чтобы придти к нужному решению этих задач.
>Т.е. сначала нужен рисунок.
Об этом и говорю.
>А на счет фоновой картинки я точно не уверен, но поскольку эта модель похожа на >ту, которую применял ты, то тоже не понимаю, почему у тебя не получилось >адаптировать ее.
Вышлю пример по email
Сергей, не знаю почему, но мой блог каждый твой коммент запихивает в спам. На спамера ты вроде не похож )))).
Больше похоже на зарядку для рук/головы, чем на решение серьезной проблемы. Как и многие другие трики, кстати. В вашем примере больше хочется написать”CSS – это 3.14здец” :) Что важнее, семантика или скругленные–сглаженные углы? Пусть даже и валидные–кроссбаузерные. Ждем появления border-decoration: rounded 9px… :)
По теме: http://mrkto.com/images2html_e-mail_protection/
Мда, как все запущено. Смотря на это решение, лучше уж картинки.
Интересно, при добавлении скольки элементов внутрь этой структуры у браузера снесет крышу (к примеру, динамически жабаскриптом)
Классная штука. Захотелось написать скрипт…
Некрасивое решение. Действительно, ждём появления border-decoration: rounded. На самом деле, пользователю как правило наплевать каким образом у блока закруглены углы, а вот поисковикам вовсе не плевать на чистоту кода. ;) Да и разработчикам куда проще разбираться в чистом, красивом коде, нежели этой мусорке букв и цифр.
Даже, если есть необходимость закруглить уголки у 10 блоков различного цвета, то куда проще вырезать 4 картинки, поигравшись с Hue/Saturation, нежели подбирать цвета для СSS в фотошопе, увеличив изображение до 1600%… :D
Извините, но вы смотрели свой блог в ИЕ 7м?
гу и второе сообщение можно отправиль только перегрузив ручками всю страницу…
Пипец. Семантическая верстка идет лесом. Это типа как экономить на закрывающих тегах , , но заменять графику в явном виде на псевдографику HTML-элементов. Выражаю Вам мое глубочайшее фи.
png рисунок привсем приетом весит 174 байта а текст всей этой красивости 1282 байта, итого увелечение в 7,36 раза. Допустим сайт с миллионом посещений в день, таких мулек на нем пусть 40 итого 40*(1282-174)*1000000/1024/1024/1024=41,275391 гига трафа лишнего почти 42 гига тока на уголках
При вставке в стандартный шаблон wordpress’a не видна нижняя граница и появились боковые грани у невидимых таблиц
Очень интересное решение с точки зрения практики и тренировки навыков CSS.
Но если его тиражировать - слишком громоздко получается.
Представьте 10 таких блоков на странице - не много ли?
А если захотеть сделать скругление 10-ти пикс. радиусом - вообще можно умереть.
Как идея развития данного подхода: написать скрипт, в который можно загрузить GIF картинку, которая потом “порежется” на псевдо-пиксели, нарисованные div-ами. А управляя параметрами width и height
полученных “css-пикслелей”, можно получать интересные эффекты (zoom или растягивание , прозрачность отдельных цветов например и т.п.)
Супер. Спасибо.
Скажите, пожалуйста, что в нем не так? Смотрел, но, может быть, что-то не заметил.
Ребята, данное решение - не панацея! Я сам не готов использовать его везде, где потребовалось бы закруглять углы. Это только один из возможных вариантов закругления и использовать его уместно только в некоторых случаях.
На своем же примере скажу - если я описал данный способ, это не значит, что я всегда тупо использую только его :). С закруглениями сталкиваюсь часто, но применял способ всего лишь раз.
Спасибо всем за комментарии!
у меня стоит цвет окна в настройках оформления виндоус не белый, поэтому первый и третий вариант сглаживания создают белые прямоугольнички и пиксели в углах -__-
А название “Nifty Corners Cube вам ни о чем не говорит? :) Зачем изобретать велосипед? Тем более, что использование JS в данной ситуации уместнее - верстка не замусоривается и остается семантической.
Ой-ей-ей, зачем же такая каша в коде-то? Да и, если честно, меня терзают смутные сомнения на счет того, что маленькая картинка уголков будет весить чуть ли не меньше, чем приведенный код. Ну и плюс к тому описывать все переходные цвета пикселей, а не только основной цвет рамки — как-то оно не очень радует.
А я использую вот такой способ.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<style type="text/css">
.rndbxg b.trg, .rndbxg b.brg { display: block }
.rndbxg b.trg *, .rndbxg b.brg * { display: block; height: 1px; overflow-y: hidden; font-size: 0 !important; border-width: 0 1px; border-style: none solid}
.rndbxg b.trg b, .rndbxg b.brg b { margin: 0 4px }
.rndbxg b.trg i, .rndbxg b.brg i { margin: 0 2px }
.rndbxg b.trg u, .rndbxg b.brg u { margin: 0 1px !important }
.rndbxg .rndbxCg { border-width: 0 1px; border-style: none solid; padding: 0; overflow: hidden }
.rndbxg b.trg u, .rndbxg b.brg u { height: 2px }
.rndbxg b.trg i, .rndbxg b.brg i { border-width: 0 2px }
.rndbxg b.trg b, .rndbxg b.brg b { border-width: 0 }
.wrndbxg b.trg b, .wrndbxg b.brg b { background: #cccccc }
.wrndbxg b.trg i, .wrndbxg b.brg i, .wrndbxg b.trg u, .wrndbxg b.brg u, .wrndbxg .rndbxCg { background: #ffffff; border-color: #cccccc }
.grndbxg b.trg *, .grndbxg b.brg *, .grndbxg .rndbxCg { background: #ececec !important; border-color: #ececec !important }
</style>
<!-- /style -->
<div style="padding: 10px; width: 100%">
<div class="rndbxg wrndbxg">
<b class="trg"><b></b><i></i><u></u></b>
<div class="rndbxCg">
<div style="padding: 10px">
<p>Любое содержимое</p>
</div>
</div>
<b class="brg"><u></u><i></i><b></b></b>
</div>
</div>
Могут использоваться любые бакграунды и любой цвец рамки-фона, люббой браузер, плюс любое содержимое.
Я надеюсь, все это проделывается исключительно ради спортивного интереса?
Насколько я помню, css появились для отделения дизайна от контента и для ОПТИМИЗАЦИИ кода.
И, кстати, запись “border-width: 0 1px;” в CSS 2 недопустима, вам даже ваш редактор это подсветил.
Я уже высказывал свою позицию и в самом посте, и в комментариях, поэтому нет смысла повторяться.
Редактор абсолютно идентично подсветил и “margin: 0 1px;”, но это же не значит, что такая запись неправильная.
Можете дать ссылку на источник, где говорится, что запись “border-width: 0 1px;” недопустима? Если это действительно так, то буду исправляться. Однако эта запись валидацию проходит, поэтому у меня пока сомнения на счет недопустимости.
метод конечно интересный но 4 уголка в *.gif даже по весу меньше чем данный код ;)
Привет!
Спасибо за уголки! Зззззумительно!
А нет ли чего подобного со шрифтами? КлирТайп хорошо, но хотелось бы еще качественее - как уголки например.
Заранее спасибо
(ответ лучше на @)
E.
Если бы с графикой было бы все так просто :)
Нарисовать, вырезать, дать border при случае, блоков с сразными цветами поболее, пустить градиент (вдруг понадабиться), то размеры всех графических элементов будут по любому весить прилично.
Предложенный метод не панацея и это надо понимать.
Но иногда проще сделать именно так, а не иначе :)
Скорее всего нет.
Чесслово это уже извращенство такой код втыкать на уголки…, надо ли это? Надо, если только для общего развития…
Давайте вспомним основные принципы SEO и сайтостроения преждем чем будем городить подобного рода красоту…, да и кому она особо нужна? Те кто делает уголки круглые - делают круглыми их везде, а везде нереально будет втыкнуть это с помощью CSS, следовательно если пользователь зайдет и увидит что половина уголков (если картинки отключены) квадратные, а половина круглые (сделанные CSS) приятней его глазу не станет…
P.S.: Без картинок сейчас полюбому ущербно как-то, хоть и сам стремлюсь к минимуму изображений…
Я опять со шрифтами…
А если поставить как задачу? Ведь чего только CSS не вытворяет со шрифтами, а сглаживание получается слобо? Не так уже там (в шрифтах) и мест то много что “гладить” нужно! Зато слава будет великая!!! Вcе sIFR-ы и фльтры Виндовские просто сдохнут от зависти…
Евгений, в CSS3 есть свойство для сглаживания текста. Но Бог его знает, когда этот стандарт начнут использовать во всех популярных браузерах.
- в CSS3 есть свойство для сглаживания текста -
Ух ты!!! … а нельзя ли ссылочку, где эти свойства можно посмотреть?
Заранее спасибо
Е
Пример можно посмотреть здесь - http://www.css3.info/preview/text-shadow/. Поддерживает пока, насколько мне известно, только Opera 9.5.
Кстати, выше я ошибся. Это свойство введено еще в стандарте CSS2. Но до сих пор не поддерживалось популярными браузерами.
Про эти тени я знаю…
Но спасибо в любом случае. Если что на эту тему увидите-услышите-сотворите… бросьте ссылку при случае.
Спасибо!
Е.
Конечно, сглаживание, скорее всего избыточно.
Взял из примера вариант “Простое закругление углов с помощью CSS”
css - 373 байта (примерно)
html для четырех углов - 224 байта (примерно)
to Das ( 13 ноября 2007 г. в 14:22 )
Что Вы там про траффик говорили? Доля этого кода в коде страницы просто ничтожна, а вот на коннектах к серверу экономим. И к тому же, для изменения цвета рамки не нужно перерисовывать картинки.
Жесть, зачем плодить столько не нужного кода, когда лучше вставить 4 блока с фоновыми изображениями и спозиционировать их. По крайне мере кода в 3 раза меньше будет по количеству символов. Хотя при масштабирование прекрасно работает.
Заметил баг, у меня FF v2 при размере шрифта по умолчанию, слева на закруглениях вверху и внизу есть чёрные точки, появились они там благодаря q и /q, зачем вы их вставили в код ?
Проверил в FF2, у меня нет таких черных точек. q - один из элементов для сглаживания.
1. http://ryoga.ru/dimox/
2. Про валидность кода можно забыть.
1. я же говорю, у меня нет этого бага.
2. почему “можно забыть”, если код валидный?
Поспешил =( Чтобы код стал валидный нужно вписать 10 пробелов тогда всё станет нормально и код вырастет на 50 символов, что не есть хорошо.
Этот код проходит валидацию и без наличия пробелов, так что они не нужны.
В HTML но не в XHTML =)
Вот от сюда и недопонимание друг друга.
Пиво дружба сосиски =)
))) я говорю именно про XHTML-валидацию.
Дай ссылку посмотреть, хоть убей не верю что пустой b валидатор пропускает
http://validator.w3.org/#validate_by_input+with_options с параметром Validate HTML fragment - XHTML 1.0
Разобрался:
1. В FF стоит плагин “Html Validator” v0.7.9.5 в который я искренни верил, оказалось, что он как то по своему проверяет страницы на валидацию.
2. При редактирование в NotePad++ при проверки валидации постоянно возникает проблемы http://validator.w3.org/ утверждает код не валидный, как выяснил проблема с кодировкой из-за данного редактора.
3. После того как отредактировал код в Dreamweafer код стал валидный, исчез баг с точками вверху и внизу левого угла о котором писал ранее.
P.s. от редактора Notepad придётся отказаться =(
Ну вот, отлично, что к чему-то пришли. Значит не зря дискутировали :)
Странно, что при использовании NP++ наблюдаются такие баги. Вроде серьезный редактор.
Полезно, но для извращенцев есть ресурс где все на каскадных делают =) Они просто демоны… кстати ссылку дам http://www.cssplay.co.uk/boxes/krazy.html
Для более сложных уголков уже нужны картинки :(
Как бы там ни было (удобней илои не удобней) но такие интересные решения заслуживают уважения. Браво! ) Тумбс АП
Спасибо большое , оригинальное решение! Ещё раз спасибо!
Класс, очень познавательный и интересный материал, особенно хотелось бы отметить рекламу виагры наверху
вот вариант со скриптом:
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 тоже видно. Весьма загадочная ситуация. Могу лишь сказать, что эти левые точки появляются, когда в этот код:
между <q> и </q> вставлен какой-то текст. Но текста у вас я там не вижу, поэтому…
Опытным путем выяснилось, что FF3 неправильно показывает пустой тег <q>. Если в коде заменить- проблема устраняется. Проверено в Опере9.6, IE6, FF3.0.4
Виктор, спасибо за информацию! Будем знать.
Пример хороший, только если в странице таких блоков 20-50 вес страниці превратится в проблему. Я думаю что данній метод хорош для малого количества блоков а с картинками всетаки для большого.
и все таки - извращение.
верстайте уж таблицами тогда,если не по душе семантика.
на мой взгляд,применение изображений более оправдано,
для браузеров не дружащих с возможностями css3,
нежели хлам в html коде.
если цвет фона изменить, задолбаешься цвета блоков подбирать :D
Лично я считаю, что на дворе 21 век, и лишние изображения (тем паче, в формате png) - не проблема. Хотя сама мысль интересна.