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

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

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

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

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

  2. 2

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

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

  3. 3
    @

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

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

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

  4. 4

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

  5. 5

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

  6. 6
    @

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

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

  7. 7

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

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

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

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

  8. 8
    @

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

  9. 9

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

  10. 10
    @

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

  11. 11
    Mr.KTO

    По теме: http://mrkto.com/images2html_e-mail_protection/

  12. 12
    Yuriy

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

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

  13. 13
    Nesvet
    @

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

  14. 14
    Евгений

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

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

  15. 15
    Roman

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

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

  16. 16
    Allinne

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

  17. 17
    Das

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

  18. 18
    rolph

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

  19. 19
    Иван

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

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

  20. 20
    Maksim

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