Pull to refresh

38 статей о создании закругленных углов на сайтах

Website development*
Моя статья на Временно.нет
38 статей о создании закругленных углов на сайтах
Часто сталкиваешься с необходимостью создания блоков с круглыми краями. Задавшись вопросом как вообще можно решить поставленную задачу, сделал подборку интересных статей и уроков на данную тему.

Здесь представлен обзор 38 статей, разбитых на 4 категории по способам реализации.


Без использования пустых тегов

Простой, семантически правильный CSS блок с чистым кодом

Создает блок и добавляет возможность создания заголовка блока. Тянется по ширине и высоте. Несмотря на тень на примере, реализации полупрозрачной тени не предусмотрено.
Простой, семантически правильный CSS блок с чистым кодом

Круглые углы в CSS

Очень приятный внешний вид, простая реализация, малое количество HTML-элементов. К минусам, пожалуй, можно отнести только наличие 4 картинок для каждого из углов. Но увы не работает в IE.
Круглые углы в CSS

CSS тизер-блок

Предусмотрена реализация как одно- так и двух-картиночного метода. Малое количество HTML-элементов. Очень удобно для создания тизеров.
CSS тизер-блок

Ссылки на последние новости

Очень интересное решение на основе неупорядоченного списка. Плюсом будет простая реализация и малое количество HTML-элементов. Приятное оформление с функцией изменения цвета при наведении мышкой (но эта приятность не работает в IE).
Ссылки на последние новости

CSS и круглые углы: Границы с дугами

Неоспоримым минусом является наличие 8 дивов для реализации. Так же в статье есть описание другого метода, в котором используется в 2 раза меньше дивов, но блок залит цветом.
CSS и круглые углы: Границы с дугами

Озаглавленные сверху углы

Реализовано на основе списков определений. Достаточно красивое оформление, возможность создания заголовка. Отсутствует поддержка изменения ширины. Но есть удобная возможность быстрого изменения цвета заголовков и самого блока.
Озаглавленные сверху углы

Создание скругленного блока или дизайн с CSS и XHTML

Как и в предыдущем способе все реализовано на основе списка определений. В статье рассмотрено два способа реализации. Так же появилась возможность тянущейся ширины.
Создание скругленного блока или дизайн с CSS и XHTML

Резиновый блок с легко изменяемыми углами и поверхностью

Минусами в этом способе так же является большое количество дивов (5) и 4 файлов картинок. Но есть интересные примеры для реализации.
Резиновый блок с легко изменяемыми углами и поверхностью

Закругленные углы бордера

Не является полным уроком, но показывает принцип использования единичного бордера и картинки.
Закругленные углы бордера

Круглые угла в CSS

Достаточно приятный урок. Его минусом, пожалуй, является относительно большое количество HTML-элементов и наличие 4 картинок для каждого из углов.
Круглые угла в CSS

Создание произвольных углов и границ

Используется 4 файла с картинками (максимальная ширина блока зависит от ширины картинки). Но очень подробный урок.
Создание произвольных углов и границ

«Пуленепробиваемые» круглые углы

Очень подробная статья с большим количеством примеров. Но достаточно сложная реализация. К тому же используется 4 картинки.
Пуленепробиваемые круглые углы

Рисование теней и рамок элементов оформления

Статья Владимира Токмакова. Весьма сложная реализация, но к плюсам, конечно, относится возможность создания полупрозрачных теней. Статья на русском.
Рисование теней и рамок элементов оформления

Круглые углы с фиксированной шириной

Интересный пример использования. Но минус в фиксированной ширине данного способа. Плюс — очень простая реализация.
Круглые углы с фиксированной шириной

CSS тянущийся блок с 4 произвольными углами

Вполне хороший урок. Возможность отбрасывания теней. Плюс — возможность создания заголовков.
CSS тянущийся блок с 4 произвольными углами

Делаем закругленные уголки с помощью псевдоэлементов :before и :after

Статья уже была описана на Хабре. Очень простая реализация, но не все примеры, приведенные в статье, работаю в IE. Используется 4 файла с картинками для реализации. Статья на русском.
Делаем закругленные уголки с помощью псевдоэлементов :before и :after

Создание произвольных углов и границ. Часть II

Описывается способ при котором фон не сплошной, а градиентный. Используется 4 картинки.
Создание произвольных углов и границ. Часть II

Круглые углы в DIVах

Описано 3 способа реализации. Таблицами, дивами и дивами без картинок. Последний вариант не очень хорош, так как используется много пустых тэгов.
Круглые углы в DIVах

Круглые углы и блоки с тенью

Пожалуй, не очень хороший способ, так как используется 5 картинок. Но вроде бы предусмотрена возможность создания тени. Плюс — использование только двух HTML-элементом.
Круглые углы и блоки с тенью

Занимательная верстка

Статья на Хабре, в которой хабражители пытаются предложить свои варианты решения. Статья на русском.
Занимательная верстка

Использующие пустые теги

Еще больше круглых углов с CSS

Приятная на внешний вид техника, но жаль, что нет реализации PNG под IE.
Еще больше круглых углов с CSS

CSS резиновые круглые углы

Использует по два пустых тега на верх и низ блока. К минусам относится 6 картинок для реализации.
CSS резиновые круглые углы

CSS: Умные углы

Использует один пустой для верха и два для низа. Вполне приятная реализация.
CSS: Умные углы

Как сделать тянущиеся по ширине divы с круглыми краями

Вроде бы и с PNG, но опять же в IE не работает. В качестве плюсов можно назвать урок по рисованию круглых краев :)
Как сделать тянущиеся по ширине divы с круглыми краями

Тянущиеся круглые углы

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

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

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

Использующие JavaScript

Представление DomCorners

В статье есть несколько вариаций на тему количества используемых изображений. Минус в использовании пустых тэгов.
Представление DomCorners

Прозрачные произвольные углы и границы. Версия 2

Приятный пример использования. Красивое оформление. Отбрасывание полупрозрачных теней, но тени не работают в IE.
Прозрачные произвольные углы и границы. Версия 2

Nifty углы со сглаживанием

В своем роде является добавление к скрипту Nifty Corners. Не использует изображений. Можно изменять радиус скругления как по оси X так и по Y.
Nifty углы без сглаживания

Круглые углы

Очень простая реализация, всего один элемент div. Так же в комментариях много дополнений.
Круглые углы

www.curvycorners.net

Отдельный сайт посвященный круглым углам. Красивые примеры использования. Очень простая реализация и много возможностей настройки.
www.curvycorners.net

Nifty Corners Cube

Очень популярный скрипт, позволяющий создать круглые углы без изображений. Очень много вариантов реализации.
Nifty Corners Cube

RUZEE.Borders — круглые углы с помощью яваскрипта

Достаточно большое количество возможностей. Так же основан на Nifty. Возможность создавать тень, но не работает в IE.
RUZEE.Borders – круглые углы с помощью яваскрипта

jQuery скругление

Пожалуй самый большой выбор всевозможных углов. Малое количество HTML-элементов для реализации.
jQuery скругление

Генераторы круглых краев

RoundedCornr

Большое количество возможностей. Генерирует 4 типа блоков, в том числе и кнопки. Единственный минус в наличие пустых тегов в генерируемом коде.
RoundedCornr

Spiffy Corners

Очень простой генератор. Но генерирует очень большое количество элементов .
Spiffy Corners

Spanky Corners 1.1

Простой генератор с хорошим HTML-кодов, плюс генерирует отдельный css-файл для IE.
Spanky Corners 1.1

Spiffy Box

Генерирует одну png-картинку с заданными параметрами. К плюсам можно отнести простой HTML-код. Так же в статье есть ссылка на урок, по которому создан генерируемый код.
Spiffy Box
Tags:HTMLCSSJavaScriptДизайн
Hubs: Website development
Total votes 4: ↑4 and ↓0+4
Views11K
Comments Comments 79

Popular right now