CSS — как сделать линию короче бокса
При верстке макета сайта, кстати, совсем несложного, возник вопрос.
Заключается он в том, имеется информационная часть, разбитая на две колонки. Каждая из колонок также разделена на отдельные секции — посты. Для колонок и постов на макете задуманы дизайнером декоративные линии-разделители.
Проблемы с созданием таких линий, в принципе, нет никакой. Их можно легко создать с помощью стилевого правила и . Или же с помощью правил и элемента .
Но вопрос заключается в том, что декоративные линии на макете короче, чем высота колонки или ширина поста. То есть, получается, что должен быть короче, чем бокс:
Как же поступить в данном случае? Скажем так, обычными способами CSS решить такой вопрос невозможно. Но решение было найдено с помощью форума htmlbook.
В данном случае можно выйти из положения с помощью псевдокласса . Для наглядности представим такой пример.
Создаем слой с контентом:
И пропишем для него стилевые правила:
Как видим, их не так уж и много. Задаем ширину блока и устанавливаем для него относительное позициоирование. Затем для созданного нами бокса создаем псевдокласс и прописываем для него свойства:
Немного распишем, что да как в этом коде.
Внутри простого блока после его содержимого создается псевдоблок с абсолютным позиционированием, для которого устанавливаются координаты и (благодаря двум последним он растягивается, так как создаются верхняя и нижняя координата для границы) и для этого блока создается только левая граница со свойствами: .
WebStorm — hotkeys
## Стандартные сочетания клавиш WebStorm- Alt + 1 — открыть\закрыть панель проекта- Alt + 0 — открыть\закрыть панель коммитов- Alt + 9 — . … Continue reading
How to Limit Border Length with CSS
Sometimes, you may have difficulty when you need to make the border shorter than its parent element. To overcome this, use CSS properties and HTML elements. We’ll need to use border properties and some elements such as <span>, <div>, etc., or pseudo-elements.
The solution is quite easy. Just follow the steps below.
Create HTML
- Create two <div> elements.
Add CSS
- Style the <div> with an id «box» by using the height, width, and background properties. Set the position to “relative” and specify the border-bottom property.
- Style the <div> with an id «borderLeft» by specifying its border-left property. Set the position to “absolute” and add the top and bottom properties.
Let’s see the result of our code.
Example of limiting the left border:
Result
Next, we’re going to demonstrate another example, where we limit the border length of four different elements. For that, we use four <div> elements and the :before pseudo-element. To limit the length of the top, bottom, right, and left borders, we use the border-top, border-bottom, border-right, and border-left properties, respectively.
Свойство CSS border
Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.
1. Синтаксис CSS border
- border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
- border-style — стиль выводимой рамки. Может принимать следующие значения
- none или hidden — отменяет границу
- dotted — рамка из точек
- dashed — рамка из тире
- solid — простая линия (применяется чаще всего)
- double — двойная рамка
- groove — рифленая 3D граница
- ridge , inset , outset — различные 3D эффекты рамки
- inherit — применяется значение родительского элемента
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».