Круглые изображения
Любые растровые изображения сами по себе прямоугольны, поэтому для создания сложной формы в картинках применяют прозрачность или фон, совпадающий с фоном веб-страницы. Действительно круглые изображения можно сделать с помощью стилевого свойства border-radius . К таким изображениям применяется рамка через border и она тоже будет круглой, а не квадратной. Если круглую картинку вставить в , то областью ссылки будет круг.
Чтобы сделать произвольное изображение круглым вначале следует превратить его в квадрат, а затем в стилях добавить свойство border-radius со значением 50% (пример 1). Лучше задавать именно в процентах, так мы не привязываемся к размерам картинок.
Пример 1. Круглые изображения
Результат данного примера показан на рис. 1.
Рис. 1. Круглые изображения
border-radius применяется к любым другим элементам, поэтому мы можем создать пустой квадратный и установить для него фоновую картинку, которую допустимо масштабировать и сдвигать. Само изображение не обязательно должно быть квадратным, потому что оно будет вписано в область заданных размеров. Всё, что не поместится в эту область, будет обрезано. На рис. 2 показана фотографии для добавления её на веб-страницу.
Рис. 2. Фотография акулы
Теперь устанавливаем эту фотографию как фон для класса round , задаём размеры элемента и настраиваем масштаб изображения (пример 2).
Пример 2. Круглый элемент
Результат данного примера показан на рис. 3. Фон по умолчанию устанавливается в левом верхнем углу, так что сдвигаем его на 70 пикселей влево, чтобы акула оказалась в центре круга.
Рис. 3. Круглое изображение
См. также
- border-radius
- Оформление кнопок
Как создать круглое изображение средствами CSS
В CSS есть проблема с отображением круглого изображения, так как изображения имеют прямоугольную или квадратную форму.
Вы всегда можете использовать графический редактор, например, Gimp или Photoshop чтобы обрезать изображение в виде круга или даже использовать онлайн-инструменты, такие как MockoFun, чтобы обрезать изображение онлайн. Но эта заметка о том, как сделать круглые изображения с помощью CSS.
Итак, как сделать круговое изображение только с помощью CSS?
В этой заметке ее автор расскажет вам, как использовать CSS для преобразования прямоугольного или квадратного изображения в круглое.
Округленное изображение с использованием CSS свойством border-radius
Самое простое решение для отображения изображения в виде круга с помощью CSS — это использование border-radius . Это свойство используется для создания закругленных границ для элементов HTML, поэтому оно также работает и для изображений.
Чтобы этот метод работал с изображениями любых размеров (в горизонтальной, вертикальной или горизонтальной ориентации), необходимо, чтобы изображение имело родительский HTML-элемент («обертку»). Мы будем использовать элемент span в качестве оболочки с именем CSS-класса circle-image .
И CSS для создания круглого изображения:
.circle-image < display: inline-block; border-radius: 50%; overflow: hidden; width: 50px; height: 50px; >.circle-image img
Вот и весь код CSS, который вам нужен для отображения круглого изображения!
Автор использовал display: inline-block , потому что элемент span по-умолчанию строчный, и ему нужно менять значение display , чтобы можно было установить размеры.
Установка значения border-radius равным 50% на самом деле и создает закругленное изображение с помощью CSS, поскольку оно округляет углы с радиусом 50% (половиной) от всего размера изображения.
Для img автор просто использовал 100% для размера, чтобы убедиться, что он плотно прилегает к элементу «обертки». Свойство object-fit: cover обеспечивает сохранение соотношения изображения, чтобы оно не растягивалось.
Этот подход довольно прост, но он не лишен неудобств. Например, вы должны указывать размер изображения. В примере автор поставил значение, равное 50px , а вам нужно будет указывать ваш размер.
Округленное изображение с использованием CSS свойством background-image
По сути, мы используем CSS, чтобы установить наше изображение в качестве фона HTML-элемента и сделать элемент округлым. Таким образом мы получим желаемый результат.
и CSS-код, закругляющий наше изображение:
.circle-image
Если вам нужно расположить изображение внутри круга нестандартно, вы можете использовать CSS-свойство background-position , чтобы указать левую и верхнюю позиции или комбинации значений: bottom | top | center | left | right .
В большинстве случаев описанных решений будет достаточно, но что, если вам нужно сделать адаптивное изображение круга с помощью CSS?
Адаптивное закругленное изображение с использованием CSS
Нравится нам это или нет, но адаптивный веб-дизайн является важным требованием для веб-сайтов. Давайте посмотрим, что нам нужно изменить в нашем CSS-коде кругового изображения выше, чтобы сделать его адаптивным.
HTML-код остается прежним, потому что нам все еще нужен элемент-обертка:
и адаптивный CSS-код, закругляющий наше изображение:
.circle-image < display: inline-block; overflow: hidden; width: 33%; padding-bottom: 33%; height: 0; position: relative; >.circle-image img
Итак, что мы изменили?
Ну, во-первых, мы установили ширину ( width ) элемента span («обертки») в процентах. Это делает изображение круга адаптивным. Автор использовал значение, равное 33%, поэтому он будет масштабирован до 1/3 контейнера изображения.
Мы знаем, что для размещения адаптивных изображений, нужно использовать намного больше CSS, таких как, например, медиа-запросы, но это выходит за рамки этой статьи.
Есть один хитрый трюк, чтобы превратить фигуру в квадрат: установка height равной 0 и padding-bottom , равного ширине ( width ) элемента. Это нужно нам для того, чтобы убедиться, что изображение становится кругом, а не сжатым овалом.
Этот трюк автор статьи придумал не сам, а нашел здесь .
И последнее, что мы установили для элемента «обертки» - правило position: relative . Это связано с тем, что изображение внутри будет иметь position: absolute , и мы хотим, чтобы изображение было позиционировано как абсолютное, относительно элемента обтекания, а не всего документа. Наконец, мы снова установим border-radius равный 50%, но на этот раз для изображения. Это сделает изображение закругленным.
Закругленное изображение с использованием CSS свойством clip-path
Теперь давайте рассмотрим другой способ использования CSS для закругления изображений.
CSS-свойство clip-path создает область отсечения, которая определяет, какая часть элемента должна отображаться. Части, которые находятся внутри области, показаны, а те, которые снаружи, скрыты. Одним из значений этого свойства CSS является circle .
clip-path: circle( [ ]? [ at ]? )Таким образом, с помощью этого свойства CSS вы можете обрезать элемент изображения в форме круга с указанным центром и радиусом.
HTML-код остается прежним:
А в CSS-коде адаптивного кругового изображения мы заменяем свойство border-radius на clip-path :
.circle-image < display: inline-block; overflow: hidden; width: 33%; padding-bottom: 33%; height: 0; position: relative; >.circle-image img
При добавлении свойства clip-path изображение обрезается в виде круга с радиусом, равным половине элемента «обертки».
Заключение
Мы рассмотрели несколько вариантов создания кругового изображения с помощью CSS. Теперь вы знаете все их «за» и «против». Если у вас есть какие-либо вопросы или замечания, пожалуйста, напишите автору комментарий в конце статьи и он постарается помочь.
Если вам понравился этот пост и вы хотите изучить HTML и CSS, автор рекомендует вам в следующий раз прочитать пост « Создание красивых HTML-диаграмм ».
Оригинал статьи: CSS Circle Image: “How To” Complete Guide
Автор статьи: John Negoita
Перевод: Земсков Матвей
Рамка с закругленными углами: Скруглённые уголки | htmlbook.ru – Закругление углов в CSS и HTML. Закругление углов картинок
В данной статье мы рассмотрим, каким образом можно украсить фотографии и изображения в программе Photoshop, добавив вокруг них рамки разных видов.
Обычная рамка с прямыми линиями
- Для начала нужно открыть фотографию в программе, вокруг которой мы хотим добавить рамку. После этого нажимаем сочетание клавиш Ctrl+A, чтобы выделить фото.
- Заходим в меню “Выделение”, в котором требуется выбрать инструмент “Граница” (группа “Модификация”).
- В открывшемся окне указываем желаемый размер рамки и жмем OK.
- На боковой панели инструментов выбираем “Прямоугольную область”.
- Щелкаем правой кнопкой мыши по выделенной области и в раскрывшемся контекстном меню останавливаемся на варианте “Выполнить обводку”.
- В окне обводки выполняем настройки на свое усмотрение и щелкаем OK.
- Рамка добавлена. Теперь выделение можно снять, нажав комбинацию Ctrl+D.
Рамка с закругленными углами
Чтобы скруглить края фото, на боковой панели инструментов выбираем
“Прямоугольник со скругленными углами”.
Рамки с рваными краями
- Выполняем те же действия, что и при создании обычной рамки (шаги 1-3).
- Далее активируем режим быстрой маски нажатием клавиши Q (или можно нажать специальную кнопку внизу панели инструментов).
- Холст должен после этого выглядеть примерно так.
- Открываем меню “Фильтр”, где выбираем пункт “Галерея фильтров”.
- В группе “Штрихи” нам нужен фильтр под названием “Аэрограф”. Выставляем параметры (как нам нравится) и жмем OK.
- Должен получиться примерно следующий результат.
- Деактивируем режим маски (тем же способам, которым включили его).
- Не снимая выделение создаем новый слой.
- Выполняем заливку выделения любым цветом.
Рамка с многоступенчатым переходом
- Выбрав инструмент “Прямоугольная область” выполняем выделение, а затем инвертируем его нажатием клавиш Ctrl+Shift+I.
- Активируем режим быстрой маски (клавиша Q или специальный значок на панели инструментов).
- Заходим в меню “Фильтр” и выбираем “Фрагмент” (группа “Оформление”). Выполняем это действие несколько раз.
Заключение
В программе Photoshop представлено огромное количество всевозможных инструментов, пользуясь которыми можно обрабатывать фотографии. Среди них нашлось место и тем, с помощью которых можно добавить рамки вокруг изображений – от обычных прямых линий и закругленных краев до рваных границ и рамок с многоступенчатыми переходами.
Скруглитель фото онлайн (online) — обработка изображений
Скруглитель картинок online
Скруглитель фото онлайн — это сервис позволяющий придать обычному изображению округлую форму. В настоящий момент скруглитель фото онлайн способен придать вашему изображению форму круга, капли, квадрата со скругленными углами, овала. Так же в нём предусмотрен набор цветных фильтров по аналогии с программой instagram. Скруглитель онлайн избавляет от необходимости использования специализированных программ на подобии photoshop. В редакторе вы легко сможете сделать красивую аватарку для социальных сетей, блогов и сайтов. Используйте «Скруглитель» и вопрос как сделать круглую аватарку у вас больше не возникнет.
НазадВернуться к странице сервисов
Для того чтобы придать вашему изображению округлую форму, выполните пару простых действий:
Нажмите и спойлер откроется
1. Выберите фото на компьютере.
2. Выберите область скругления
3. Если необходимо примените фильтры
Теги: обработать фото как в инстаграмме, профессионально обработать фото, сделать аватарку для группы вконтакте, как сделать круглую аватарку
Bootstrap 4 — Управление границами и скруглениями углов элементов
Статья, в которой рассмотрим классы Bootstrap 4 для работы с границами и скруглениями углов элементов.
Добавление и удаление границ
Для управления границами элемента предназначены классы border , border-0 , border-top , border-right , border-bottom , border-left , border-top-0 , border-right-0 , border-bottom-0 и border-left-0 .
устанавливает границы для всех сторон элемента. Классы border-top , border-right , border-bottom и border-left выполняет это действие только для одной из них. А именно класс border-top устанавливает верхнюю границу, border-right – правую, border-bottom – нижнюю, а border-left – левую. Другая часть классов ( border-top-0 , border-right-0 , border-bottom-0 и border-left-0 ) выполняет обратное действие, а именно убирает одну из границ ( border-top-0 – верхнюю, border-right-0 – правую, border-bottom-0 – нижнюю, border-left-0 – левую). Последний класс из этой группы ( border-0 ) предназначен для убирания у элемента всех границ.
Например, для установления верхней и нижней границы HTML элементу можно воспользоваться одним из следующих 2 способов:
Пример, как к элементу можно добавить только левую границу:
Например, для того убрать все границы у элемента к нему необходимо добавить класс border-0 .
Классы для изменения цвета границ
Для задания цвета границ, предназначены классы border- . Вместо необходимо указать название темы ( primary , secondary , success , danger , warning , info , light , dark или white ).
Например, добавим к элементу границу справа и установим для неё тему success .
Например, добавим к элементу границу снизу с темой danger .
Скругление углов элемента
Во фреймворке Bootstrap 4 имеются классы, с помощью которых можно очень просто скруглять углы элементам. Одни классы ( rounded , rounded-circle ) выполняют это действие для всех углов, а другие ( rounded-top , rounded-right , rounded-bottom , rounded-left ) — только для определённых. Кроме этого, в Bootstrap 4 имеется класс ( rounded-0 ), который позволяет выполнить обратное действие, а именно убрать скругление углов.
Принцип действия этих классов основан на использовании CSS свойства border-radius .
Например, создадим кнопку со скруглёнными углами:
Наведи на меня курсор
Например, сделаем изображение круглым ( rounded-circle ):
Пример, как можно сделать изображение со скруглёнными краями ( rounded ) и скргулёнными только справа ( rounded-right ):
Как закруглить углы изображения при помощи фотошопа
Прямые углы изображений нравятся всем. Но все-таки бывают случаи, когда эти самые углы требуется закруглить. Тогда Вам на помощь вновь придет программа фотошоп. В этой статье разберем один из многих способов как это можно сделать. Имейте ввиду, мой способ предполагает также и небольшое отсечение изображения по краям, это, своего рода, жертвоприношение во имя округлых углов.
Для тех кто любит больше наглядности, я записал видеоурок, который можно посмотреть в конце этого урока. Итак, начнем закруглять углы изображения:
Шаг 1
Откройте исходное изображение, допустим у меня такое:
Шаг 2
Сочетанием клавиш Ctrl+Shift+N создаем новый слой.
Затем выберите на панели инструментов инструмент «Прямоугольник со скругленными краями» U. На панели параметров укажите желаемый радиус закругления. Я взял 20 пикселей. На этой же панели параметров установите значение «выполнить заливку пикселов».
Теперь нарисуйте квадратик с закругленными краями поверх нашего с вами изображения. Не стоит оставлять много свободного места по краям. Попытайтесь подобрать размер так, чтобы пришлось обрезать как можно меньше. Вот, что должно получиться:
Нарисованный квадрат можно двигать при помощи мыши. Для этого выберите слой с квадратом, выберите на панели инструментов инструмент «Перемещение» – и смело двигайте.
Если края фигуры начнут «прилипать» к краям изображения, то нажмите и удерживайте клавишу Ctrl и продолжайте двигать фигуру.
Также при помощи комбинации клавиш Ctrl+T, вы можете изменить размер фигуры, путем ее растяжения при помощи мыши. Чтобы фигура не деформировалась при растягивании, нажмите и удерживайте клавишу Shift и тяните за углы, и тогда квадрат будет растягивать пропорционально.
В результате данных манипуляций получим квадрат с закругленными краями почти такого же размера что и исходное изображение.
Шаг 3
Теперь нажмите и удержите зажатой клавишу Ctrl, затем левой кнопкой мыши кликните на миниатюру слоя с только что нарисованным квадратом. Вы увидите пунктирную линию вокруг квадрата, это говорит о том, что он выделен.
Шаг 4
Разблокируем фоновый слой.
По умолчанию, все изображения, открываемые в фотошопе становятся фоновым изображением. Фотошоп именует такой слой как «Фон», а также блокирует его от лишнего редактирования. Об этом нам сигнализирует маленькая иконка замочка.
Чтобы разблокировать такой слой, нужно дважды кликнуть по нему. Появится диалоговое окно «Новый слой». Ничего не изменяйте, просто нажмите на ОК. Теперь замочек должен исчезнуть.
Шаг 5
На панели слоев кликните на самый первый слой с нашим исходным изображением и нажмите сочетание клавиш Ctrl+Shift+I. В итоге у нас должна выделиться вся область вне границ нашего квадрата. Это называется инверсия выделения. Присмотритесь внимательней, что изменилось:
Шаг 6
Теперь нажмите комбинацию клавиш Ctrl+X (редактирование — вырезать) для удаления выделенной области. Выделение должно исчезнуть, а там, где когда-то было изображение, появится шахматный фон (прозрачность).
Шаг 7
Теперь сделаем невидимым наш слой с фигурой. Для этого на панели со слоями нажмите на значок глаза напротив слоя с квадратом. Вот и появилось исходное изображение с закругленными углами.
Шаг 8
Выполните команду Изображение — Тримминг, чтобы фотошоп удалил все лишнее пространство вокруг изображения. В итоге режим прозрачности должен быть виден только в углах.
В дальнейшем, чтобы использовать такое изображение, его необходимо сохранить в формате PNG! В этом случае углы так и останутся прозрачными. Иначе, если сохранить, например, в формате JPG, углы автоматически станут с белым фоном.
Подробнее о форматах можно почитать здесь.
Итак, все готово. Изображение с закругленными углами будет выглядеть так:
А как сделать только, например, один закругленный угол?
Очень просто. Вернемся на тот этап, когда мы рисовали фигуру. Растяните ее так, чтобы вам был виден только один закругленный угол, а три других были бы скрыты за пределами холста. Вот, а дальше следуйте по вышеописанной инструкции. Все аналогично.
Надеюсь инструкция вам помогла и вы сможете сделать что-нибудь классное! Успехов.
Заметили ошибку в тексте — выделите ее и нажмите Ctrl + Enter. Спасибо!
Как закруглить углы на изображении в фотошопе?
Доброго всем утра, дня, вечера или ночи. С вами снова и опять Дмитрий Костин. Как-то я просматривал разные картинки и тут мне приглянулись некторые из них. А приглянулись он тем, что у них были закруглены края. Сразу как-то интереснее смотрится. Вы не находите? И поэтому в сегодняшнем уроке я хотел бы вам рассказать, как закруглить углы в фотошопе, чтобы фото смотрелось поинтереснее.
Вот чем я люблю фотошоп, так это тем, что во многих случаях одно и тоже дело можно сделать несколькими способами. Так и здесь. Давайте приступим к нашему фотошопству.
Простое сглаживание
- Откройте любое изображение в фотошопе, например фотографию машины.
- Теперь выберете инструмент «Прямоугольное выделение» и выделите изображение, только не полностью, а так, чтобы со всех сторон оставалось немного места.
- Теперь идите в меню «Выделение» — «Модификация» — «Сгладить» . Вам откроется небольшое окошко, где вам надо будет ввести радиус сглаживания. Ну тут всё зависит от размера исходного изображения. Для данного изображения я решил поставить 20 пикселей. Но чем больше картинка — тем желательно и больше ставить радиус. Тут экспериментируйте. В случае чего вы всегда можете отменить последнее действие и попробовать другое число.
- Вы видите? Теперь углы на выделении закруглились. Но как вы понимаете это еще не все. Вам эту область нужно вырезать. Для этого идите в меню «Редактирование» и выберете пункт «Вырезать» или воспользуйтесь комбинацией клавиш CTRL+X. После этой манипуляции у вас исчезнет содержимое внутри выделенной области. Получилось? Отлично!
- Теперь вам необходимо создать новый документ в фотошопе. Сразу говорю, что не надо выставлять никаких параметров ширины и высоты, так как после того, как мы вырезали изображение, эти параметры автоматически подстраиваются под параметры вырезанного объекта. Т.е. просто нажимаете ОК.
- Ну и последний штрих. Теперь вам надо вставить наш вырезанный объект. Для этого идите в меню «Редактирование» и выберете пункт «Вставить» , либо нажмите комбинацию клавиш «CTRL+V». Вот и всё. Как видите, теперь мы получили изображение с закругленными краями. Вам останется только сохранить это изображение.
Сглаживание с использованием границ
Этот способ похож на предыдущий, но всё же сильно отличается. Проделывать всё будем с тем же самым изображением.
- Выделите всю область целиком. Для этого воспользуйтесь либо инструментом «Прямоугольное выделение», либо нажмите комбинацию клавиш CTRL+A.
- Теперь выберете «Выделение» — «Модификация» — «Граница» . Вам вылезет небольшое окошко, где вы должны будете выбрать размер границы. Я поставил 15 пикселей. Вы можете поэкспериментировать.
- Как видите у вас выделение стало двойным. Это нормально. И следующим шагом вам нужно сделать то же самое, что и в первом способе, а именно выбрать «Выделение» — «Модификация» — «Сгладить» . Поставьте там там радиус закругления. Я поставлю 30.
- Ну а теперь нажмите CTRL+X и у вас будет вырезана область вокруг вашего изображения и благодаря этому ваше основное изображение станет с закругленными углами. Правда тут останется фон вокруг картинки. Но он не будет заметен (если он белый конечно). Ну а если уж совсем напрягает, то вы сможете кадрировать изображение и ли что-нибудь другое, чтобы сделать убрать лишний фон. Ну а так сохраните, и всё будет good.
С помощью создания фигуры
Вот третий способ уже кардинально отличается от двух предыдущих. Так что передохните пару секунд и едем дальше. Изображение менять не буду и опять загружу эту машину в фотошоп.
- Но для дальнейших действий нам понадобится одна фигура. Идите в панель инструментов и там выберете инструмент «Прямоугольник с закругленными краями» из группы инструментов «Фигуры» .
- Теперь воспользуйтесь этим инструментом также, как и прямоугольным выделением, т.е. зажмите левую кнопку мыши в левом верхнем углу, а затем тяните всё это дело в правый нижний угол. Таким образом этот прямоугольник с закругленными краями должен закрыть нашу основную картинку.
- Как вы заметили, фигура создалась на новом слое. Это-то нам и нужно. Вот только последовательность их нас не устраивает. Вам нужно поставить слой с картинкой поверх слоя с прямоугольником. Для этого зажмите левую кнопку мыши на слое с изображением и переместите его на одну позицию выше. Но перед этим нажмите на замочек, чтобы разблокировать слой. Тогда слой с машиной встанет поверх фигуры.
- Теперь выделите слой с изображением и нажмите на нем правой кнопкой мыши, после чего выберите «Создать обтравочную маску».
Вы видите, что у вас в итоге получилось? Картинка стала с загругленными краями, а все из-за того, что она отображается только так, где стоит наш нарисованный закругленный прямоугольник. Но теперь вы можете обрезать лишний фо с помощтю инструмента"Рамка", либо же сразу сохранить картинку и у вас уже будет отдельное изображение с закругленными углами.
Попробуйте проделать все сами, а заодно и скажете, какой из представленных способов болле предпочтителен вам.
И кстати, если у вас есть пробелы в фотошопе или вы его просто хотите полностью изучить в кратчайшие сроки, то очень рекомендую вам посмотреть один [urlspan]замечательный курс по фотошопу для начинающих[/urlspan]. Курс отлично сделан, рассказано и показано всё просто великолепно и каждый материал разбирается очень подробно.
Ну а на сегодня я свой урок заканчиваю. Не забудьте подписаться на новые статьи и поделитесь этим со своими друзьями. Рад был вам на моем блоге. Жду вас снова. Пока-пока.
С уважением, Дмитрий Костин
Всем привет! Меня зовут Дмитрий Костин. Я автор и создатель данного блога. Первые шаги к заработку в интернете я начал делать еще в 2013 году, а данный проект я завел в 2015 году, еще когда работал IT-шником. Ну а с 2017 года я полностью ушел в интернет-заработок.
На данный момент моим основным источником дохода являются трафиковые проекты, среди которых сайты, ютуб-канал, каналы в Яндекс Дзен и Mail Пульс, телеграм канал и паблики в социальных сетях. На своем блоге я стараюсь делиться своими знаниями в сфере интернет-заработка, работе в интернете, а также разоблачаю мошеннические проекты.