От автора: конечно, вы знакомы с рамками. Есть ли в них нечто новое для внедрения? Бьюсь об заклад, в этой статье найдется весьма многое, о чем вы и не знали!
Для создания скругленных углов можно применять не только CSS3, но и «старикана» CSS можно заставить показать произвольные фигуры. Верно, что в прошлом до открытия этих техник при демонстрации кругов или стрелок-указателей можно было прибегнуть к применению абсолютно позиционированных фоновых изображений. К счастью – по мере того, как мы с радостью все больше отдаляемся от Photoshop’а – это уже не тот случай.
Основы
Вы наверняка знакомы с самым привычным использованием рамок.
1 |
border: 1px solid black; |

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВышеприведенный код применяет к элементу рамку в 1px. Просто и легко, но можно модифицировать синтаксис еще немного.
1 2 3 |
border-width: thick; border-style: solid; border-color: black; |
Дополнительно к передаче border-width определенного значения можно как альтернативу использовать три ключевых слова: thin, medium и thick.
Хотя изначально применение обычного письма может не показаться необходимостью, существует множество случаев, где оно дает преимущество, например, когда нужно доработать какой-то аспект рамки, когда происходит определенное события.
Возможно, вам нужно сменить цвет рамки при проведении пользователем мышью над определенным элементом. Применение стенографической формы письма потребует повторения пиксельных значений.
1 2 3 4 5 6 7 |
.box { border: 1px solid red; } .box:hover { border: 1px solid green; } |
Более изящный и КРАТКИЙ подход – это направленно доработать свойство border-color.
1 2 3 4 5 6 7 |
.box { border: 1px solid red; } .box:hover { border-color: green; } |
К тому же, как вы вскоре обнаружите, эта техника обычной записи полезна при создании с помощью CSS произвольных пользовательских фигур.
Border-Radius
border-radius — любимое дитя CSS3 – первое новое свойство, получившее широкое распространение в сообществе. В переводе это означает, что, кроме Internet Explorer 8 и его предыдущих версий, все браузеры могут отображать скругленные углы.
До сего было необходимо употреблять префиксы производителя для Webkit и Mozilla, чтобы правильно применять стили.
1 2 3 |
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; |
Однако сейчас можно, не боясь, отбросить вендорные варианты производителя и просто прибегнуть к принятой форме: border-radius.
Как и следует ожидать, также можно определять пользовательские значения для каждой стороны блока.
1 2 3 4 |
border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0; |
В вышеприведенном коде установка border-top-right-radius и border-bottom-left-radius на ноль будет лишней, если только элемент не наследует значений, которые следует запускать повторно.
Что очень похоже на margin или padding, эти установки можно сжать при необходимости до одного свойства.
1 2 |
/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0; |
В качестве примера (и как часто это делают веб-дизайнеры) форму лимона можно воспроизвести с помощью CSS и свойства border-radius, как тут:
1 2 3 4 5 6 7 |
.lemon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; } |
Выше базового уровня
Многие дизайнеры с удовольствием придерживаются знаний, обозначенных в этом разделе; однако существует множество способов расширить кругозор!
Множественные рамки
Существует множество приемов, к которым можно обратиться при постановке задачи применения к элементу множественных рамок.
Border-Style
В то время как solid, dashed и dotted – самые применяемые значения свойства border-style, имеются несколько прочих, включая groove и ridge, которые могут оказаться полезны.
1 |
border: 20px groove #e3e3e3; |
Или в виде обычной записи:
1 2 3 |
border-color: #e3e3e3; border-width: 20px; border-style: groove; |
Хотя это, вне сомнения, удобно, на самом деле эффекты ребристости или бороздок не являются множественными рамками.
Outline
Самая популярная техника создания двух рамок – это воспользоваться преимуществами свойства outline.
1 2 3 4 |
.box { border: 5px solid #292929; outline: 5px solid #e3e3e3; } |
Хотя этот метод отлично работает, он ограничен двумя рамками. Если же нужно создать послойный, градиентоподобный эффект, необходим другой подход.
Псевдоэлементы
Когда недостаточно метода outline, альтернативные подход – воспользоваться преимуществами псевдоэлементов :before и :after, и применить к созданному контенту любые необходимые дополнительные рамки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.box { width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; } /* Create two boxes with the same width of the container */ .box:after, .box:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box:after { border: 5px solid red; outline: 5px solid yellow; } .box:before { border: 10px solid blue; } |
Это, возможно, не самый элегантный подход, но он определенно работает. Единственное предостережение – очень легко спутать порядок, в котором применяются цвета рамок. Часто для применения правильного сочетания требуется определенный уровень «догадок и проверок».
Box-Shadow
«Умный» способ создания бесконечного количества рамок – воспользоваться параметром spread в свойстве CSS3 box-shadow.
1 2 3 4 5 6 7 |
.box { border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; } |
В данном случае мы разумно применяем box-shadow таким образом, который не обязательно подразумевался при изначальном написании спецификации.
Установив компоненты x, y, и blur на 0, можно использовать значение spread для создания надежных рамок в нужных местах. Так как box-shadow через использование запятой можно складывать в стек, количество возможных уровней бесконечно.
Эта техника довольно симпатично выглядит в предыдущих версиях. В старых браузерах, не распознающих свойство box-shadow, оно просто изобразит одиночную красную рамку в 5px.
Помните: дизайн не обязан быть одинаковым во всех браузерах. Пишите CSS для большинства современных браузеров, а затем соответственно обеспечьте подходящий альтернативный вариант.
Изменяем углы
Вдобавок к передаче одного значения к border-radius, можно обеспечить как альтернативу два – разделенных слешем /– для определения уникальных значений как для горизонтального, так и вертикального радиусов. Например…
1 |
border-radius: 50px / 100px; /* горизонтальный радиус, вертикальный радиус */ |
…эквивалентно:
1 2 3 4 |
border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px; |
Этот способ особенно полезен, когда нужно сымитировать легкий, продолженный завиток вместо общего скругленного угла. Например, следующий код позволяет нам слегка отойти от квадратной фигуры, получив в результате более закрученный, «бумажный» эффект.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
1 2 3 4 5 6 7 8 |
.box { width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; } |
Фигуры CSS
Возможно самое аккуратное применение рамок – когда они с умом применяются к элементам с нулевой шириной и высотой. Сбивает с толку, а? Давайте наглядно посмотрим.
К нескольким следующим примерам возьмите следующую разметку…
1 |
<div class="box"></div> |
…и следующие основные стили:
1 2 3 4 5 |
.box { width: 200px; height: 200px; background: black; } |
Демонстрируемый чаще всего пример при показе того, как могут использоваться в проекте фигуры CSS– создание обязательного указателя-стрелки.
Чтобы понять, как с помощью CSS формируется стрелка, нужно назначить к каждой стороне уникальный border-color (цвет рамки), а затем уменьшить значения width и height контейнера до 0.
Примем div с классом arrow как контейнер:
1 2 3 4 5 6 7 8 |
.arrow { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; } |
Как показано в начале этого раздела, более чистый синтаксис получится, если не применять всеохватывающую стенографическую версию:
1 2 3 4 5 6 7 8 9 |
.arrow { width: 0; height: 0; border: 100px solid; border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow; } |
Даже можно далее уменьшить ее, сгруппировав значения цветов.
1 2 3 4 5 6 |
.arrow { width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; } |
Интересно, верно? Если вернуться назад, то тут присутствует идеальный здравый смысл. Это единственный возможный способ выровнять цвета, допустив width и height для контейнера, равные нулю. А что, если теперь мы установим все цвета рамки, кроме синей стороны, на прозрачные?
1 2 3 4 5 6 |
.arrow { width: 0; height: 0; border: 100px solid; border-bottom-color: blue; } |
Отлично! Но создание div’а .arrow всего лишь для добавления на страницу стрелки не кажется хорошей семантической идеей. Вместо того псевдоэлементы можно использовать, чтобы применить стрелку-указатель до или после связанного элемента.
Создание «словесного пузыря»
Для создания «словесного пузыря» на 100% из CSS начнем с разметки.
1 |
<div class="speech-bubble">Hi there!</div> |
Далее нужно применить немного основных стилей.
1 2 3 4 5 6 7 8 9 10 11 |
.speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; } |
Указатель-стрелка будет применяться с помощью псевдоэлемента after.
1 2 3 |
.speech-bubble:after { content: ''; } |
Псевдоэлементы :before и :after можно применять для вставки созданного контента либо перед, либо после содержимого элемента.
На данном этапе это всего лишь дело воспроизведения стрелки и размещения ее в нужном месте. Мы начнем с абсолютного позиционирования контента, вновь установив width и height, и применив цвета рамки.
1 2 3 4 5 6 7 8 9 10 |
.speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; } |
Так как мы знаем, что стрелка должна указывать вниз, на изображении вверху видно, что все рамки, кроме красной (или верхней) должны либо пропускаться, либо устанавливаться на прозрачность.
1 2 3 4 5 6 7 8 9 10 |
.speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; } |
При создании фигур CSS из-за того, что мы не можем применять свойство width для определения ширины стрелки-указателя, должно быть взамен использовано свойство border-width. В этом случае стрелка должна быть немного больше; так что border-width нужно увеличить до 15px. Также мы разместим стрелку внизу по центру контейнера, применив соответственно свойства top и left.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; } |
Почти готово; на окончательном этапе следует доработать цвет стрелки, чтобы он стал таким же, как фон контейнера. Также нужно модифицировать расположение, чтобы учесть ширину рамок (15px). А пока мы здесь, также применим легкий border-radius, чтобы контейнер выглядел более похожим на «пузырь».
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.speech-bubble { /* … другие стили */ border-radius: 10px; } .speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* отрегулируйте по ширине рамки */ } |
Неплохо, да? Абстрагируйте этот код в несколько классов многократного применения, и вы готовы ко всем будущим проектам.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/* Speech Bubbles Usage: Apply a class of .speech-bubble and .speech-bubble-DIRECTION <div class="speech-bubble speech-bubble-top">Hi there</div> */ .speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* вертикально по центру */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; } .speech-bubble:after { content: ''; position: absolute; width: 0; height: 0; border: 15px solid; } /* разместите стрелку */ .speech-bubble-top:after { border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; } .speech-bubble-right:after { border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; } .speech-bubble-bottom:after { border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; } .speech-bubble-left:after { border-right-color: #292929; top: 50%; right: 100%; margin-top: -15px; } |
Бонус: лучшее вертикальное центрирование
Обратной стороной применения line-height для вертикального центрирования текста является то, что вы ограничены одной единственной строкой. Если для текста требуется две или больше строки, высота каждой будет слишком большой. Умное решение – это установить display для table на «словесный пузырь», а display для table-cell на абзац, обертывающий текст. Это потом позволит нам выровнять текст соответственно посредине.
1 2 3 |
<div class="speech-bubble speech-bubble-top"> <p>Здесь текст.</p> </div> |
Далее модифицированный CSS.
1 2 3 4 5 6 7 8 9 10 |
.speech-bubble { /* другие стили */ display: table; } .speech-bubble p { display: table-cell; vertical-align: middle; } |
Если ссылки на display: table оживляют ужасные воспоминания о старомодных разметках на основе таблиц, не беспокойтесь. Эти свойства целиком относятся к стилю, в котором должен демонстрироваться элемент.
Мы не ограничены треугольниками; CSS способно порождать любые виды фигур – даже сердечки и знаки биологической опасности!
1 2 3 4 5 6 7 8 9 10 11 |
.biohazard { width: 0; height: 0; border: 60px solid; border-radius: 50%; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right-color: yellow; } |
Краткие итоги
Хотя верно то, что синтаксис обычного border: 1px solid black прошел длинный путь, если мы сообразительны, то сможем создать множество полезных эффектов, иконок и фигур. Кто бы мог подумать, что рамки окажутся таким мощным инструментом? Главное – помнить, что стили для обычных фигур или «словесных пузырей» должны создаваться только один раз, а затем абстрагироваться до практичных классов для будущего применения.
Автор: Jeffrey Way
Источник: //net.tutsplus.com/
Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Комментарии (2)