Главная CSS-верстка

Сглаженные закругленные углы без использования изображений

Сглаженные закругленные углы без использования изображений

Различные фишки и приемы с использованием CSS всегда привлекали и привлекают мое внимание. В их числе находится и способ закругления углов блока без использования какой-либо графики. Вот несколько статей, описывающих технику закругления углов, о которой я веду речь в этой статье: Закругление углов без использования ...

Комментарии (72)

  1. Ну, а разве сейчас с графикой такие проблемы чтоб так фанатеть до отказа от нее. Уж на уголки то можно и не жалеть.

  2. Нет, конечно. Я же не отказываюсь от других изображений, касающихся дизайна, но такие миниатюрные элементы вполне можно заменить.

    Я так считаю потому, что сам очень часто просматриваю сайты без графики. И, когда вижу подобные штуки, «нарисованные» без картинок, это радует и привлекает внимание.

  3. SEO diary пишет: …Уж на уголки то можно и не жалеть.

    Можно, но сколько надо графики, если таких блоков немерено и все они разного цвета?

    Дмитрий, респект!
    Сглаженные углы отлично смотрятся. У самого руки пока не дошли, буду пользоваться твоим приемом ;)

  4. Пожалуйста, Сергей! Рад, что тебе понравилось ;).

  5. Было бы круто иметь скрипт, у которого на входе цвета снаружи, внутри и самой рамки. И возможно её радиус закругления и толщина в пикселях. А на выходе шаблоны кода html и css.

  6. К сожалению без ложки дегтя не обошлось ;)

    1. Сложность подбора цвета бордера закругленных углов.
    2. Заливка блока background-ом или фоновая картинка с градиентом, показывают не достатки данной конструкции. Возможно они исправимы, но над этим еще надо поработать ;)

  7. Хм, Сергей, а мне есть чем опровергнуть данные пункты :)

    1) Здесь нужно плясать именно с прорисовки этих углов в графическом редакторе, после чего создавать угол по увеличенным пикселям, а не пытаться придумать цвета этих пикселей самому :). Т. е. сначала нужен рисунок.

    2) Не знаю, почему у тебя возникли затруднения с бэкграундом, я уже делал подобное, получилось без проблем. Если надо, могу выложить скрин такого блока. А на счет фоновой картинки я точно не уверен, но поскольку эта модель похожа на ту, которую применял ты, то тоже не понимаю, почему у тебя не получилось адаптировать ее.

    P. S. Думаю, можно было бы обсудить эти темы в привате, чтобы придти к нужному решению этих задач.

  8. >Т.е. сначала нужен рисунок.
    Об этом и говорю.
    >А на счет фоновой картинки я точно не уверен, но поскольку эта модель похожа на >ту, которую применял ты, то тоже не понимаю, почему у тебя не получилось >адаптировать ее.
    Вышлю пример по email

  9. Сергей, не знаю почему, но мой блог каждый твой коммент запихивает в спам. На спамера ты вроде не похож)))).

  10. Больше похоже на зарядку для рук/головы, чем на решение серьезной проблемы. Как и многие другие трики, кстати. В вашем примере больше хочется написать"CSS — это 3.14здец" :) Что важнее, семантика или скругленные-сглаженные углы? Пусть даже и валидные-кроссбаузерные. Ждем появления border-decoration: rounded 9px… :)

  11. Мда, как все запущено. Смотря на это решение, лучше уж картинки.

    Интересно, при добавлении скольки элементов внутрь этой структуры у браузера снесет крышу (к примеру, динамически жабаскриптом)

  12. Классная штука. Захотелось написать скрипт…

  13. Некрасивое решение. Действительно, ждём появления border-decoration: rounded. На самом деле, пользователю как правило наплевать каким образом у блока закруглены углы, а вот поисковикам вовсе не плевать на чистоту кода. ;) Да и разработчикам куда проще разбираться в чистом, красивом коде, нежели этой мусорке букв и цифр.

    Даже, если есть необходимость закруглить уголки у 10 блоков различного цвета, то куда проще вырезать 4 картинки, поигравшись с Hue/Saturation, нежели подбирать цвета для СSS в фотошопе, увеличив изображение до 1600%… :D

  14. Извините, но вы смотрели свой блог в ИЕ 7 м?

    гу и второе сообщение можно отправиль только перегрузив ручками всю страницу…

  15. Пипец. Семантическая верстка идет лесом. Это типа как экономить на закрывающих тегах, , но заменять графику в явном виде на псевдографику HTML-элементов. Выражаю Вам мое глубочайшее фи.

  16. png рисунок привсем приетом весит 174 байта, а текст всей этой красивости 1282 байта, итого увелечение в 7,36 раза. Допустим сайт с миллионом посещений в день, таких мулек на нем пусть 40 итого 40*(1282−174)*1 000 000/1024/1024/1024=41,275 391 гига трафа лишнего почти 42 гига тока на уголках

  17. При вставке в стандартный шаблон wordpress’a не видна нижняя граница и появились боковые грани у невидимых таблиц

  18. Очень интересное решение с точки зрения практики и тренировки навыков CSS.
    Но если его тиражировать — слишком громоздко получается.
    Представьте 10 таких блоков на странице — не много ли?
    А если захотеть сделать скругление 10-ти пикс. радиусом — вообще можно умереть.

    Как идея развития данного подхода: написать скрипт, в который можно загрузить GIF картинку, которая потом «порежется» на псевдо-пиксели, нарисованные div-ами. А управляя параметрами width и height
    полученных «css-пикслелей», можно получать интересные эффекты (zoom или растягивание, прозрачность отдельных цветов например и т. п.)

  19. Супер. Спасибо.