Border-radius: закругленные углы в CSS
В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style , с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.
Как закруглить углы: свойство CSS3 border-radius
Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).
Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:
.borderElement
Стиль, описанный выше, даст следующий результат на элементе размером 200×200 пикселей:
Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:
.borderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; >.borderElement1
Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:
.borderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; >
Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:
- border-top-left-radius — для верхнего левого угла;
- border-top-right-radius — для верхнего правого угла;
- border-bottom-left-radius — для нижнего левого угла;
- border-bottom-right-radius — для нижнего правого угла.
Принцип скругления углов
На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px , — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px , а второе — длиной вертикальной полуоси — 20px :
Свойство CSS border-radius поддерживается всеми современными версиями браузеров.
Как нарисовать полукруг на CSS
Полукруг получается если у прямоугольника, у которого одна сторона в два раза больше другой, закруглить углы [см. генератор]. С помощью padding в процентах можно добиться пропорционального изменения высоты и ширины «резинового» блока.
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
clip-path : отсечь лишний фрагмент HTML-элемента
Свойство clip-path вырезает из элемента часть:
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
С помощью shape-inside
Свойство shape-inside позволяет вписать текст в окружность, даже без самой окружности, но пока не поддерживается браузерами.
текст текст текст текст текст текст текст текст текст текст
текст
- Круг на CSS
- Треугольник на CSS
Конические градиенты в CSS
Несмотря на всю свою эволюцию, на текущий момент CSS по-прежнему имеет свои ограничения. Например, фоновые градиенты могут быть созданы с помощью линейных или радиальных стилей, но не конусообразных.
В 2011 году Lea Verou начал начал вести разговор о реализации с помощью CSS конического градиента, создавая проект спецификации, которая уже была введена в официальном проекте W3C. Тем не менее, мы все еще должны ждать одобрения W3C этой функции и реализации ее браузерами, что займет довольно много времени. В то же время, я покажу вам, как имитировать конический градиент, используя только CSS3.
Симпатично, не так ли? Давайте попробуем воспроизвести нечто подобное!
Для уменьшения количества повторов кода, я буду использовать SASS. Функционал CSS имеет одну очень интересную возможность – это использование «примешиваний» — @mixin . Примешивания (mixins) позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств.
@mixin circle($size) < content: ""; position: absolute; border-radius: 50%; width: $size; height: $size; left: calc(50% - #); top: calc(50% - #); >В данном примере с помощью @mixin мы назначили нашей фигуре свойства формы и местоположения, в итоге создав круг с абсолютным позиционированием, а также отцентрированный по горизонтали и вертикали по отношению к своему родительскому элементу.
Объединив @mixin circle со свойством clip , мы получили полукруг. Итак, давайте сперва создадим полный круг, соединив вместе два полукруга (окрашенные в разные цвета). Можете ли вы вообразить, что получится, если мы зададим вращение одному из этих полукругов? Волшебный эффект!
@mixin circle($size) < content: ""; position: absolute; border-radius: 50%; left: calc(50% - #); top: calc(50% - #); width: $size; height: $size; > $wheel: 15em; .color < @include circle($wheel); clip: rect(0, $wheel, $wheel, #); background: red; &:after < @include circle($wheel); clip: rect(0, #, $wheel, 0); background: blue; transform:rotate(45deg); > > Свойство clip: rect (top, right, bottom, left) ограничивает видимую область прямоугольным элементом, из-за чего видимой становится только половина красного круга (смотрите пример выше). Тот же самый принцип применен и к синему кругу, т.е. к элементу .color:after . На этой стадии мы должны получить полный круг — наполовину красный и наполовину синий. Однако, благодаря свойству transform , видимая часть синего круга наезжает на область красного круга:
Разноцветный зонтик с помощью CSS
Мы уже знаем, как выполнить этот волшебный трюк. Давайте создадим наш 12-цветный зонтик:
Так как нам нужно создать полный круг, соединив полукруги (начиная с седьмого элемента – т.е. первого элемента второй половины круга), то нам нужно инвертировать обрезку (clip).
.color, .color:nth-child(n+7):after < clip: rect(0, $wheel, $wheel, #); > .color:after, .color:nth-child(n+7) < @include circle($wheel); clip: rect(0, #, $wheel, 0); >Начиная с седьмого элемента, свойство .color применяется к сегментам, составляющим правую половину круга, и свойство .color:after применяется к сегментам, составляющим левую половину круга.
Все почти готово. Теперь нам нужно изменить цвета и угол каждого сегмента. Давайте снова воспользуемся силой SASS для того, чтобы сгенерировать 26193^42 строк кода, написав всего лишь чуть больше десяти. 😉
$colors: (#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604); @for $i from 0 to length($colors) < .color:nth-child(#):after < background-color: nth($colors, $i+1); @if $i < 6 < transform: rotate(#deg); z-index: #; > @else < transform: rotate(#deg); > > > Во-первых, мы назначаем массив $colors в виде списка «12 цветов радуги» и затем через итерацию последовательно применяем ко всем цветам селектор .color:nth-child(n):after и свойства background-color , rotate и z-index .
О свойстве rotate нужно помнить несколько важных моментов. Его угол определяется согласно количеству цветов круга. В нашем случае это 12 цветов, поэтому 360/12 = 30 это угол ротации для каждого цвета. Но помните ли вы, что начиная с седьмого элемента начинается вторая половина круга? Таким образом, процесс, только что нами описанный, останавливается на седьмом элементе. Далее мы снова начинаем тот же самый процесс, но в этот раз ротация пойдет в другом направлении. Вот почему мы применили условие @else deg);> , которое вычитает 30 градусов из элементов второй половины круга.
Если вы внимательный наблюдатель (и поняли весь вышеизложенный материал), вы должны были заметить, что наш зонт, на самом деле, это не что иное, как вентилятор! Хе-хе. Как я вас подколол? Итак, для последнего цвета первой половины круга, который не виден поверх остальных цветов, нам нужно инвертировать значение z-index . Например, z-index (6) = 1 и z-index (1) = 6 .
Наконец, нам нужно смягчить переход между цветами, ведь наша задача получить не зонтик цветов радуги, а конический градиент!
.umbrella < -webkit-filter: blur(1.7em); >.wheel
Фильтр размытия отвечает за смешивание цветов. Но применение размытия деформирует края круга. Вот почему мы добавили для элемента .wheel свойство overflow:hidden . Внутренняя тень box-shadow применена для того, чтобы затемнить края, которые были размыты.
А вот и наш результирующий SASS код:
@mixin circle($size) < content: ""; position: absolute; border-radius: 50%; left: calc(50% - #); top: calc(50% - #); width: $size; height: $size; > $wheel: 15em; .wheel, .umbrella, .color < @include circle($wheel); >.wheel < overflow: hidden; width: $wheel; height: $wheel; position: relative; >.umbrella < position: relative; -webkit-filter: blur(1.7em); -webkit-transform: scale(1.35); >.color, .color:nth-child(n+7):after < clip: rect(0, $wheel, $wheel, #); > .color:after, .color:nth-child(n+7) < @include circle($wheel); clip: rect(0, #, $wheel, 0); > $colors: (#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604); @for $i from 0 to length($colors) < .color:nth-child(#):after < background-color: nth($colors, $i+1); @if $i < 6 < transform: rotate(#deg); z-index: #; > @else < transform: rotate(#deg); > > > body
С помощью конического градиента можно создать разнообразные эффекты. Самое же интересное его применение можно наблюдать на примере селектора цвета (смотрите ниже):
@mixin circle($size) < content: ""; position: absolute; border-radius: 50%; left: calc(50% - #); top: calc(50% - #); width: $size; height: $size; > .button < margin: 30px auto 0; width: 13em; height: 13em; border-radius: 3em; position: relative; background-image: linear-gradient(to bottom, #ddd, #d5d5d5); box-shadow: inset 0 3px 7px 0px #FFF, inset 0 -5px 5px 0px rgba(0, 0, 0, 0.2), 0 27px 51px -10px rgba(0, 0, 0, 0.5); &:before, &:after < box-sizing: border-box; display: block; >&:before < @include circle(12.5em); background-image: linear-gradient(to bottom, #fff, #aaa); -webkit-filter: blur(4px); >&:after < @include circle(11em); background-image: linear-gradient(to bottom, #c5c5c5, #ddd 80%); box-shadow: 0 4px 28px -10px rgba(0, 0, 0, 0.2); >> $wheel: 9.5em; .wheel, .colors, .color < @include circle($wheel); >.wheel < display: block; z-index: 1; box-shadow: inset 0 16px 32px 14px rgba(0, 0, 0, .7); >.colors < list-style: none; background: #ddd; position: relative; -webkit-filter: blur(10px); transform: rotate(170deg) scaleX(-1); >.color < clip: rect(0px, $wheel, $wheel, #); &:after < @include circle($wheel); clip: rect(0px, #, $wheel, 0px); > > $colors: (#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604); @for $i from 0 to length($colors) < .color:nth-child(#):after < background-color: nth($colors, $i+1); z-index: #; @if $i < 6 < transform:rotate(#deg); > @else < transform:rotate(#deg); > > > .color:nth-child(n+7) < transform:rotate(180deg); >.center < @include circle(6.3em); z-index: 2; background-image: linear-gradient(to bottom, #eee, #ccc); box-shadow: inset 0 3px 7px 0px #FFF, 0 25px 30px -5px rgba(0, 0, 0, 0.5); &:before < @include circle(4.2em); background-image: linear-gradient(to bottom, #FFF 20%, #AAA); box-shadow: 0 25px 30px -5px rgba(0, 0, 0, .5); >&:after < @include circle(3em); background-image: linear-gradient(to bottom, #aaa, #f5f5f5 80%); box-shadow: inset 0 -1px 4px 0px #FFF; >> .pin < @include circle(5.5em); z-index: -1; -webkit-animation: spin infinite 4s linear; &:after < content: ""; width: 40px; height: 40px; transform: rotate(10deg) skew(40deg, 20deg); box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.1), 0 0 15px 3px rgba(0,0,0,.2); background: #FFF; position: absolute; z-index: -1; left: 6px; top: 10px; >> @-webkit-keyframes spin < from< -webkit-transform: rotate(0deg); >to < -webkit-transform: rotate(360deg); >> body
Как сделать круглый 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
В результате получаем такие картинки