уголки | htmlbook.ru
Влад Мержевич
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius. Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
Сделайте кнопку как на рисунке, используя только CSS.
На сайте часто возникает необходимость акцентировать внимание на одной строке текста. Это может быть телефон, адрес или заголовок важного сообщения. Главное, чтобы посетители обратили на него внимание. Для этой цели лучше использовать блок с закруглениями, как показали психологические исследования, такое оформление притягивает взгляд чаще, чем обычное прямоугольное.
Для создания рамки вокруг блока используется стилевое свойство border, в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев — получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.
Если на сайте применяется группа фотографий одинаковой ширины и высоты, то для них достаточно просто можно установить скругленные уголки. Принцип состоит в том, что поверх каждой фотографии накладывается рисунок, который прячет под собой часть фотографии, образуя тем самым желаемые уголки.
Скругленные уголки достаточно часто применяются в дизайне, но свойство CSS 3 border-radius поддерживается не всеми браузерами. Поэтому приходится использовать различные ухищрения, чтобы добиться универсального результата. Преимущественно для создания уголков применяются изображения, поэтому интересно будет обойтись без них, только с помощью стилей.
Хотя изображения достаточно успешно применяются для создания скругленных уголков в рамках, стилями порой делать это удобнее. Во-первых, через стили можно легко изменить цвет рамки без редактирования картинок. И, во-вторых, рамки без рисунков всегда отображаются в браузерах одинаково, независимо от того, выключен показ картинок или нет.Влад Мержевич
Хотя любой слой по своему определению является прямоугольником, с помощью изображений у слоя можно сделать один, два или даже четыре декоративных уголка. Далее рассмотрим вариант создания у слоя двух верхних «отрезанных» уголков.
Для этой цели в графическом редакторе вначале следует подготовить изображения уголков, цвет которых совпадает с цветом фона. Так, на рис 1 показаны изображения левого и правого верхних уголков.
Влад Мержевич
Влад Мержевич
Стандартные кнопки, созданные через тег <button> или <input type=»button»>, выглядят, конечно, хорошо, но попытка изменить их вид через стили приводит к ужасному результату. Кнопки становятся приветом интерфейсам десятилетней давности с их угловатостью (рис. 1). Разумеется, такая метаморфоза возникает только при использовании свойств background и border, иными словами, нельзя изменить цвет фона кнопки и рамку вокруг нее.
Рис. 1. Исходная и измененная кнопка
Чтобы кардинально поменять вид кнопки можно воспользоваться изображениями, но по сравнению с возможностями CSS 3 этот вариант теперь кажется доморощенным.
Блоки из фигур на CSS
.block-figure-3 * {
box-sizing: border-box;
}
.block-figure-3 {
margin: 20px auto;
padding: 0;
position: relative;
max-width: 600px;
width: 100%;
overflow: hidden;
}
.block-figure-3 .figure-txt {
border: 6px solid #BFE2FF;
}
.block-figure-3 .image-wrap {
border: 6px solid #BFE2FF;
border-radius: 100%;
width: 200px;
height: 200px;
position: absolute;
top: 30px;
background: #FFF;
z-index: 1;
right: 0;
}
.block-figure-3 .image-lay {
width: 100px;
height: 200px;
position: absolute;
top: -6px;
background: #FFF;
z-index: 2;
right: -6px;
}
.block-figure-3 .image {
transform-style: preserve-3d;
perspective: 1000px;
border-radius: 50%;
position: absolute;
z-index: 3;
height: 176px;
width: 176px;
top: 6px;
right: 6px;
}
.block-figure-3 .front,
.block-figure-3 .back {
background-size: cover;
background-position: center;
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
backface-visibility: hidden;
text-align: center;
border-radius: 50%;
color: #fff;
height: 176px;
width: 176px;
border: 6px solid #BFE2FF;
position: absolute;
}
.block-figure-3 .inner {
transform: translateY(-50%) translateZ(60px);
top: 50%;
position: absolute;
margin: auto;
z-index: 4;
width: 100%;
}
.block-figure-3 .image .back{
transform: rotateY(180deg);
transform-style: preserve-3d;
}
.block-figure-3:hover .back{
transform: rotateY(0deg);
transform-style: preserve-3d;
}
.block-figure-3:hover .front{
transform: rotateY(-180deg);
transform-style: preserve-3d;
}
.block-figure-3 .inner a {
font-weight: bold;
font-family: Verdana, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #337AB7;
text-align: center;
margin: auto;
display:block;
font-size: 14px;
line-height: 130px;
height: 142px;
width: 142px;
border:6px solid #BFE2FF;
border-radius: 50%;
transition:all .6s ease-in-out;
overflow:hidden;
}
.block-figure-3 .inner a::before{
content:»;
position:absolute;
top:-12px;
margin:auto;
display:block;
border-radius:50%;
width:166px;
height:166px;
left:-1px;
transition:box-shadow .6s ease-in-out;
z-index:-1;
}
.block-figure-3 .inner a:hover{
color:#fff;
}
.block-figure-3 .inner a:hover::before{
box-shadow: inset 0 0 0 166px #337AB7;
}
.block-figure-3 .figure-txt {
position: relative;
z-index: 1;
padding: 10px 20px;
margin-right: 100px;
min-height: 260px;
}
.block-figure-3 .figure-txt h4 {
text-transform: uppercase;
color: #337AB7;
font-weight: bold;
font-family: Verdana, sans-serif;
font-size: 20px;
margin: 6px 100px 12px 0;
}
.block-figure-3 .figure-txt p {
font-family: Verdana, sans-serif;
font-size: 16px;
margin: 10px 100px 10px 0;
}
@media (max-width: 560px) {
.block-figure-3 .figure-txt,
.block-figure-3 .figure-txt h4,
.block-figure-3 .figure-txt p {
margin-right: 0;
}
.block-figure-3 .figure-txt {
min-height: auto;
border-bottom: none;
}
.block-figure-3 .image-lay {
display: none;
}
.block-figure-3 .image-wrap {
border: 6px solid #BFE2FF;
border-top: none;
border-radius: 0;
width: 100%;
height: 160px;
position: static;
}
.block-figure-3 .image {
border-radius: 0;
position: static;
height: 160px;
width: 100%;
}
.block-figure-3 .front,
.block-figure-3 .back {
height: 154px;
width: 100%;
position: static;
border-radius: 0;
border: none;
}
.block-figure-3 .inner {
transform: translateY(-100%) translateZ(60px);
top: -6px;
}
.block-figure-3 .inner a::before{
display: none;
}
.block-figure-3 .inner a:hover{
color:#000;
}
}
Как сделать блок со скруглёнными уголками через CSS3?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.5+ | 3.0+ | 1.0+ | 2.1+ | 1.0+ |
Задача
Сделать блок со скруглёнными уголками с помощью CSS3.
Решение
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius. Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.
| Код | Описание | Вид |
|---|---|---|
| div { border-radius: 10px; } | Радиус скругления для всех уголков сразу. | |
| div { border-radius: 0 10px; } | Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего. | |
| div { border-radius: 20px 10px 0; } | Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. | |
| div { border-radius: 20px 10px 5px 0; } | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |
Чтобы учесть старые браузеры наряду с border-radius добавляют свойства с префиксами, как показано в примере 1. Из-за наличия этих свойств код CSS становится невалидным.
Пример 1. Уголки у блока
HTML5CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Радиус</title>
<style>
div {
background: #007E3E; /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 10px; /* Поля вокруг текста */
-moz-border-radius: 5px; /* Для Firefox 3 */
-webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
border-radius: 5px; /* Для современных браузеров */
}
</style>
</head>
<body>
<div>Меня — супплетивная форма винительного падежа от я.</div>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Блок со скруглёнными уголками
Совет CSS: лучшее скругление углов
От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?
Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.
Четвертые части каждой окружности формируют закругленные углы элемента.
Когда объединяются толстые рамки
При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее.mike { border-radius: 12px; border: 6px solid crimson; }
.mike { border-radius: 12px; border: 6px solid crimson; } |
Пока нет проблем.
Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.
.mike { border-radius: 12px; border: 14px solid crimson; }.mike { border-radius: 12px; border: 14px solid crimson; } |
Рамка становится шире, а углы изображения – квадратными.
Почему так происходит?
Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.
Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЧтобы оба радиуса были пропорциональными, нам понадобится подогнать значение радиуса примерно к двойной ширине рамки, или сумме ширины border-width и радиуса рамки border-radius.
.mike { border-radius: 26px; border: 14px solid crimson; }
.mike { border-radius: 26px; border: 14px solid crimson; } |
При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.
Метод Box-shadow
При образовании тени блока тень следует за радиусом рамки элемента. Помня об этом, можно использовать значение дополнительного расширения box-shadow для создания того, что смотрится в точности как рамка.
Расширенный радиус устанавливает растянутый интервал тени блока. Если установить офсеты и размытие на 0, определенное значение расширения сформирует вокруг элемента четкую рамку.
.mike { border-radius: 12px; box-shadow: 0 0 0 14px crimson; }
.mike { border-radius: 12px; box-shadow: 0 0 0 14px crimson; } |
Результат смотрится в точности как пример со стилем рамки. Но теперь нам не нужно беспокоиться о возрастании border-radius каждый раз при увеличении ширины рамки, потому что расширенное значение последует за радиусом.
Применение переменных Sass
Если мы используем препроцессор типа Sass, то для ширины и радиуса рамки можно создать переменные, затем применить простую математическую операцию, которая пропорционально сформирует радиус.
$border-width: 14px; $radius: $border-width*1.9; .mike { border: $border-width solid crimson; border-radius: $radius; }
$border-width: 14px; $radius: $border-width*1.9;
.mike { border: $border-width solid crimson; border-radius: $radius; } |
Заключение
Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.
Автор: Guil Hernandez
Источник: http://blog.teamtreehouse.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть