Сглаженные закругленные углы без использования изображений
Различные фишки и приемы с использованием CSS всегда привлекали и привлекают мое внимание. В их числе находится и способ закругления углов блока без использования какой-либо графики. Вот несколько статей, описывающих технику закругления углов, о которой я веду речь в этой статье: Закругление углов без использования ...
Комментарии (72)
Ну, а разве сейчас с графикой такие проблемы чтоб так фанатеть до отказа от нее. Уж на уголки то можно и не жалеть.
Нет, конечно. Я же не отказываюсь от других изображений, касающихся дизайна, но такие миниатюрные элементы вполне можно заменить.
Я так считаю потому, что сам очень часто просматриваю сайты без графики. И, когда вижу подобные штуки, «нарисованные» без картинок, это радует и привлекает внимание.
SEO diary пишет: …Уж на уголки то можно и не жалеть.
Можно, но сколько надо графики, если таких блоков немерено и все они разного цвета?
Дмитрий, респект!
Сглаженные углы отлично смотрятся. У самого руки пока не дошли, буду пользоваться твоим приемом ;)
Пожалуйста, Сергей! Рад, что тебе понравилось ;).
Было бы круто иметь скрипт, у которого на входе цвета снаружи, внутри и самой рамки. И возможно её радиус закругления и толщина в пикселях. А на выходе шаблоны кода html и css.
К сожалению без ложки дегтя не обошлось ;)
1. Сложность подбора цвета бордера закругленных углов.
2. Заливка блока background-ом или фоновая картинка с градиентом, показывают не достатки данной конструкции. Возможно они исправимы, но над этим еще надо поработать ;)
Хм, Сергей, а мне есть чем опровергнуть данные пункты :)
1) Здесь нужно плясать именно с прорисовки этих углов в графическом редакторе, после чего создавать угол по увеличенным пикселям, а не пытаться придумать цвета этих пикселей самому :).Т. е. сначала нужен рисунок.
2) Не знаю, почему у тебя возникли затруднения с бэкграундом, я уже делал подобное, получилось без проблем. Если надо, могу выложить скрин такого блока. А на счет фоновой картинки я точно не уверен, но поскольку эта модель похожа на ту, которую применял ты, то тоже не понимаю, почему у тебя не получилось адаптировать ее.
>Т.е. сначала нужен рисунок.
Об этом и говорю.
>А на счет фоновой картинки я точно не уверен, но поскольку эта модель похожа на >ту, которую применял ты, то тоже не понимаю, почему у тебя не получилось >адаптировать ее.
Вышлю пример по email
Сергей, не знаю почему, но мой блог каждый твой коммент запихивает в спам. На спамера ты вроде не похож)))).
Больше похоже на зарядку для рук/головы, чем на решение серьезной проблемы. Как и многие другие трики, кстати. В вашем примере больше хочется написать"CSS — это 3.14здец" :) Что важнее, семантика или скругленные-сглаженные углы? Пусть даже и валидные-кроссбаузерные. Ждем появления border-decoration: rounded 9px… :)
По теме: 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)*1 000 000/1024/1024/1024=41,275 391 гига трафа лишнего почти 42 гига тока на уголках
При вставке в стандартный шаблон wordpress’a не видна нижняя граница и появились боковые грани у невидимых таблиц
Очень интересное решение с точки зрения практики и тренировки навыков CSS.
Но если его тиражировать — слишком громоздко получается.
Представьте 10 таких блоков на странице — не много ли?
А если захотеть сделать скругление 10-ти пикс. радиусом — вообще можно умереть.
Как идея развития данного подхода: написать скрипт, в который можно загрузить GIF картинку, которая потом «порежется» на псевдо-пиксели, нарисованные div-ами. А управляя параметрами width и heightи т. п. )
полученных «css-пикслелей», можно получать интересные эффекты (zoom или растягивание, прозрачность отдельных цветов например
Супер. Спасибо.