Как округлить блок в css

Как сделать круглый div / круглое фото?

Открыл недавно метрику на своем старом сайте, а на него есть несколько переходов с поисковиков. Посмотрел историю поисковых запросов и удивился, почти каждый день есть несколько посещений по запросам «как сделать круглый div», «как сделать круглое фото» и подобное. Оказывается многих интересует подобный вопрос, так давайте же разберем его.

Чтобы сделать круглый блок, необходимо воспользоваться CSS-свойством border-radius и задать ему значение 50%, то есть округлить каждый угол на половину ширины/высоты. В результате мы получим такое:

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

• CSS (правила для скругления)

.circle < width: 100px; /* задаете свои размеры */ height: 100px; border-radius: 50%; /* не забываем о кроссбраузерности */ -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%; >

Код для вывода красивых аватаров пользователей с использованием теней и рамок.

.circle < width: 100px; /* задаете свои размеры */ height: 100px; overflow: hidden; background: #fff; padding: 5px; /* создание отступов */ border-radius: 50%; /* не забываем о кроссбраузерности */ -moz-border-radius: 50%; -webkit-border-radius: 50%; border: #aaa 1px solid; box-shadow: 0px 1px 1px 1px #bbb; /* тень */ -moz-box-shadow: 0px 1px 1px 1px #bbb; -webkit-box-shadow: 0px 1px 1px 1px #bbb; >.circle img

В результате получаем такие картинки

Варианты оформления поля Поиска по сайту на CSS

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

Вариант 1. Поиск с иконками выбора области поиска

HTML

 
 
 

 
 
 
 
 
 
 

 
 
Users 
 
 
 
 
 
 

 
 
Posts 
 
 
 
 
 

 
 
Images 
 
 
 
 
 

 
 
Special 
 
 




 
 
 
 
 
 
 
 
 
 
 
 
 

SCSS

/*--------------------
App
--------------------*/
.search-form position: relative; 
top: 50%; 
left: 50%; 
width: 350px; 
height: 40px; 
border-radius: 40px; 
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); 
transform: translate(-50%, -50%); 
background: #fff; 
transition: all 0.3s ease;
 
&.focus box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15); 
>
>

.search-input position: absolute; 
top: 10px; 
left: 38px; 
font-size: 14px; 
background: none; 
color: #5a6674; 
width: 195px; 
height: 20px; 
border: none; 
appearance: none; 
outline: none;
 
&::-webkit-search-cancel-button appearance: none; 
>
>

.search-button position: absolute; 
top: 10px; 
left: 15px; 
height: 20px; 
width: 20px; 
padding: 0; 
margin: 0; 
border: none; 
background: none; 
outline: none!important; 
cursor: pointer; 
 
& svg width: 20px; 
height: 20px; 
fill: #5a6674; 
>
>

.search-option position: absolute; 
text-align: right; 
top: 10px; 
right: 15px;
 
div position: relative; 
display: inline-block; 
margin: 0 1px; 
cursor: pointer; 
 
input position: absolute; 
top: 0; 
left: 0; 
opacity: 0.01; 
cursor: pointer; 
> 
 
span position: absolute; 
display: block; 
text-align: center; 
left: 50%; 
transform: translateX(-50%); 
opacity: 0; 
background: #929AA3; 
color: #fff; 
font-size: 9px; 
letter-spacing: 1px; 
line-height: 1; 
text-transform: uppercase; 
padding: 4px 7px; 
border-radius: 12px; 
top: -18px; 
transition: all .2s ease-in-out; 
 
&::after content: ''; 
position: absolute; 
bottom: -3px; 
left: 50%; 
transform: translateX(-50%); 
border-top: 4px solid #929AA3; 
border-left: 4px solid transparent; 
border-right: 4px solid transparent; 
transition: all .2s ease-in-out; 
> 
> 
 
&:hover span opacity: 1; 
top: -21px; 
> 
 
label display: block; 
cursor: pointer; 
> 
 
svg height: 20px; 
width: 20px; 
fill: #5a6674; 
opacity: 0.6; 
transition: all .2s ease-in-out; 
pointer-events: none; 
> 
 
&:hover svg opacity: 1; 
> 
 
input:checked + label svg fill: $color; 
opacity: .9; 
> 
 
input:checked + label span background: $color; 
 
&::after border-top-color: $color; 
> 
> 
>


>

jQuery

$('.search-input').focus(function() $(this).parent().addClass('focus');
>).blur(function() $(this).parent().removeClass('focus');
>)

Вариант 2. Форма поиска с анимированной кнопкой

HTML

CSS

.tb
 display: table; 
width: 100%;
>

.td
 display: table-cell; 
vertical-align: middle;
>

input, button
 color: #fff; 
font-family: Nunito; 
padding: 0; 
margin: 0; 
border: 0; 
background-color: transparent;
>

#cover
 position: absolute; 
top: 50%; 
left: 0; 
right: 0; 
width: 550px; 
padding: 35px; 
margin: -83px auto 0 auto; 
background-color: #ff7575; 
border-radius: 20px; 
box-shadow: 0 10px 40px #ff7c7c, 0 0 0 20px #ffffffeb; 
transform: scale(0.6);
>

form
 height: 96px;
>

input[type="text"]
 width: 100%; 
height: 96px; 
font-size: 60px; 
line-height: 1;
>

input[type="text"]::placeholder
 color: #e16868;
>

#s-cover
 width: 1px; 
padding-left: 35px;
>

button
 position: relative; 
display: block; 
width: 84px; 
height: 96px; 
cursor: pointer;
>

#s-circle
 position: relative; 
top: -8px; 
left: 0; 
width: 43px; 
height: 43px; 
margin-top: 0; 
border-width: 15px; 
border: 15px solid #fff; 
background-color: transparent; 
border-radius: 50%; 
transition: 0.5s ease all;
>

button span
 position: absolute; 
top: 68px; 
left: 43px; 
display: block; 
width: 45px; 
height: 15px; 
background-color: transparent; 
border-radius: 10px; 
transform: rotateZ(52deg); 
transition: 0.5s ease all;
>

button span:before, button span:after
 content: ''; 
position: absolute; 
bottom: 0; 
right: 0; 
width: 45px; 
height: 15px; 
background-color: #fff; 
border-radius: 10px; 
transform: rotateZ(0); 
transition: 0.5s ease all;
>

#s-cover:hover #s-circle
 top: -1px; 
width: 67px; 
height: 15px; 
border-width: 0; 
background-color: #fff; 
border-radius: 20px;
>

#s-cover:hover span
 top: 50%; 
left: 56px; 
width: 25px; 
margin-top: -9px; 
transform: rotateZ(0);
>

#s-cover:hover button span:before
 bottom: 11px; 
transform: rotateZ(52deg);
>

#s-cover:hover button span:after
 bottom: -11px; 
transform: rotateZ(-52deg);
>
#s-cover:hover button span:before, #s-cover:hover button span:after
 right: -6px; 
width: 40px; 
background-color: #fff;
>

Вариант 3. Расширяющаяся панель поиска

Наведите на лупу, чтобы увидеть эффект

HTML

CSS

form position: relative; 
top: 50%; 
left: 50%; 
transform: translate(-50%,-50%); 
transition: all 1s; 
width: 50px; 
height: 50px; 
background: white; 
box-sizing: border-box; 
border-radius: 25px; 
border: 4px solid white; 
padding: 5px;
>

input position: absolute; 
top: 0; 
left: 0; 
width: 100%;; 
height: 42.5px; 
line-height: 30px; 
outline: 0; 
border: 0; 
display: none; 
font-size: 1em; 
border-radius: 20px; 
padding: 0 20px;
>

.fa box-sizing: border-box; 
padding: 10px; 
width: 42.5px; 
height: 42.5px; 
position: absolute; 
top: 0; 
right: 0; 
border-radius: 50%; 
color: #07051a; 
text-align: center; 
font-size: 1.2em; 
transition: all 1s;
>

form:hover width: 200px; 
cursor: pointer;
>

form:hover input display: block;
>

form:hover .fa background: #07051a; 
color: white;
>

Вариант 4. Панель поиска на CSS

Кликните на лупе, чтобы увидеть эффект

HTML

CSS

@import url(https://fonts.googleapis.com/css?family=Nunito:400,700);

* //box-sizing:border-box;
>
body padding:0; 
margin:0; 
.column background:#F6F792; 
height:100vh; 
float:left; 
width:100%; 
position:relative; 
> 
.two background:#F6F792 
> 
.three background:#EA2E49; 
> 
.four background:#333745; 
> 
.search position:absolute; 
left:0; 
right:0; 
margin:auto; 
top:50%; 
transform:translateY(-50%); 
width:100%; 
text-align:center; 
overflow:hidden; 
&_bar width:280px; 
position:relative; 
margin: 0 auto; 
input[type="text"] width:15px; 
background:transparent; 
transition:border .3s 0s, width .2s .3s cubic-bezier(0.225, 0.010, 0.475, 1.010), text-indent .2s .3s; 
padding: 20px; 
border-color:#448996; 
text-indent:30px; 
outline:none; 
border:0px solid #448996; 
font-size: 12px; 
color: #A8A952; 
border-radius:5px; 
//text-transform:uppercase; 
font-family: 'Nunito', sans-serif;
 
> 
::-webkit-input-placeholder < /* Safari, Chrome and Opera */
color: #448996; 
font-weight:400; 
font-family: 'Nunito', sans-serif; 
> 
::-moz-input-placeholder < /* Safari, Chrome and Opera */
color: #448996; 
font-weight:400; 
font-family: 'Nunito', sans-serif; 
> 
::-o-input-placeholder < /* Safari, Chrome and Opera */
color: #448996; 
font-weight:400; 
font-family: 'Nunito', sans-serif; 
> 
input[type="checkbox"] display:none; 
> 
input[type="checkbox"]:checked + label + input width: 230px; 
border: 5px solid #448996; 
text-indent:0px; 
> 
input[type="checkbox"]:checked + label i right:0px; 
transform: translateY(-50%) translateX(50%) rotate(360deg) scale(0); 
color: #448996; 
&:hover //background:white; 
> 
> 
input[type="checkbox"]:checked + label .last left:220px; 
transform: translateY(-50%) rotate(360deg) scale(1); 
&:hover //background:white; 
> 
> 
input[type="checkbox"]:checked + label p top: 50%; 
transition:all .3s .45s; 
> 
input[type="checkbox"]:not(checked) + label p top: -50%; 
transition:all .3s 0s; 
> 
.last -webkit-transform: translateY(-50%) rotate(0deg) scale(0); 
transform: translateY(-50%) rotate(0deg) scale(0); 
> 
i position: absolute; 
font-size: 30px; 
top: 50%; 
transform: translateY(-50%) translateX(50%) rotate(0deg) scale(1); 
cursor: pointer; 
z-index: 2; 
margin: auto; 
border-radius: 4px; 
width: 56px; 
right: 50%; 
height: 54px; 
background: transparent; 
transition: right .3s .3s, transform .3s .3s, color .3s; 
line-height: 60px; 
color: #A8A952; 
&:hover color:#448996; 
> 
> 
p position: absolute; 
margin: 0; 
right: 52px; 
color: #448996; 
font-weight: 700; 
font-size: 30px; 
top: -50%; 
transform: translateY(-50%) rotate(0deg) scale(1); 
> 
> 
>
> 

Вариант 5. Анимация поля поиска на CSS

Наведите на лупу, чтобы увидеть эффект

HTML

 
 
 
 
 
Hover to see the magic.
 
 

CSS

/*** COLORS ***/
@bg-color: #913D88;
@txt-color: #FFFFFF;
@icn-color: #FFFFFF;

/*** DEMO ***/
html,bodybodyp.cntr>

/*** STYLES ***/
.search display: inline-block; 
position: relative; 
height: 35px; 
width: 35px; 
box-sizing: border-box; 
margin: 0px 8px 7px 0px; 
padding: 7px 9px 0px 9px; 
border: 3px solid @icn-color; 
border-radius: 25px; 
transition: all 200ms ease; 
cursor: text; 
 
&:after content: ""; 
position: absolute; 
width: 3px; 
height: 20px; 
right: -5px; 
top: 21px; 
background: @icn-color; 
border-radius: 3px; 
transform: rotate(-45deg); 
transition: all 200ms ease; 
> 
 
&.active, 
&:hover width: 200px; 
margin-right: 0px; 
 
&:after height: 0px; 
> 
> 
 
input width: 100%; 
border: none; 
box-sizing: border-box; 
font-family: Helvetica; 
font-size: 15px; 
color: inherit; 
background: transparent; 
outline-width: 0px; 
>
>

Вариант 6. Анимация панели поиска

HTML

CSS

#content position: absolute; 
height: 50px; 
width: 300px; 
margin-left: 170px; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);
>

#content.on -webkit-animation-name: in-out; 
animation-name: in-out; 
-webkit-animation-duration: 0.7s; 
animation-duration: 0.7s; 
-webkit-animation-timing-function: linear; 
animation-timing-function: linear; 
-webkit-animation-iteration-count: 1; 
animation-iteration-count: 1;
>

input box-sizing: border-box; 
width: 50px; 
height: 50px; 
border: 4px solid #ffffff; 
border-radius: 50%; 
background: none; 
color: #fff; 
font-size: 16px; 
font-weight: 400; 
font-family: Roboto; 
outline: 0; 
-webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, 
padding 0.2s; 
transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, 
padding 0.2s; 
-webkit-transition-delay: 0.4s; 
transition-delay: 0.4s; 
-webkit-transform: translate(-100%, -50%); 
-ms-transform: translate(-100%, -50%); 
transform: translate(-100%, -50%);
>

.search background: none; 
position: absolute; 
top: 0px; 
left: 0; 
height: 50px; 
width: 50px; 
padding: 0; 
border-radius: 100%; 
outline: 0; 
border: 0; 
color: inherit; 
cursor: pointer; 
-webkit-transition: 0.2s ease-in-out; 
transition: 0.2s ease-in-out; 
-webkit-transform: translate(-100%, -50%); 
-ms-transform: translate(-100%, -50%); 
transform: translate(-100%, -50%);
>

.search:before content: ""; 
position: absolute; 
width: 20px; 
height: 4px; 
background-color: #fff; 
-webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
transform: rotate(45deg); 
margin-top: 26px; 
margin-left: 17px; 
-webkit-transition: 0.2s ease-in-out; 
transition: 0.2s ease-in-out;
>

.close -webkit-transition: 0.4s ease-in-out; 
transition: 0.4s ease-in-out; 
-webkit-transition-delay: 0.4s; 
transition-delay: 0.4s;
>

.close:before content: ""; 
position: absolute; 
width: 27px; 
height: 4px; 
margin-top: -1px; 
margin-left: -13px; 
background-color: #fff; 
-webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
transform: rotate(45deg); 
-webkit-transition: 0.2s ease-in-out; 
transition: 0.2s ease-in-out;
>

.close:after content: ""; 
position: absolute; 
width: 27px; 
height: 4px; 
background-color: #fff; 
margin-top: -1px; 
margin-left: -13px; 
cursor: pointer; 
-webkit-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
transform: rotate(-45deg);
>

.square box-sizing: border-box; 
padding: 0 40px 0 10px; 
width: 300px; 
height: 50px; 
border: 4px solid #ffffff; 
border-radius: 0; 
background: none; 
color: #fff; 
font-family: Roboto; 
font-size: 16px; 
font-weight: 400; 
outline: 0; 
-webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, 
padding 0.2s; 
transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, 
padding 0.2s; 
-webkit-transition-delay: 0.4s, 0s, 0.4s; 
transition-delay: 0.4s, 0s, 0.4s; 
-webkit-transform: translate(-100%, -50%); 
-ms-transform: translate(-100%, -50%); 
transform: translate(-100%, -50%);
>

JS

// updated
const input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-btn");

const expand = () => searchBtn.classList.toggle("close"); 
input.classList.toggle("square");
>;

searchBtn.addEventListener("click", expand);

8 способов украсить поле поиска с помощью CSS

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

Имея это в виду, ниже представлена коллекция фрагментов, делают обычное поле поиска CSS немного красивее. Они варьируются от простых эстетических CSS улучшений вплоть до JS UI, которые помогают создать более захватывающий опыт.

Меняющаяся иконка

Морфинговая анимация — всегда удовольствие. Здесь у нас есть значок вездесущего увеличительного стекла, который при щелчке превращается в полную панель поиска. Нажатие на «X» превращает все обратно в квадрат. Это может быть хорошим решением для небольших экранов, поскольку вы можете просто убрать поле, когда оно не используется.

Просто наведите указатель мыши и ищите

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

Скроллерам тоже нужно искать

На мобильных устройствах пользователи могут работать с большим количеством скролов. Но если они не могут найти то, что ищут, это часто означает, что им нужно будет вернуться к заголовку сайта, чтобы выполнить поиск. Здесь у нас есть «липкая» панель поиска, которая будет прикрепляться к верхней части экрана при прокрутке страницы вниз. Эта удобная функция может сделать жизнь намного проще для пользователей.

Экран Material

В наши дни Material Design используется довольно часто. Поэтому вполне естественно, что язык дизайна также применяется для поиска. Также приятно, что после щелчка это поле поиска занимает весь экран. Это позволяет пользователям сосредоточиться исключительно на их поиске, и, с небольшой работой, дизайнеры могут потенциально добавить на дисплей другую связанную информацию.

Простой пользовательский поиск

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

Контекстная анимация

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

Прозрачность

Как создать область поиска, которая выделяется, а не торчит, как больной палец? Прозрачность — один из способов сделать это. Здесь у нас есть полупрозрачное поле поиска, которое находится поверх полноэкранного изображения. Тем не менее, белая рамка сильная, и это создает приятный визуальный эффект, не обгоняя страницу.

Мульти-поиск

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

Конечный результат

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

Автор: Eric Karkovack

Редакция: Команда webformyself.

rotate()

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством transform-origin (en-US), не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

Синтаксис

rotate(a)

Значения

Декартовы координаты на ℝ 2	Однородные координаты на ℝℙ 2	Декартовы координаты на ℝ 3	Однородные координаты на ℝℙ 3
cos(a) -sin(a) sin(a) cos(a)	cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1	cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1	cos(a) -sin(a) 0 0 sin(a) cos(a) 0 0 0 0 1 0 0 0 0 1
	[cos(a) sin(a) -sin(a) cos(a) 0 0]

Примеры

Базовый пример

HTML

div>Normaldiv> div class="rotated">Rotateddiv> 

CSS

div  width: 80px; height: 80px; background-color: skyblue; > .rotated  transform: rotate(45deg); /* Equal to rotateZ(45deg) */ background-color: pink; > 

Result

Объединение вращения с другим преобразованием

Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!

HTML

div>Normaldiv> div class="rotate">Rotateddiv> div class="rotate-translate">Rotated + Translateddiv> div class="translate-rotate">Translated + Rotateddiv> 

CSS

div  position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; > .rotate  background-color: transparent; outline: 2px dashed; transform: rotate(45deg); > .rotate-translate  background-color: pink; transform: rotate(45deg) translateX(180px); > .translate-rotate  background-color: gold; transform: translateX(180px) rotate(45deg); > 

Result

Спецификации

Specification
CSS Transforms Module Level 1 # funcdef-transform-rotate

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.