Как скруглить изображение css
Перейти к содержимому

Как скруглить изображение css

  • автор:

Как сделать круглые изображения?

Превратить изображения в круг и добавить вокруг них рамку.

Решение

Для скругления уголков у элементов в CSS3 предназначено свойство border-radius , значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.

Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round , с тенью и рамкой.

Пример 1. Круглые изображения

HTML5 CSS3 IE Cr Op Sa Fx

    Круглые изображения   

Результат данного примера в Opera показан на рис. 1.

Круглые изображения

Рис. 1. Круглые изображения

Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).

Рамка в браузере Chrome

Рис. 2. Рамка в браузере Chrome

Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow . Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.

Пример 2. Рамка из тени

HTML5 CSS3 IE Cr Op Sa Fx

    Круглые изображения   

Результат данного примера показан на рис. 3.

Рамка в браузере Chrome

Рис. 3. Рамка в браузере Chrome

Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin .

Закругление углов изображения на стилях CSS

Закругление углов изображения на стилях CSS

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

Сейчас веб мастера используют все больше закругление, оно может быть как в самой основе стилистики дизайн, так и второстепенные, которым относится, это материал, что установлен в статье или мануале, как фотография или картинка, про них речь идет. Чтоб все показывало и визуально просматривалось, здесь нужно браузеры, что обновлены, это берем самые популярные «FireFox, Chrome» или те, что сделаны на их движке или основе.

Закругление углов у блоков DIV

Начнем для наглядности CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, где сразу предоставлен пример.

border-radius: 5px;

Закруглённые углы (свойство border-radius)

Закругление углов у картинок:

Берем за основу любой формат снимка или фото, что опять как пример, где стили не применены.

Скругленные углы - CSS на изображение

Теперь добавляем стиль

border-radius: 5px;

Скругленные углы - CSS скругление углов

Чтоб немного украсить, добавляем красивую окантовку;

border-radius: 7px;
border: 3px #00t solid;

CSS border-radius

Есть возможность прописать тени;

border-radius: 10px;
border: 5px #ccc solid;
box-shadow: 0 0 8px #001;

Как закруглить углы внутрь блока с обводкой

Можете убрать обвод и просто закруглить углы и добавить теней;

border-radius: 9px;
box-shadow: 0 0 9px #000;

Закругление картинки с тенями

И завершим самым интересным, это сделать картинку по всем 4 углам и они будут разными:

border-radius: 0 489px;
border: 5px #cfc solid;
box-shadow: 0 0 7px #735;

Закругление углов в CSS и HTML

Понимая как можно разнообразно все выстраивать, теперь вы можете свой портал разнообразить.

Как добавить скругленные уголки у фотографии фиксированного размера?

Кроссбраузерно установить скруглённые уголки у фотографий, размер которых известен и задан.

Решение

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

Вначале следует подготовить изображение с уголками. В графическом редакторе создаем прозрачную основу и заливаем уголки цветом, совпадающим с цветом фона веб-страницы. На рис. 1 показано изображение размером 120х120 пикселов, назовем его round.png . Шахматное поле обозначает прозрачность, а уголки отмечены темным цветом.

Рис. 1. Изображение с уголками для наложения на фотографию

Далее создаем слой, в который добавляем два изображения — фотографию и картинку с уголками. Для управления положением уголков тегу следует добавить уникальный класс или поместить его внутрь контейнера , как показано в примере 1. Позиционирование основного блока должно быть задано относительным ( position : relative ), а внутреннего с уголками — абсолютным ( position : absolute ).

Пример 1. Создание фотографии с уголками

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Скругленные уголки    

Результат данного примера показан на рис. 2. Для белого фона веб-страницы был подготовлен рисунок с белыми уголками.

Фотографии со скругленными уголками

Рис. 2. Фотографии со скругленными уголками

Поскольку относится к блочным элементам, то изображение внутри него всегда будет начинаться с новой строки. Для расположения нескольких изображений в один ряд в примере применяется стилевое свойство float со значением left . Здесь надо учесть, что стоит добавить после фотографий текст, как он тоже будет занимать место справа от изображений, а не начинаться с новой строки. Поэтому для отмены действия float следует добавить после последнего блока с фотографией.

Второй способ имитации скругленных уголков связан с наложением фонового рисунка поверх фотографии. Для этого несколько модифицируем пример 1, оставив пустой вместо картинки с уголками (пример 2). В стилях слоя следует указать путь к фоновому рисунку через свойство background , а также задать абсолютное позиционирование ( position : absolute ). Это сделано, чтобы задать точное положение уголков относительно родителя (слоя с именем roundcorner ), с этой целью добавляются свойства left и top с нулевыми значениями. Также необходимо задать ширину и высоту блока как 100%.

Пример 2. Использование фонового рисунка

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Скругленные уголки    

Скругление углов. Обзор методов.

скругляем углы

Сейчас прямо-таки эпоха скругленных уголков.

Где дизайнеры только их не используют: скругляют блоки

блок со скругленными углами

меню со скругленными углами

фото со скругленными углами

Бесспорно дизайны стали симпатичней. Да и усилий вроде не так много нужно: несколько секунд работы дизайнера и пара минут чтобы сверстать эти углы.

Но все ли так просто и безоблачно? Посмотрим на такой вот дизайн:

фото со скругленными углами на фотофоне

нужно скруглить фото расположенном на фоне с более, чем одним цветом (другая фото или градиент). Да еще учесть что блок может «плавать» по этому фону. Т.е. вырезать четыре картинки и разместить их по углам уже не получится.

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

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

  • быть простым в использовании
  • быть универсальным
  • минимум дополнительных тегов в коде (чтобы облегчить DOM и сохранить семантику)
  • минимум внешних файлов: картинок, javascript (сократить запросы к серверу)

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

Почти идеальное решение — CSS3 border-radius

В W3C начало рекомендовать разработчикам браузеров свойство border-radius, которое решало одним махом все проблемы со скруглениями.

Преимущества

  • нет необходимости во внешних файлах (картинках, js)
  • HTML код предельно чист и семантичен
  • рендеринг страницы максимально быстрый
  • скругляется что угодно (картинки, блоки с любым фоном, на любом фоне)
  • скругляется как угодно (задается угол скругления, какие именно углы скруглять, можно задать скругленную рамку заданным цветом и толщиной)

Недостатки

  • на дворе весна, а border-radius понимает только Opera 10.5 (подпольные браузеры в счет не беру). В чистом виде идеальное решение при всем оптимизме нам светит через 2-3 года. Частично проблему кроссбраузерности исправляют свойства -moz-border-radius (для mozilla) и -webkit-border-radius (для webkit-браузеров), но в сумме это не покрывает и половины пользователей.
  • браузеры на движке webkit вроде как делают скругление без сглаживания

update С появлением плагина CSS3 PIE ситуация изменилась: CSS3, расширения браузеров и этот плагин, теперь можно охватить около 90% пользователей. Для большинства проектов этого достаточно, тем более, что число старых браузеров с каждым месяцем становится ощутимо меньше, плюс скругления не являются критически важным элементом дизайна (сайта): пользователи всех браузеров информацию сайта увидят. Вот как это выглядит в CSS коде:

.roundedEl

Заметки

  • таким способом скруглить картинку зачастую проще, если ее поместить в бэкграунд (background);
  • если картинка размещена в контейнере, который имеет скругленные углы, чтобы картинка не выходила за рамку родителя, следет ему (родителю) добавить overflow: hidden;
  • update by Денис Кораблев Если применить скругление углов к таблице, ИЕ всех версий подвисает. Причем может проявиться только при обновлении страницы или переходе на другую. Решение — обернуть таблицу в дополнительный и уже к нему применять скругление;
  • проблемы с border-radius.

Скругленные углы с помощью картинок

Метод предельно прост — каждый уголок будет картинкой, которую абсолютным позиционированием размещаем внутри блока по углам блока-родителя. Например, имеем по дизайну вот такой заголовок:

заголовок со скругленными углами

При этом он должен тянуться вертикально и горизонтально. Наши действия: вырезаем углы и склеиваем их в одну картинку чтобы минимизировать число отдельных файлов (изображение увеличено для наглядности)

Далее городим страшную конструкцию в HTML, а стилями расставляем углы по местам:

 

Холодильное оборудование

h1 < background: #d9f004; padding: 10px 20px; position: relative; >.cornerTL, .cornerTR, .cornerBR, .cornerBL < width: 4px; height: 4px; overflow: hidden; position: absolute; top: 0; left: 0; background: url(path-to/corners.png); >.cornerTR < left: auto; right: 0; background-position: 0 -4px; >.cornerBR < left: auto; right: 0; top: auto; bottom: 0; background-position: 0 -8px; >.cornerBL

Преимущества

  • простота реализации
  • минимальное к-во внешних файлов

Недостатки

  • наличие внешнего файла(ов)
  • избыточность HTML кода, его не семантичность
  • при изменении цвета блока или радиуса скругления придется перерезать картинки заново, править стили
  • сложно, а иногда и невозможно сделать таким способом скругления (например, скруглить фото на неоднородном фоне — см. пример в начале)

Метод отлично рассмотрен на техногрете Сергеем Чикуенком.

Скругленные углы с помощью jQuery.corner

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

Преимущества

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

Недостатки

  • нет возможности сделать углы изображениям (в описании скрипта сказано, что применим только к блочным элементам)
  • не работает кроссбраузерно на неоднородном фоне
  • косяки, если скругляемый элемент имеет неоднородный фон
  • возможны косяки с расположением углов в IE6
  • углы реализуются с помощью миллиона динамически вставленных элементов в DOM (что-то мне подсказывает, что это не лучшим образом скажется на скорости анимаций на страницах)

Эти косяки вылезли за 10 минут тестирования. На самом деле думаю косяков больше — в топку такой плагин.

rocon — js библиотека для создания скругленных углов

Кто делает

Автор библиотеки Сергей Чикуёнок.

Что делает

Скругляет углы у элементов с однородным фоном на любом фоне. Плюс есть возможность добавления скругленного бордюра. Примеры.

Как делает

Для mozilla и браузерах на движках webkit используются специфические CSS правила -moz-border-radius, -webkit-border-radius. Для Opera используется canvas, для IE VML. Детали в статье автора «rocon — подробности».

Где взять

  • скачать rocon
  • баг лист

Преимущества

  • быстро работает
  • довольно прост в применении
  • небольшой вес библиотеки
  • продумана возможность резиновости блоков
  • продумано динамическое добавление блоков со скруглениями
  • один внешний файл при любом числе углов

Недостатки

  • пока не реализованы скругления для блока с неоднородным фоном (например с градиентом)
  • не применимо для изображений ()
  • местами еще сыровата библиотека

Верим, что Сергей найдет время доработать скрипт. Ждем этого дня не меньше, чем Нового года.

DD_roundies — еще одна библиотека для скругления углов

Кто делает

Как делает

Принцип несколько схож с библиотекой rocon — для mozilla и webkit используются CSS правила -moz-border-radius и -webkit-border-radius. Для IE используется VML, для Opera SVG. Главное отличие от rocon — скгругленный блок отрисовывается целиком, что делает резиновость блока довольно трудной (ресурсоемкой). В rocon каждый угол — это отдельный элемент.

Где взять

Скачать библиотеку, посмотреть примеры, прочитать о синтаксисе можно на странице скрипта.

Преимущества

  • прост в применении
  • работает на неоднородном фоне
  • есть возможность задания разных радиусов для разных углов

Недостатки

  • слабая кроссбраузерность (как минимум есть проблемы в IE8, Opera версии меньше 10)
  • с багами работает скругление блоков с неоднородным фоном
  • не применимо к картинкам
  • медленная работа в IE при изменении размеров блока из-за постоянного пересчета размера блока и перерисовки фигуры

Вывод

В реальных сайтах малоприменимо.

Скругление картинок на стороне сервера. Библиотека ImageMagick.

Что делает

Дает возможность преобразовывать изображения на стороне сервера: изменять размеры, поворачивать и еще многое чего. Меня же сейчас интересует возможность создания изображения со скругленными углами. Т.е. уже с сервера приходит картинка нужной формы и версткой с ней ничего делать не нужно.

Где почитать

  • Официальный сайт
  • Обработка изображений с помощью ImageMagick

Преимущества

  • не нужно подключать дополнительные внешние файлы для скругления (скрипты, картинки)
  • кроссбраузерность
  • есть возможность создания обводки (бордюра) для изображения

Недостатки

  • применимо только к изображениям (img)
  • если изображение на веб странице должно быть расположено на неоднородном фоне, тогда придется картинки выдавать в формате png-24, что ощутимо может повлиять на вес изображения

Зачем этот способ знать верстальщику

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

CSS3 + вендорные префиксы + PIE

update: суть простая — используем CSS3 свойство border-radius для Opera 10.5+ и новых браузеров, которые будут появляться дальше, для некоторых продвинутых браузеров используем специфические (вендорные) свойства, для IE6-8 плагин PIE:

#roundedBox

#roundedBox < behavior: url(path-to/PIE.htc); zoom: 1; >
  • простота и скорость реализации;
  • чистый HTML код;
  • отсутствие картинок;
  • только IE6-8 будут подгружать дополнительный файл PIE.htc.
  • не все старые браузеры поддерживают вендорные префиксы (например, скругленные углы таким способом не увидят пользователи браузеров FF ниже версии 3.6, Opera версии ниже 10.5);
  • браузеры поддерживающие CSS скругления, несколько по разному могут отобразить скругленные углы.

Подытожим

Идеального решения для скругления углов ныне нет. Поэтому в зависимости от поставленных задач и целей конкретного проекта ищем возможности реализации из доступных решений.

Материалы

  • W3C draft :: border-radius
  • jQuery Corner Demo
  • rocon — подробности
  • Code-only rounded HTML boxes
  • Официальный сайт ImageMagick
  • CSS приемы
    • «Дергание» сайта
    • background position со смещением
    • clearfix
    • CSS прозрачность
    • CSS хаки
    • RGBA — CSS полупрозрачность
    • Затемнение фона
    • Кроссбраузерный

    • Обнуление отступов
    • Порядок описания ссылок
    • Прелоад изображений
    • Сброс стилей
    • Сокращения в CSS
    • Убираем рамку с эл-ов в фокусе
    • Условные CSS
    • Условные комментарии
    • Поворот вокруг своей оси
    • Поворот объекта вокруг свой
    • Resize для textarea в Safari и Chrome
    • Блочная верстка форм
    • Кастомные checkbox и radio на CSS
    • Кросбраузерные input и textarea
    • Кроссбраузерный button
    • Нестандартные checkbox
    • Нестандартные radio
    • Нестандартные select
    • Нестандартные select multiple
    • Нестандартные поля выбора файла
    • Нестандартные текстовые поля
    • О кроссбраузерности placeholder
    • Отступы у checkbox и radio
    • Оформление input type=search
    • Резиновая кнопка
    • Текст в поле type=»password»
    • Блоки равной высоты в строке
    • Колонки равной высоты
    • Прижимаем подвал к низу
    • Ресайз окна: потомок перерос родителя
    • Сайт в центре экрана
    • Фиксированная колонка + резиновая + clear:both
    • CSS 3D лента
    • CSS3 всплывающие подсказки
    • IMG внутри блока — убираем странный отступ
    • IMG: меняем рисунок при наведении
    • Аккордеон на чистом CSS3
    • Валидный target=»_blank»
    • Верстка рейтингов
    • Верстка содержания
    • Вставка спецсимволов в генерируемый контент
    • Вставка стрелок
    • Индивидуальные стили для li. Избавляемся от классов.
    • Масштабируемая картинка в резиновой колонке
    • Многоколоночный текст на CSS3
    • Нестандартное подчеркивание
    • Отменяем обтекание текстом картинки
    • Оформление внешних ссылок
    • Оформление изображений по align
    • Оформляем «ol»
    • Правильные анонсы новостей
    • Список определений. Требуем невозможного.
    • Firefox
      • -moz-box-shadow и -moz-border-radius — это кошмар CPU
      • Позиционирование внутри button
      • Ширина input type=file
      • Onload в IE9
      • z-index в IE6-7
      • Баг с текстом при применении Alpha фильтра
      • Масштабирование и PIE
      • Отступы в кнопках в IE6-7
      • Проблемы с em
      • Эмуляция after и before для IE 6-7
      • Эмуляция data:URL для IE6-7 — используем MHTML-включение
      • hasLayout
      • Max-width
      • Min-height
      • Min-width
      • Min-width и max-width одновременно
      • PNG и прозрачность
      • Высота блока 1px
      • Дублирование символов
      • Дырка под футером
      • Как перекрыть select
      • Обрезка контента c отрицательным margin в IE6
      • Отступы плавающих блоков
      • Проблемы с размерами блоков
      • Псевдокласс :first-child
      • Псевдокласс hover в IE 6
      • Селектор потомков >
      • Селекторы атрибутов [type=…]
      • Сестринский селектор
      • Смещение на 1px
      • Ссылки с вложением
      • Устраняем flickering
      • Эмуляция position:fixed
      • overflow-y
      • Не подгружаются шрифты @font-face
      • Проблема с oveflow: hidden
      • Скругление img
      • HTML шаблон для мобильных устройств
      • Выпадающее меню на CSS
      • Выравнивание навигации из блоков по центру
      • Выравнивание навигации по середине
      • Резиновое меню
      • Резиновое меню из блоков
      • Убираем класс для первого элемента
      • Box-sizing: переключаем блочную модель
      • inline-block: простое свойство для непростых задач
      • Вертикальная позиция для строчного элемента
      • Вертикальное выравнивание
      • Выравнивание по центру с position: absolute
      • Вычисляемые отступы
      • Два в одном: позиция + размеры
      • Долой отступы между строчными элементами (и блоками)
      • Обходим схлопывание margin
      • Центрирование картинки в блоке
      • Центрирование резинового блока по горизонтали
      • Активация flash
      • Вставка flash в HTML
      • Вставляем ролик с YouTube
      • Как отключить flash
      • Как перекрыть flash
      • Параметры для вставки объектов
      • Ссылка на flash объекте
      • CSS треугольники
      • Аппаратное ускорение анимации
      • Встраиваем изображения — data:URL
      • Градиент: CSS3 против CSS2 + картинка
      • Лесенка спрайтов — сложный случай поклейки
      • На одну картинку меньше. Спецсимвол ×
      • Необычные тени с CSS3 box-shadow
      • Оптимизация Google Web Fonts
      • Оптимизация фонов с помощью Canvas
      • Проблемы с border-radius
      • Псевдоэлемент before для маркера списка
      • Скругление углов. Обзор методов.
      • Сокращаем HTML5 код
      • Спрайты: меньше картинок — больше скорость
      • Тень для блока
      • Фигуры с углами на CSS
      • Шаблоны градиентов
      • Дополнение Skype
      • Подключить favicon
      • Профилактика сайта: максимально простое оповещение
      • Ссылки на skype
      • @font-face в деталях
      • Cufon — нестандартный шрифт средствами JS
      • font-size: 100.01% для html
      • Безопасные шрифтовые CSS стеки для англоязычных текстов
      • Безопасные шрифтовые CSS стеки для рунета
      • Безопасные шрифты
      • Вертикальный текст
      • Используем псевдоэлемент :first-letter
      • Контур для текста
      • Нестандарный шрифт. Быть ему или нет?
      • Нестандартный шрифт средствами CSS
      • Плавающий :first-letter
      • Подмена текста изображением
      • Соответствия шрифтов Windows, Mac и Unix/Linux
      • Строчный :first-letter
      • Текст под углом
      • Текст с CSS градиентом
      • Тень для текста
      • Эффект отражения

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *