Css пунктирная рамка. Рамки и границы. Границы для отдельных сторон
Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!
Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.
Основы использования css border
Наверняка, вы уже ознакомлены со стандартным использованием border свойства:
Border: 1px solid black;
Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:
Border-width: thick; border-style: solid; border-color: black;
Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.
Но использование расширенного синтаксиса не всегда практично. Давайте рассмотрим пример, когда нужно изменить цвет рамки блока, при наведении мыши. В таком случае использование сокращенного синтаксиса гораздо проще:
Box { border: 1px solid red; } .box:hover { border: 1px solid green; }
Более элегантно и проще можно сделать следующим образом:
Box { border: 1px solid red; } .box:hover { border-color: green; }
Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.
Border-Radius
Border- radius - это «золотое» свойство CSS3 - первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.
Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.
Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
В сегодняшнее время, мы можем убрать специальные префиксы, и использовать стандартную форму border-radius.
Еще одна привилегия в том, что мы можем использовать специальные значения для каждой из сторон блока:
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, мы можем сжать синтаксис:
/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;
Как пример, применения свойства border-radius, покажу вам «лимон», который часто используют дизайнеры при верстке сайтов:
Lemon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; }
Идем далее основ
Во многих дизайнеров все познания, в области css свойства border, на этом заканчиваются. Но существует еще несколько крутых штук, с помощью которых можно создать потрясающие вещи!
Сложные структуры css border
Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…
Border-Style
Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.
Border: 20px groove #e3e3e3;
Или в расширенном синтаксисе:
Border-color: #e3e3e3; border-width: 20px; border-style: groove;
Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.
Outline
Наиболее популярная техника создания двойной рамки - использование свойства outline.
Box { border: 5px solid #292929; outline: 5px solid #e3e3e3; }
Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?
Псевдоэлементы
Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов:before и:after. С помощью которых можно добавить дополнительные рамки к элементу:
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
Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:
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 на «нуль», мы можем использовать разные цвета для создания множества рамок.
Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.
«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»
Изменяем углы
В дополнение к используемому простому значению border-radius, мы можем указать два отдельных - разделяя их через / мы укажем горизонтальный и вертикальный радиус.
Для примера:
Border-radius: 50px / 100px; /* horizontal radius, vertical radius */
… это равносильно:
Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;
Эта техника подходит, для создания уникальных форм блоков. Для примера, вот создание эффекта завернутой бумаги:
Box { width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; }
CSS формы, с использованием border
Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…
Для следующих нескольких примеров, мы будем использовать следующую разметку:
…и следующий базовый стиль:
Box { width: 200px; height: 200px; background: black; }
Наиболее частый пример использования CSS форм - создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.
Назначим к div блоку класс arrow:
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; }
Что бы продемонстрировать, сначала мы используем расширенный синтаксис. Далее мы можем убрать лишний код, используя сокращенный синтаксис:
Arrow { width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; }
Интересно, правда? Теперь мы установим прозрачные цвета на все стороны, кроме голубой стороны.
Arrow { width: 0; height: 0; border: 100px solid; border-bottom-color: blue; }
Отлично получилось! Но это противоречит семантической верстке , создавать.arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.
Создаем Speech Bubble
Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.
Speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; }
Speech-bubble:after { content: ""; }
На этом этапе, мы создадим стрелочку, которую делали прежде, добавим к элементу и остается только позиционировать:
Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; }
Если мы хотим, чтобы стрелочка была направлена вниз, нам придется установить все border прозрачными, кроме верхнего.
Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; }
Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.
Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; }
Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.
Speech-bubble { /* … other styles */ 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; /* adjust for border width */ }
Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.
/* Speech Bubbles Usage: примените класс.speech-bubble и.speech-bubble-НАПРАВЛЕНИЕ, как показано ниже
Бонус! Вертикальное центрирование внутри блока
Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:
Speech-bubble { /* other styles */ display: table; } .speech-bubble p { display: table-cell; vertical-align: middle; }
Мы не ограничиваемся треугольниками. CSS способен отобразить разные формы - даже сердечки и знак биологической опасности.
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; }
Заключение
Влад Мержевич
С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.
Свойство outline
Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:
- outline выводится вокруг элемента (border внутри);
- outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
- outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
- на outline не действует радиус скругления, заданный свойством border-radius (на border действует).
Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:
- создание сложных разноцветных рамок;
- добавление рамки к элементу при наведении на него курсора мыши;
- сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
- для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .
Разноцветные рамки
Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.
Пример 1. Создание рамки
В данном примере вокруг элемента добавляется чёрная рамка, которая отделена от фона белой каймой (рис. 1).
Рис. 1. Рамка вокруг элемента
Рамка при использовании:hover
При добавлении рамки через border происходит увеличение ширины элемента, что довольно заметно при сочетании border и псевдокласса :hover . Есть два способа, как это «победить». Самое простое - заменить border на outline , которое, как мы знаем, не оказывает влияния на размеры элемента (пример 2).
Пример 2. Рамка при наведении
outline не всегда годится, хотя бы потому, что на него скругление уголков не действует. Здесь подойдёт второй метод - добавляем невидимую рамку или рамку, совпадающую с цветом фона, а затем меняем её параметры при наведении (пример 3). Тогда никакого смещения элемента происходить не будет, поскольку рамка изначально уже есть. Но всегда помним, что ширина элемента при этом складывается из значений width , border слева и border справа. Аналогично обстоит и с высотой.
Пример 3. Рамка при наведении
Рамка вокруг полей формы
В некоторых браузерах (Chrome, Safari, последние версии Opera) вокруг полей формы при получении ими фокуса отображается небольшая цветная рамка (рис. 2). Чтобы её убрать, достаточно в стилях добавить к свойству outline значение none , как показано в примере 4.
Рис. 2. Рамка вокруг полей
Пример 4. Убираем рамку
Рамки через box-shadow
Хотя свойство box-shadow предназначено для добавления тени вокруг элемента, с его помощью можно и создавать рамки, причём такие, которые невозможно сделать через border или outline . Всё благодаря тому, что число теней может быть неограниченным, параметры которых перечисляются через запятую.
Чтобы получить рамку, первые три параметра следует задать нулевыми, они отвечают за положение тени и её размытие. Четвёртый параметр в данном случае отвечает за толщину границы, а пятый устанавливает цвет рамки. Для второй рамки четвёртый параметр равняется сумме толщин двух рамок.
В примере 4 показано добавление двух рамок и одной границы справа с помощью одного свойства box-shadow .
Пример 4. Использование box-shadow
Результат данного примера показан на рис. 3.
Рис. 3. Рамки, созданные свойством box-shadow
Несколькими уроками ранее мы рассматривали схематическое изображение блока веб-страницы, а также вкратце рассказывали о таком свойстве CSS как border , с помощью которого можно задать границы для элемента. В этот раз мы более детально рассмотрим это свойство на примерах.
Граница располагается между полем и отступом. Это значит, что margin находится за границей. Границу можно задавать как со всех четырех сторон (как бы заключая блок в рамку), так и с одной, двух или трех сторон. В CSS можно управлять толщиной, цветом и стилем границ. Изучим это подробнее.
Border-width: ширина границы
С помощью свойства border-width задается ширина границы. Наиболее часто этот размер указывается в пикселях. Можно задать одинаковую либо различную ширину для всех четырех границ, например:
/* все 4 границы имеют ширину 2px: */ border-width: 2px; /* верхняя и нижняя границы имеют ширину 2px, левая и правая - 4px: */ border-width: 2px 4px; /* верхняя граница - 2px, левая и правая - 6px, нижняя - 3px: */ border-width: 2px 6px 3px; /* верхняя граница - 2px, правая - 3px, нижняя - 4px, левая - 5px: */ border-width: 2px 3px 4px 5px;
Кроме этого, существуют ключевые слова для обозначения ширины границы:
- thin - граница шириной 2px;
- medium - граница шириной 4px;
- thick - граница шириной 6px.
Border-color: цвет границы
Свойство border-color задает цвет для границ. Цвета можно указывать в любом формате CSS: ключевыми словами, в шестнадцатеричном виде либо в RGB - зависит от того, как вам удобнее. По аналогии с предыдущим свойством, можно устанавливать как один цвет для всех границ, так и выбирать разные цвета для каждой границы.
Border-color: #FFFF00;
Также можно задать прозрачный цвет, записав:
Border-color: transparent;
Border-style: стиль границы
Благодаря свойству border-style вы можете делать из обычной границы пунктирную, двойную, объемную - существует много различных значений. Для этого воспользуйтесь следующими ключевыми словами:
- solid - сплошная граница;
- dotted - граница из точек;
- dashed - пунктирная граница;
- double - двойная граница;
- groove - объемная граница-выемка;
- ridge - объемная граница с толстой кромкой (по сути, инверсия предыдущего стиля);
- outset - выдавленная граница;
- inset - вдавленная граница (по сути, инверсия предыдущего стиля).
Как и в случае со свойствами border-width и border-color , для каждой границы блока можно задавать отдельный стиль - например, вы можете сделать верхнюю и нижнюю границы пунктирными, а правую и левую - двойными. Здесь уже все зависит лишь от фантазии.
Border-style: double dotted;
Обратите внимание: в разных браузерах внешний вид границ может немного отличаться.
Общее CSS-свойство border: 3 в 1
Чтобы задать стиль для границы, не обязательно по очереди использовать все три вышеперечисленных свойства. Достаточно знать об общем универсальном свойстве border CSS, с помощью которого вы гораздо быстрее напишете стиль и сэкономите место. Для этого в произвольном порядке запишите значения для всех трех свойств:
Border: 2px dotted #FF0000;
Границы для отдельных сторон
При помощи дополнительных свойств border в CSS вы можете создавать стиль для каждой границы блока по отдельности. В этом вам помогут следующие свойства:
- border-top - стиль для верхней границы;
- border-right - для правой границы;
- border-bottom - для нижней границы;
- border-left - для левой границы.
Итоги
Теперь, когда вы знаете, как делать границы для блоков, вы можете потренироваться в их создании. Существует масса способов кратко описать стиль, избежав чрезмерного количества строк в файле CSS. Немаловажную роль здесь играет знание принципов каскадности таблиц стилей. Рассмотрим пример.
Допустим, вы хотите создать рамку для блока div с тремя сплошными серыми границами, а нижнюю границу сделать пунктирной зеленой. Можно записать этот стиль таким образом:
Div { border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px dotted #FDD201; }
Но это слишком длинная запись. Всё это можно записать короче:
Div { border: 8px double #FF0000; border-top: 4px dotted #FDD201; }
Как упоминалось выше, здесь мы воспользуемся свойствами каскадности CSS. Сначала мы записываем стиль для всех четырех сторон рамки, после чего указываем стиль отдельно для нижней границы, тем самым частично перезаписывая предыдущий стиль. Очень важно соблюдать эту последовательность строк.
Мини-задание
Попробуйте создать рамку для блока div с размерами 200×200 пикселей. Стили для рамки должны быть такими:
- Верхнюю и нижнюю границы сделайте сплошнымиsolid , задайте им одинаковый цвет на выбор и ширину 5 пикселей.
- Левую границу сделайте пунктирнойdashed , шириной 3 пикселя, цвет выберите отличный от предыдущего.
- Правую границу сделайте двойнойdouble , шириной 7 пикселей, цвет отличный от двух предыдущих.
В конечном итоге ваша работа должна выглядеть так (за исключением цвета, который вы выбираете сами):
Результат задания (вид в Chrome)
В предыдущей статье мы с Вами рассмотрели применение CSS свойств границы () элементов страницы. И я обещал Вам, что расскажу о том, как использовать для прорисовки границ — картинки. Об этом и пойдет сегодня речь.
Чтобы использовать изображения для построения границ будем использовать CSS cвойство border-image.
Толщина границ задается свойством , при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.
Синтаксис кода
Давайте разберем пример записи свойства:
| border-image: url (images/bg-image.png ) 30 round round; |
url (images/bg-image.png) — адрес фоновой картинки.
30 — может быть одно, два, три или четыре значения, которые указывают размеры частей изображения в пикселах, задавая тем самым области деления картинки. Сами единицы не пишутся, только число (10, а не 10px). На рисунке красными линиями выделены необходимые для создания рамки области.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в таблице.
round round — два параметра (для горизонтальных и вертикальных границ соответственно). Могут принимать одно из трех значений. Результат можно увидеть на картинках.
stretch
— Растягивает рисунок границы до размеров элемента. Это значение используется по умолчанию.
repeat
— Повторяет рисунок границы.
round
— Повторяет рисунок и масштабирует его так, чтобы на стороне элемента оказалось целое число изображений.
Совместимость с браузерами
К сожалению, не все версии браузеров поддерживают свойство border-image. Для лучшей совместимости желательно прописать свойство для всех браузеров.
Пример кода:
| border-style : solid ; border-width : 27px ; -moz-border-image: url (http://mysite.ru/border.png ) 27 round stretch; -webkit-border-image: url (http://mysite.ru/border.png ) 27 round stretch; -o-border-image: url (http://mysite.ru/border.png ) 27 round stretch; border-image: url (http://mysite.ru/border.png ) 27 round stretch; |
Автоматизация
В сети есть инструменты, которые оказывают нам помощь в написании кода. Для свойства border-image есть очень удобный конструктор . Вы просто загружаете туда свою картинку границы (кстати, их очень много можно найти в инете). При помощи ползунков делите картинку на области, задаете толщину границ и параметры повторения.
Причем, сразу же, в онлайн режиме видите результат (то, что получится в итоге).
Когда добиваетесь неодходимого результата, Вам остается только скопировать сгенерированный код и вставить его в код страницы (файла css).
Очень просто и удобно.
Заключение
На этом мы заканчиваем рассмотрение свойств границ в CSS. Я с Вами не прощаюсь. В ближайшее время мы продолжим обучение верстке. Подписывайтесь на обновления ... и... До встречи!