Как сделать рамку для текста в css

5 вариантов красивых анимированных рамок с использованием CSS

Привет, друзья. Красивые анимированные рамки для блоков div всегда привлекают внимание читателей. Вы можете оформить на странице в такую рамку текст или картинку.
В своё время я уже писала статьи про такое оформление.
Вы можете посмотреть, если пропустили как создать эффект появления рамки , или просто красивые рамки для изображений в блоге, или рамка с эффектом веера.

анимированные рамки

Сегодня поколдуем и ёщё сделаем 5 вариантов красивых анимированных рамок с использованием CSS. Все предложенные коды имеют заданную ширину и высоту, цвет, размер шрифта. Если вам вариант подходит сразу копируйте нужный код. При необходимости, вы сможете их поменять на нужные стили. Воспользуйтесь этим редактором.

.ramka-1 <
position: relative;
z-index: 0;
width: 200px;
height: 200px;
border-radius: 10px;
overflow: hidden;
margin: 30px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: ‘Roboto Condensed’, sans-serif;
>
.ramka-1::before <
content: »;
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-color: #EF6C00;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#EF6C00, #EF6C00), linear-gradient(#FFE0B2, #FFE0B2), linear-gradient(#EF6C00, #EF6C00), linear-gradient(#FFE0B2, #FFE0B2);
animation: anim-ramka-1 4s linear infinite;
>
.ramka-1::after <
content: »;
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% — 12px);
height: calc(100% — 12px);
background: white;
border-radius: 5px;
>
@keyframes anim-ramka-1 <
100% <
transform: rotate(1turn);
>
></style>

Рамка 2. Большая рамка с ховер-эффектом.

Рамка 3. Рамка с фиксированным бордюром и плавающей вокруг ещё рамкой.

Рамка 4. Этот вариант с изменяющимся свойством border-radius. Он имеет заданную ширину и длину, поэтому их стоит подгонять под размер расположенного в нем контента.

Рамка 5. Бегущие строчки.

<div >
Рамка 5</div>
</div>
<style>
.ramka-5-wr <
width: 200px;
height: 200px;
box-sizing: border-box;
padding: 15px;
position: relative;
overflow: hidden;
margin: 30px auto;
>
.ramka-5-wr .ramka-5 <
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-family: ‘Roboto Condensed’, sans-serif;
>
.ramka-5-wr::before <
content: »;
position: absolute;
width: 150%;
height: 150%;
background: repeating-linear-gradient(
#FFF 0%,
#FFF 7.5px,
#FF8A65 7.5px,
#FF8A65 15px,
#FFF 15px,
#FFF 22.5px,
#FF8A65 22.5px,
#FF8A65 30px);
transform: translateX(-20%) translateY(-20%) rotate(-45deg);
animation: anim-ramka-5 20s linear infinite;
>
.ramka-5-wr .ramka-5 <
position: relative;
background-color: #FFF;
flex-direction: column;
box-sizing: border-box;
padding: 30px;
text-align: center;
font-family: sans-serif;
z-index: 2;
>
.ramka-5-wr,
.ramka-5-wr .ramka-5 <
box-shadow: 0 0 2px #FF7043, 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
>
@keyframes anim-ramka-5 <
from <
background-position: 0;
>

to <
background-position: 0 450px;
>
></style>

Код любой готовой рамки устанавливаем в сообщении в режиме HTML. У кого появятся вопросы пишите в комментариях. Разберёмся.

Как обернуть текст в квадратную рамку и пропорционально подогнать под его содержимое?

Как обернуть текст в квадратную рамку (ширина и высота одинаковые)?

Можно сделать в px , но текст динамический.

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

Пример текста в рамке:

Приводит к минимально (по размерам) возможному квадрату. Можно переделать на цикл — тогда будет более плавно

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

CSS border, примеры. Как сделать рамку (границу) в html

Для добавления вокруг изображения цветной рамки применяется стилевое свойство border. В стилях добавляем это свойство к селектору img и указываем толщину рамки, её цвет и стиль. Тогда рамка добавится для всех изображений на странице. Для выбранных рисунков можно ввести собственный класс и писать его только для выбранных элементов (пример 1). Пример 1. Добавление рамки

Закруглённые углы и рамки-изображения

1. Закругление углов с помощью border-radius

Поддержка браузерами

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini:
Android Browser: 4.1
Chrome for Android: 44

border-radius

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

Свойство border-radius позволяет закруглить все углы одновременно, а с помощью свойств border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius можно закруглить каждый угол отдельно.

Если задать два значения для свойства border-radius, то первое значение закруглит верхний левый и нижний правый угол, а второе — верхний правый и нижний левый.

Значения, заданные через /, определяют горизонтальные и вертикальные радиусы. Свойство не наследуется.

border-radius
(border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius)
Значения:
длина Позволяет закруглить углы блока с помощью значений единиц длины — px, em.
% Значения, закругляющие углы, задаются в процентах от длины и ширины сторон элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

div .r1 .r2 .r3 .r4 .r5 .r6 .r7 .r8 .r9 .r10 .r11 .r12 border-radiusborder_r_2Рис. 1. Примеры различных вариантов закругления углов блока

2. Рамки-изображения border-image

Поддержка браузерами

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42

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

border-image
Значения:
краткая запись Устанавливает рамку-изображение с помощью одного свойства, являющегося краткой записью свойств border-image-source, border-image-slice, border-image-width, border-image-outset и border-image-repeat. Значения свойств умолчанию: none 100% 1 0 stretch.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

/* border-image-source и border-image-slice */border: 10px solid transparent;border-image: url(border_round.png) 30;/* border-image-source и border-image-slice и border-image-repeat */border: 10px solid transparent;border-image: url(border_round.png) 30 space;/* border-image-source и border-image-slice / border-image-width */border-image: repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px) 20 / 20px;/* border-image-source и border-image-slice / border-image-width / border-image-outset и border-image-repeat */border-image: linear-gradient(to right, salmon 0%, purple 100%) 10 / 10px / 20px space;

border_roundПри помощи такого простого изображения можно получить вот такие рамки для элемента.

/* Пример 1 */div /* Пример 2 */div border_1border_2
border_image_primerborder_sliceРис. 2. Пример оформления границ блока с помощью изображения

Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat. Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice.

2.1. Ширина рамки-изображения border-image-width

Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1.

border-image-width
Значения:
длина Устанавливает ширину рамки в единицах длины — px / em. Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
число Числовое значение, на которое умножается значение border-width.
% Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
auto Соответствует значению border-image-slice.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

border_image_width

div Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений

2.2. Ресурс рамки-изображения border-image-source

Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока.

border-image-source
Значения:
none Отсутствие изображения для рамки. Значение по умолчанию.
url(url) Относительный или абсолютный путь к изображению.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.
2.3. Элементы рамки-изображения border-image-slice

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

border-image-slice
Значения:
число Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений.
Одно значение устанавливает границы одинакового размера для каждой стороны элемента.
Два значения: первое определяет размер верхней и нижней границы, второе — правой и левой.
Три значения: первое определяет размер верхней границы, второе — правой и левой, а третье — нижней границы.
Четыре значения: определяет размеры верхней, правой, нижней и левой границы.
Числовое значение представляет количество px.
% Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
fill Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

div border-image-sliceРис. 4. Пример задания срезов рамки-изображения

2.4. Повтор рамки-изображения border-image-repeat

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

border-image-repeat
Значения:
stretch Растягивает изображение на все пространство. Значение по умолчанию.
repeat Повторяет заполняющую часть изображения, при этом видны места стыков с угловой частью, и если длины образца не хватает, то он растягивается.
round Наиболее точно заполняет промежуток между углами рамки, дублируя заполняющую часть изображения, при этом может образовать стыки по середине стороны рамки.
space Действует аналогично с repeat.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

div strech_repeat_roundРис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений

2.5. Смещение рамки-изображения border-image-outset

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

border-image-outset
Значения:
длина Отступ рамки-изображения задается с помощью любого положительного числа, указанного в px или em.
число Числовое значение, на которое умножается border-width.
initial Устанавливает это свойство в значение по умолчанию.
inherit Наследует значение этого свойства от родительского элемента.

div outsetРис. 6. Пример смещения рамки-изображения с помощью различных типов значений

3. Градиентная рамка

Значением border-image может выступать не только изображение, но и градиентная заливка.

Полупрозрачная рамка

В качестве одного из цветов выступает transparent. Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width.

Почтовый конверт

По материалам CSS Backgrounds and Borders Module Level 3

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

1. Создайте HTML¶

  • Сначала создайте элемент <div> с названием класса &#8220;frame&#8221;.
  • Укажите элемент <img> в <div>.
  • Задайте атрибут alt для изображения.

Рамка текста CSS

Вот пример использования свойства border для создания рамки шириной в один пиксел и чёрного цвета:

Этому абзацу присвоен класс example-1.

В этом примере мы также использовали свойство CSS padding, или внутренний отступ. Это свойство задаёт размер отступа от текста до обводки (границы элемента).

Давайте рассмотрим ещё один несложный пример, просто чтобы усвоить материал. Создадим рамку шириной три пиксела красного цвета и без внутреннего отступа (свойство CSS padding).

Этому абзацу присвоен класс example-2.

Как мы видим, без внутреннего отступа padding рамка текста выглядит рогато.

PHP-МАСТЕР.
От теории до собственной CMS интернет-магазина

php.jpg

Практический курс по верстке адаптивного сайта с нуля!


Подробнее

1. Синтаксис CSS border

border : border-width border-style border-color | inherit ;

  • border-width &#8211; толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
  • border-style &#8211; стиль выводимой рамки. Может принимать следующие значения
  • none или hidden &#8211; отменяет границу
  • dotted &#8211; рамка из точек
  • dashed &#8211; рамка из тире
  • solid &#8211; простая линия (применяется чаще всего)
  • double &#8211; двойная рамка
  • groove &#8211; рифленая 3D граница
  • ridge , inset , outset &#8211; различные 3D эффекты рамки
  • inherit &#8211; применяется значение родительского элемента

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность &#8220;толщина стиль цвет&#8221;.

Как сделать рамку картинки в CSS

Рамки для картинок задаются аналогично при помощи свойства border. Давайте сделаем рамку зелёного цвета толщиной 4 пикселя для картинки.

Вот как сработает этот код:

css.png

4. Как сделать рамку border только с одного края (границы)

У свойства CSS border есть производные свойства для задания односторонних границ у элемента:

  • border-top &#8211; для задания рамки сверху (верхняя граница)
  • border-bottom &#8211; для задания рамки снизу (нижняя граница)
  • border-right &#8211; для задания рамки справа (правая граница)
  • border-left &#8211; для задания рамки слева (левая граница)

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

Также есть свойства

  • border-top-color &#8211; задание цвета верхний границы
  • border-top-style &#8211; задание стиля верхней границы
  • border-top-width &#8211; задание толщины верхней границы
  • и т.д. для каждого направления

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

4.1. Пример. Красивая рамка для выделения цитат

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

outline-width

То же самое, что и border-width, только для внешней, а не внутренней рамки. Задаёт толщину контура в тех же значениях, что и border-width. Кроме толщины обрамления элемента нужно указать его стиль, иначе контура не будет.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

Как убрать рамку с элемента?

Убрать рамку с элемента можно тремя разными способами:

  • Установить значение border-style: none; (популярный)
  • Установить значение border-width: 0px; (малоиспользуемый)
  • Установить значение border-color: transparent; (нежелательно)

Помните, что прозрачный цвет не убирает рамку с элемента, а только делает невидимой и резервирует для неё место. Это хорошо видно в панели для разработчиков при наведении мыши на border в блочной модели элемента.

Рамки вокруг элементов в CSS3.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *