Как сделать круглый div / круглое фото?
Открыл недавно метрику на своем старом сайте, а на него есть несколько переходов с поисковиков. Посмотрел историю поисковых запросов и удивился, почти каждый день есть несколько посещений по запросам «как сделать круглый div», «как сделать круглое фото» и подобное. Оказывается многих интересует подобный вопрос, так давайте же разберем его.
Чтобы сделать круглый блок, необходимо воспользоваться CSS-свойством border-radius и задать ему значение 50%, то есть округлить каждый угол на половину ширины/высоты. В результате мы получим такое:
Как видим, мы получили почти круг, а почти, потому, что округление мы применили к прямоугольному блоку, чтобы получился красивый, правильный круг, необходимо прямоугольник превратить в квадрат, для этого блоку задаем одинаковую высоту и ширину:
- HTML (код блока)
- CSS (правила для скругления)
Код для вывода красивых аватаров пользователей с использованием теней и рамок.
Способы создания кругов с помощью CSS стилей
Довольно часто при верстке веб-проекта есть потребность в создании круглых элементов: круглые кнопки, круглые миниатюры, круглые иконки, или даже целые круглые контейнеры. В некоторых случаях выйти из ситуации можно с помощью простых картинок, а иногда такой подход не помогает. Как же решить проблему, и только с помощью CSS стилей? В сегодняшнем уроке мы рассмотрим 5 основных способов, с помощью которых вы сможете создавать на своих сайтах любые круглые элементы.
Круги в CSS
Существует несколько методов создания круглых форм в HTML с помощью CSS стилей, каждый из которых имеет как свои плюсы, так и минусы. Давайте же рассмотрим самые популярные решения, которые позволят вам сделать круги в CSS.
Решение №1: радиус границы (border-radius)
Самая распространенная техника для создания кругов – это скругление всех углов на 50%. Это самый простой способ, и он отлично поддерживается браузерами. Свойство border-radius также можно применять к границам и теням.
Практический пример:
Если вы хотите получить не круг, а прямоугольник со скругленными краями, тогда установите для свойства border-radius значение менее 50%.
Решение №2: использование SVG
SVG может включать элемент <circle> , которому можно добавить стили, аналогично любому другому пути ( path ) масштабируемой векторной графики. Этот элемент имеет хорошую поддержку браузерами и эффективен для создания анимации, но для него нужно добавлять чуть больше разметки, чем для других методов. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус окружности (атрибут r ), меньше, чем значение viewBox в SVG.
Практический пример:
Решение №3: свойство Путь обрезки (Clip Path)
Свойство Путь обрезки ( clip-path ) появилось в CSS совсем недавно. Поддержка браузерами приличная, но не повсеместная. Свойство clip-path не влияет на макет элемента, что означает, что оно не будет влиять на границы, но будет скрывать внешние тени. Это может быть и хорошим решением, или плохим, в зависимости от того, какую цель вы преследуете.
Практический пример:
Решение №4: использование радиального градиента
Вы можете использовать фоновое изображение и радиальный градиент, чтобы визуально заполнить элемент кругом. Это не очень эффективный метод, поскольку края круга могут казаться неровными или размытыми в зависимости от браузера.
Практический пример:
Решение №5: обрезка контента с помощью круга в CSS
Вы можете обрезать элемент <img> по размерам круга, используя свойство border-radius .
Практический пример:
Этот метод имеет некоторые ограничения:
- Элемент не отзывчивый (responsive) относительно своего контейнера
- Нельзя применить внутренние тени в элементу (хотя можно попробовать использование псевдоэлементов :after или :before)
- Свойство подгонки объекта object-fit: cover , которое предотвращает искажение неквадратных изображений, не поддерживается в IE11
Ниже вы можете увидеть демо всех рассмотренных сегодня практических решений как сделать круги в CSS.
Вот и все на сегодня! Из сегодняшней практической статьи вы узнали, как с помощью разных способов можно сделать круги в CSS. Спасибо, что читаете нас!
Создаем закруглённые уголки с помощью CSS 3
Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.
Кроссбраузерная совместимость.
К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).
Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.
Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.
Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
<body>
<div ></div>
</body>
В CSS зададим для него высоту, ширину и цвет фона:
#box <
width:590px;
height:100px;
background-color:#6B86A6; >
Добавляем свойство border-radius:
Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box <
-moz-border-radius: 20px;
>
Теперь все четыре угла будут иметь радиус 20px: 
Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
#box <
-moz-border-radius:20px 40px;
>
Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box <
-moz-border-radius:10px 20px 30px 40px;
>
Объявляем свойство border-radius для каждого угла
- moz-border-radius-topleft для верхнего левого угла;
- moz-border-radius-topright для верхнего правго угла;
- moz-border-radius-bottomright для нижнего правого угла;
- moz-border-radius-bottomleft для нижнего левого угла;
Горизонтальный и вертикальный радиус
Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#box <
-moz-border-radius-topleft: 30px 15px;
> 
Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.
При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box <
-moz-border-radius: 30px / 15px;
>
#box <
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
>
Использование свойства border-radius в Safari и Chrome.
- -webkit-border-top-left-radius для верхнего левого угла;
- -webkit-border-top-right-radius для верхнего правого угла;
- -webkit-border-bottom-right-radius для нижнего правого угла;
- -webkit-border-bottom-left-radius для нижнего левого угла;
Этот код не будет работать в Safari и Chrome:
#box <
-webkit-border-radius: 10px 20px 30px 40px;
>
Правильный код будет выглядеть так:
#box <
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
>
Горизонтальный и вертикальный радиус в Safari и Chrome.
В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
#box <
-webkit-border-top-left-radius: 30px 15px;
>
При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box <
-webkit-border-radius: 30px 15px;
>
border-radius: блок с закруглёнными углами, эллипс, круг
Здравствуйте уважаемые начинающие веб мастера. Снова Оригинальные эффекты CSS.
Создавать и размещать блоки на странице, мы уже научились. Теперь давайте с помощью CSS придадим этим блокам оригинальную форму.
Закруглить углы изображений, или же сделать эллипс, и даже круг, и поместить в него какую нибудь фразу или картинку.
В этой статье рассмотрим, как претворить Ваше желание в жизнь.
Для примера возьмём любой, из известных нам, блок (p, div, li, h1 и так далее), и зададим ему следующee свойства:
border-radius — закругление углов
Для красоты я добавлю к закруглённым углам тень (box-shadow), но вы можете её не использовать.
В значении border-radius указывается радиус закругления каждого угла, которые ставятся по часовой стрелке, начиная с верхнего левого угла.
Если нужно сделать все углы одинаковыми, то проставляется только одно значение.
border-radius : 10px 0 10px 0 ;
box-shadow : 1px 1px 3px 1px #fff ;
Создадим блок h1, и зададим ему свойства радиус и тень.
Только напоминаю, атрибут style, применяется для отладки изображения, после которой тегу нужно задать класс с любым названием, и все стили перенести в файл style.css.
< h1 style =" border-radius: 10px 0; box-shadow: 5px 5px 3px 1px; width: 200px; background: #21cccc; text-align: center; margin-left: 100px ;">текст текст< /h1 >
Сделаем то же самое для изображения
Вариант для WordPress, который можно вставить для отладки, прямо в поле редактора, в режиме текст.
< img style =" width: 224px; height: 150px; margin-left: 100px; border-radius: 10px 10px 10px 10px; box-shadow: 5px 5px 3px 1px;" title="makak " src =" https://starper55plys.ru/wp-content/uploads/2013/10/makak.jpg" width="224" height="150 "/>
Картинка вставляется через загрузчик изображений. Ширина и высота блока (width, height), задаются по размеру изображения.
Теперь сделаем эллипс. Для создания эллипса, каждое значение радиуса разделяется на две части — горизонтальное закругление и вертикальное, которые записываются через слэш. Для тени ничего не меняется.
< h1 style =» background: #21cccc; width: 200px; height: 50px; margin-left: 100px; text-align: center; border-radius: 50px/20px; box-shadow: 5px 5px 3px 1px; «>Текст< /h1 >
И, напоследок, сделаем круг. Чтобы получился круг, нужно сначала сделать квадрат, то есть задать блоку одинаковые высоту и ширину, а затем задать значение border-radius, равное половине высоты блока.
И, для полноты ощущений, вставим в круг картинку.
Вариант для WordPress
< h1 style =" background: #21cccc; width: 100px; height: 100px; margin-left: 100px; border-radius: 50px; box-shadow: 5px 5px 3px 1px; ">< img style =" margin: 30px; auto; " src =" https://starper55plys.ru/wp-content/uploads/2013/10/i10.png" width="35" height="35 " />< /h1 >
В следующей статье продолжим тему теней, и узнаем ещё несколько оригинальных эффектов появляющихся в результате их применения.
Перемена
Муж приходит домой и говорит жене:
— У меня серьезная проблема на работе.
Жена ласково:
— Дрогой, не волнуйся и никогда не говори «у меня проблема», говори «у нас проблема…»
— Хорошо. У нас проблема на работе. У нашей секретарши скоро будет ребенок от нас.
Есть люди у которых есть совесть и есть люди которые имеют совесть.