Рамки и линии CSS/HTML

Рамки и линии всегда присутствуют практически на любом сайте, они помогают визуально разделить контент, подчеркнуть или обратить внимание пользователя на нужные элементы, и придать дизайну уникальность.

Рамка для блока CSS

Простая рамка для блока CSS может пригодится для галереи, для того, чтобы выделить изображение. Также можно воспользоваться генератором рамки для блока, и там настроить все параметры нужной рамки,а затем скопировать результат.

Пример

HTML


<div class="block-border"></div>
      

CSS


.block-border {
  width: 100px;
  height: 100px;
  border: 2px solid #f66d52; /* Параметры рамки */
  background: #ccc; /* Цвет фона */
}
     

Рамка внутри блока или картинки при наведении

Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Пример

HTML


<img src="image.jpg" alt="" title=""/>
      

CSS


img:hover {
    outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */
    outline-offset: -10px; /* Выводим рамку внутри элемента */
}
     

Рамка к изображению при наведении

Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.

Пример

HTML


<img src="image.jpg" alt="" title=""/>
      

CSS


img:hover {
    border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */
}
     

Как добавить вертикальную линию к тексту

Чтобы добавить линию к тексту необходимо задать элементу класс. Такое оформление может пригодиться для цитат, сообщений, предупреждений или передачи какой-то важной информации. Цвет линии и фона можно менять по своему усмотрению. Чтобы линия и фон не прилегали плотно к тексту, расстояние от края до текста регулируется с помощью свойства padding.

Пример

Lorem Ipsum

HTML


<p class="line">Lorem Ipsum</p>
      

CSS


.line{
    border-left: 4px solid #f66d52; /* Ширина, цвет и вид линии */ 
    padding: 10px; /* Расстояние от линии до текста */
    background: #efcec8; /* Цвет фона */
    color: #fff; /* Цвет текста */
}
     

Рамки с помощью CSS (border)

Когда необходимо задать рамку для элемента на сайте, можно сделать это с помощью border. Различные стили рамки подойдут как для галереи, так и для того, что бы выделить определенный элемент на сайте.

Пример

HTML



<div class="border-style-solid">Border style: Solid</div>
<div class="border-style-dotted">Border style: Dotted</div> 
<div class="border-style-dashed">Border style: Dashed</div> 
<div class="border-style-double">Border style: Double</div>
<div class="border-style-groove">Border style: Groove</div>
<div class="border-style-ridge">Border style: Ridge</div>
<div class="border-style-inset">Border style: Inset</div>
<div class="border-style-outset">Border style: Outset</div>
      

CSS


.border-style-solid{
	border: 5px solid #f66d52; /* Толщина, стильи цвет рамки */
	padding: 5px; /* Отсступ от рамки */
}
.border-style-dotted{
	border: 5px dotted #f66d52;
	padding: 5px;
}
.border-style-dashed{
	border: 5px dashed #f66d52;
	padding: 5px;
}
.border-style-double{
	border: 8px double #f66d52;
	padding: 5px;
}
.border-style-groove{
	border: 8px groove #f66d52;
	padding: 5px;
}
.border-style-ridge{
	border: 8px ridge #f66d52;
	padding: 5px;
}
.border-style-inset{
	border: 8px inset #f66d52;
	padding: 5px;
}
.border-style-outset{
	border: 8px outset #f66d52;
	padding: 5px;
}
     

Как сделать адаптивные линии с двух сторон заголовка

Нередко бывает, что нужно отобразить линии с обеих сторон заголовка. Чтобы оформить заголовок, как на страницах книги, или разграничить контент. Для этого используют псевдоэлементы ::before и ::after.

Пример

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

HTML


<h3 class="title-side">Lorem Ipsum</h3>
<h3 class="title-side title-side-center">Lorem Ipsum</h3>
<h3 class="title-side title-side-right">Lorem Ipsum</h3>
      

CSS


.title-side {
	overflow: hidden; /* Скрываем линии, чтобы они не выходили за ширину блока заголовка */
	margin: 30px 0; /* Отступ сверху и снизу */
	font-size: 1em; /* Размер шрифта */
    color: #5a5a5a; /* Цвет заголовка */
}
/* Заголовок по центру */
.title-side-center {
    text-align: center;
}
/* Заголовок справа */
.title-side-right {
    text-align: right;
}
.title-side:before,
.title-side:after {
	content: '';	
	display: inline-block;	
	vertical-align: middle; 
	box-sizing: border-box;
	width: 100%; /* Устанавливаем ширину в 100%, что сделает делает линию равной ширине тега заголовка */
	height: 1px; /* Высота линий */
    background: #f66d52; /* Цвет линий */
	border: solid #fff; /* Добавляем к линиям границу с цветом основного фона заголовка, для отступа от текста */
	border-width: 0 30px; /* Отступ от текста */
}
.title-side:before {
	margin-left: -100%;
}
.title-side:after {
	margin-right: -100%;
}
     

Как добавить линию к заголовку с помощью :before и :after

Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.

Пример

Lorem Ipsum

HTML


<h3 class="title-example">Lorem Ipsum</h3>
      

CSS


h3.title-example{
    font-size: 1em; /* Размер шрифта */
    color: #5a5a5a; /* Цвет заголовка */
    text-align: center; /* Текст по центру */
}
/*  CSS код для линии над заголовком */
h3.title-example:before {
    content: '';
    display: block;
    height: 1px; /* Высота линии */
    background: #f66d52; /* Цвет линии */
    width: 150px; /* Ширина линии до наведения */
    margin: 0 auto 10px; /* Отступ с боков по центру и снизу */
	transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:before {
    width: 250px; /* Ширина линии при наведении */
	transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}
/*  CSS код для линии под заголовком */
h3.title-example:after {
    content: '';
    display: block;
    height: 1px; /* Высота линии */
    background: #f66d52; /* Цвет линии */
    width: 150px; /* Ширина линии до наведения */
    margin: 10px auto 0; /* Отступ с боков по центру и сверху */
	transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:after {
    width: 250px; /* Ширина линии при наведении */
	transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}
     

Меняющаяся рамка при наведении CSS

Эффект при наведении, когда у картинки меняется форма рамки. Такой эффект может пригодиться для галереи изображений, либо для того, чтобы выделить определенный элемент на веб-странице сайта.

Пример

HTML


<div class="mask mask-one mask-one-frame">
  <img src="image1.jpg" class="mask-img" alt="">
</div>
<div class="mask mask-two mask-two-frame">
  <img src="image2.jpg" class="mask-img" alt="">
</div>
<div class="mask mask-three mask-three-frame">
  <img src="image3.jpg" class="mask-img" alt="">
</div>
<div class="mask mask-four mask-four-frame">
  <img src="image4.jpg" class="mask-img" alt="">
</div>
      

CSS


/* Настройки */ 
.mask{
    --uiMaskClipPath: var(--maskClipPath);
    box-sizing: var(--maskBoxSizing, border-box);
    display: var(--maskDisplay, inline-flex);
    padding: var(--maskStrokeThickness, 3px);
    clip-path: var(--uiMaskClipPath);
    background-color: var(--maskStrokeColor, currentColor);
    --maskStrokeColor: #ab7445; /* Цвет рамки */
    --maskStrokeThickness: 5px; /* Ширина рамки */ 
}
.mask-img{
    max-width: 100%;
    display: block;
    clip-path: var(--uiMaskClipPath);
}
.mask, 
.mask-img{
    transition: clip-path var(--maskAnimationDuration, .2s) var(--maskAnimationTimingFunction, ease-out);
}
/* Первая рамка */
.mask-one{
    --maskClipPath: polygon(0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%);
}
.mask-one-frame{
    --maskAnimationDuration: .4s;
}
.mask-one:hover, 
.mask-one:focus{
    --maskClipPath: polygon(0 0, 100% 0, 100% 10%, 100% 100%, 90% 100%, 0% 100%, 0% 90%, 0% 10%);
}
/* Вторая рамка */
.mask-two{
    --maskClipPath: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.mask-two-frame{
    --maskAnimationDuration: .4s;
}
.mask-two:hover, 
.mask-two:focus{
    --maskClipPath: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
/* Третья рамка */
.mask-three{
    --maskClipPath: polygon(0 10%, 10% 10%, 10% 0, 90% 0, 90% 10%, 100% 10%, 100% 90%, 90% 90%, 90% 100%, 10% 100%, 10% 90%, 0 90%);
}
.mask-three-frame{
    --maskAnimationDuration: .5s
}
.mask-three:hover, 
.mask-three:focus{
    --maskClipPath: polygon(90% 0, 100% 0, 100% 10%, 100% 90%, 100% 100%, 90% 100%, 10% 100%, 0 100%, 0 90%, 0 10%, 0 0, 10% 0);
}
/* Четвертая рамка */
.mask-four{
    --maskClipPath: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}
.mask-four:hover, 
.mask-four:focus{
    --maskClipPath: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
     

Рамка вокруг картинки CSS

Чтобы добавить рамку для изображения с помощью CSS можно использовать свойство border, в качестве значения нужно указать толщину рамки, ее стиль и цвет. Стили рамки можно посмотреть на странице генератора границ блока CSS, а так же настроить там нужную рамку и скопировать уже готовый код.

Пример

HTML


<img src="image.jpg" alt="" class="image-border"/>
      

CSS


.image-border {
    border: 10px solid #56382d; /* Ширина,  стиль и цвет рамки */
}