Рамки и линии всегда присутствуют практически на любом сайте, они помогают визуально разделить контент, подчеркнуть или обратить внимание пользователя на нужные элементы, и придать дизайну уникальность.
Рамка для блока 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; /* Ширина, стиль и цвет рамки */
}