Как сделать красивую рамку css
Перейти к содержимому

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

  • автор:

Как сделать красивую пунктирную рамку с закруглениями?

введите сюда описание изображения

Всем привет. Я сделал drag n drop input, и хочу, чтобы он был красивый) Но, мне не очень нравиться, что у моей пунктирной рамки с закруглениями немного, как будто, обрезаются края или что-то подобное. В общем, есть ли какой-нибудь вариант сделать это получше, чтобы в самих краях так же был отрезок с закруглениями? Делаю я, если что, на React + mui.

Отслеживать

3,563 8 8 золотых знаков 12 12 серебряных знаков 39 39 бронзовых знаков

2.17. CSS3-рамка

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

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

  • Содержание:
  • 1. Закругление углов с помощью border-radius
  • 2. Рамки-изображения border-image
  • 2.1. Ширина рамки-изображения border-image-width
  • 2.2. Ресурс рамки-изображения border-image-source
  • 2.3. Элементы рамки-изображения border-image-slice
  • 2.4. Повтор рамки-изображения border-image-repeat
  • 2.5. Смещение рамки-изображения border-image-outset
  • 3. Градиентная рамка

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-radius

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-radius не влияет на border-image .

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;

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

/* Пример 1 */ div < width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30; border-image-repeat: stretch; >/* Пример 2 */ div

border_1

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

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 Наследует значение этого свойства от родительского элемента.

border-image-slice

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

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

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

strech_repeat_round

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

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

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

outset

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

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

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

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

* .wrap < height: 200px; padding: 25px; background: #00E4F6; >.gradient

Методы создания рамок при помощи HTML и CSS

У создателей сайтов часто возникают вопросы по улучшению его внешнего вида (интерфейса). Всевозможные картинки, иконки, рамки, линии, выделения цветом – незаменимые атрибуты профессионального контента. Разберем простые, но популярные методы оформления сайта, которыми пользуются топовые вебмастера.

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

Выделить блок и сделать его более удобным помогают вертикальные линии. Существует множество способов, но не все способствуют правильному отображению в различных браузерах. Воспользуемся универсальным способом, работающим во всех браузерах. Добавим вертикаль с помощью HTML кода. Код прописываем в текстовом редакторе.

  Добро пожаловать на сайт ИнетВинегрет  

Добро пожаловать на сайт ИнетВинегрет

Характеристики можно менять по своему усмотрению. Например, сплошную линию, solid, можно заменить на пунктирную (dotted), двойную (double), прерывистую (dashed), объемную вдавленную (inset), объемную выпуклую (outset), объемную рифленую выпуклую (ridge), объемную рифленую вдавленную (groove). М ожно изменить толщину линии, размер отступа и цвет границы, используя палитру цветов RGB.

Borderleft можно заменить на границу справа — borderright, bordertop – сверху, borderbottom – снизу, border – рамка вокруг текста. В этот код можно вставить изображение и отделить его рамкой или линиями.

Как создать вертикальную линию при помощи CSS

Если привычнее работать с CSS стилями, то для создания вертикальной линии присваивается класс для блока, а его свойства прописываются в CSS-файле.

HTML

  Добро пожаловать на сайт ИнетВинегрет  

CSS

.block-vert-line  border-left:3px solid blue; padding-left:15px; >

Добро пожаловать на сайт ИнетВинегрет

Варианты оформления рамок в HTML и CSS

Возможно воспользоваться встроенными стилями и получить рамку с фоном вокруг текста.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

В стили добавили цвет фона backgroundcolor. Если нужно отрегулировать отступ самой рамки от других объектов, то необходимо вставить margin между тегами . Для выравнивания текста по центру рамки добавляется свойство text-align: center. В зависимости от того, с какой стороны нужно отступать, к свойствам margin и padding добавятся направления отступов:

  • top–сверху;
  • right–справа;
  • bottom–снизу;
  • left–слева.

Следующая рамка будет состоять из пунктирной линии (dashed).

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Далее только заменяем dashed на dotted, double, groove, ridge.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Если хочется закругленную рамку, то вместо border, добавим border-radius и box-shadow.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Чтобы размыть границу рамки, нужно увеличить третью цифру box-shadow с 0 до 6px.

При желании сделать разноцветную рамку, следует добавить в box-shadow дополнительные значения с разными цветами.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

Рамку можно сделать и в виде окружности.

Добро пожаловать на сайт ИнетВинегрет

Добро пожаловать на сайт ИнетВинегрет

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

Популярна рамка с цветом, меняющимся при наведении на нее курсором. Здесь используется свойство hover.

    .border_hover  border: 3px solid blue;  padding: 15px;  width: 500px;  height: 30px;  >  .border_hover:hover  border: 3px solid #F0F;  padding: 15px;  >    
Добро пожаловать в Инетвинегрет

шпаргалки блогерши

Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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);
>
>

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

Рамка. Вариант 2

Рамка. Вариант 2

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

Рамка. Вариант 3

Рамка. Вариант 3

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

Рамка. Вариант 4

Рамка. Вариант 4

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

Рамка 5

.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;
>

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

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

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