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

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

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

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

    1. http://ryoga.ru/dimox/
    2. Про валидность кода можно забыть.

  2. 2

    1. я же говорю, у меня нет этого бага.
    2. почему «можно забыть», если код валидный?

  3. 3

    Поспешил =( Чтобы код стал валидный нужно вписать 10 пробелов   тогда всё станет нормально и код вырастет на 50 символов, что не есть хорошо.

  4. 4

    Этот код проходит валидацию и без наличия пробелов, так что они не нужны.

  5. 5

    В HTML но не в XHTML =)
    Вот от сюда и недопонимание друг друга.
    Пиво дружба сосиски =)

  6. 6

    ))) я говорю именно про XHTML-валидацию.

  7. 7

    Дай ссылку посмотреть, хоть убей не верю что пустой b валидатор пропускает

  8. 8

    http://validator.w3.org/#validate_by_input+with_options с параметром Validate HTML fragment — XHTML 1.0

  9. 9

    Разобрался:
    1. В FF стоит плагин «Html Validator» v0.7.9.5 в который я искренни верил, оказалось, что он как то по своему проверяет страницы на валидацию.
    2. При редактирование в NotePad++ при проверки валидации постоянно возникает проблемы http://validator.w3.org/ утверждает код не валидный, как выяснил проблема с кодировкой из-за данного редактора.
    3. После того как отредактировал код в Dreamweafer код стал валидный, исчез баг с точками вверху и внизу левого угла о котором писал ранее.
    P.s. от редактора Notepad придётся отказаться =(

  10. 10

    Ну вот, отлично, что к чему-то пришли. Значит не зря дискутировали :)

    Странно, что при использовании NP++ наблюдаются такие баги. Вроде серьезный редактор.

  11. 11

    Полезно, но для извращенцев есть ресурс где все на каскадных делают =) Они просто демоны… кстати ссылку дам http://www.cssplay.co.uk/boxes/krazy.html

    Для более сложных уголков уже нужны картинки :(

  12. 12

    Как бы там ни было (удобней илои не удобней) но такие интересные решения заслуживают уважения. Браво! ) Тумбс АП

  13. 13
    Валентин

    Спасибо большое , оригинальное решение! Ещё раз спасибо!

  14. 14
    dr_pepper
    @

    Класс, очень познавательный и интересный материал, особенно хотелось бы отметить рекламу виагры наверху

  15. 15
    az

    вот вариант со скриптом:
    http://www.html.it/articoli/niftycube/index.html

  16. 16
    @

    Гран Мерси за уголки! Если пришлете комментарии к моему первенцу (www.eniounits.com), будет всем Гран мерси с поясным поклоном.

  17. 17
    Дмитрий
    @

    [quote comment=»1302″]40*(1282-174)*1000000/1024/1024/1024=41,275391 гига трафа лишнего почти 42 гига тока на уголках[/quote]вот только все картинки кэшируются браузером и загружаются с сервера только один раз, а html грузиться постоянно, так что если на странице с десяток «окошек» с такими рюшечками и грузяться они миллион раз в сутки, то вот здесь-то и будет лишний траффик!

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

  18. 18
    Макс

    Спасибо! очень инфа пригодилась!

  19. 19
    Андрей
    @

    А теперь предлагаю автору с помощью его метода сделать загругленные углы радиусом эдак пикселей 30 (для больших блоков часто бывает нужно).

    Для jQuery сейчас есть плагин, который умеет рисовать сам закругленные углы, причем он даже учитывает фонофое изображение и границу блока, однако при большом количестве блоков это все безбожно тормозит — сначала загружаются блоки с острыми углами, затем углы постепенно округляются. При этом если не дай бог закругленные углы есть у динамических блоков (которые появляются или исчезают по событиям), то это все еще и прыгать начинает.

    Вобщем любое решение в данном случае компромисное, до тех пор, пока не появится официальная поддержка браузерами CSS3.

  20. 20
    wz
    @

    Оригинально, но не актуально :)