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

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

  • автор:

Как сделать рамку в html вокруг текста

как сделать рамку html вокруг текста

В процессе оформления сайта многие начинающие сайтостроители задаются вопросом, как изменить шрифт, размер и цвет заголовков. Да, это действительно отличный вариант, с помощью которого можно внести некоторую свежесть оформления сайта. Но существует еще один не менее интригующий вопрос, как сделать рамку html.

Для чего нужна рамка html

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

Особенности создания рамки вокруг текста

Конечно же, вариаций оформления рамки средствами CSS значительно больше, но это совсем другая история. К тому же данный способ подойдет более продвинутым сайтостроителям. Я думаю, у нас с вами и с помощью правки html кода получится не менее красивая рамка html.

На первом этапе необходимо уяснить то, что рамку можно сделать для каждого html элемента в независимости, что это за тег ,

, , и т.д.

В свою очередь существует разница между рамками встраиваемых и блочных элементов.

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

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

Конечно же для того чтобы сделать текст в рамке html нам придется обратиться к встроенным стилям. Данный способ станет наиболее приемлемым для выделения некоторых отдельно взятых фраз, абзацев в тексте и картинок. Если же вам необходимо выделить какую-то определенную часть шаблона, отображающуюся на всех страницах сайта, разумно обратиться к правке файла style.css шаблона.

Как вокруг текста сделать рамку в html

Думаю теории предостаточно. Пришло время попрактиковаться. В качестве примера я заключу в яркую салатовую рамку с серым фоном одно из важных предложений этой статьи.

Важный момент! Встроенные стили отменно работают и не вредят HTML валидности сайта.

Для реализации такой же рамки необходимо обратиться к тегу

и заключить между ним ниже опубликованный код.

Так как в данном примере использовались встроенные css стили, считаю не менее важным ознакомить вас с каждым из них.

border — свойство, отвечающее за отображение рамки. Для упрощения поставленной задачи я не стал по отдельности прописывать каждое свойство border-width (толщина границ рамки), border-color (цвет рамки html). А вместо этого немного сократил html код и указал все свойства после двоеточия.

Для изменения внешнего вида рамки достаточно изменить значение solid.

Существуют следующие границы рамок:

  • ridge — рельефная.
  • dotted — точечная.
  • double — двойная.
  • dashed — пунктирная.
  • solid — сплошная.

padding — свойство, отвечающее за расстояние между рамкой и объектом, заключенным в нее.

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

свойство margin. Таким способом можно осуществить отступы элементов, которые находятся снаружи рамки.

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

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

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

сообщить об ошибке

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

Красивые рамки для текста и фото на сайте

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

Во всех примерах ширина блока, если не задана явно, определяется шириной блока-контейнера, в который он вложен. Также в примерах используются шрифты Google Fonts.

Пример 1.

 

Весеннее
предложение

body .section .border < position: relative; display: inline-block; >.border img < display: block; width: 350px; >.border:before, .border:after < content: ""; width: 300px; height: 300px; border: 6px solid #FBF6F2; position: absolute; top: 20px; left: 40px; z-index: 2; >.border:after < top: -10px; left: 10px; z-index: -1; >.border p < position: relative; text-align: center; margin: 0; >.border p:before, .border p:after < content: ""; width: 15px; height: 15px; border-radius: 50%; background: #FBF6F2; position: absolute; >.border p:before < top: -10px; right: 0; >.border p:after < bottom: -45px; left: 10px; >.border span

Пример 2.

body .frame-outer < position: relative; width: 70%; margin: 0 auto; border: 10px solid #D7CDC7; padding: 10px; >.frame-inner < text-align: center; position: relative; border: 10px solid #D7CDC7; >.frame-outer:before, .frame-outer:after, .frame-inner:before, .frame-inner:after < content: ""; position: absolute; width: 40px; height: 40px; background-color: #F9F9F9; background-image: linear-gradient(90deg, #DB9E3D 33%, rgba(255,255,255,0) 33%, rgba(255,255,255,0) 66%, #DB9E3D 66%, #DB9E3D), linear-gradient(90deg, #DB9E3D 33%, rgba(255,255,255,0) 33%, rgba(255,255,255,0) 66%, #DB9E3D 66%, #DB9E3D); background-repeat: no-repeat; background-size: 30px 10px; background-position: 0 0, 0 20px; >.frame-outer:before < left: -10px; top: -10px; z-index: 3; >.frame-outer:after < right: -10px; top: -10px; z-index: 3; background-position: 10px 0, 10px 20px; >.frame-inner:before < left: -30px; bottom: -30px; background-position: 0 10px, 0px 30px; >.frame-inner:after < right: -30px; bottom: -30px; background-position: 10px 10px, 10px 30px; >.frame-inner p

Пример 3.

 

Дарите женщинам цветы
Одной улыбки милой ради,
На календарь тайком не глядя,
Без повода, а просто так.

.wrap < text-align: center; background: linear-gradient(70deg, #C5FCFF 9px,rgba(255,255,255,0) 10px), linear-gradient(-70deg, #C5FCFF 9px, rgba(255,255,255,0) 10px), radial-gradient(#C5FCFF 9px, rgba(255,255,255,0) 10px), linear-gradient(70deg, #C5FCFF 9px, rgba(255,255,255,0) 10px), linear-gradient(-70deg, #C5FCFF 9px, rgba(255,255,255,0) 10px), radial-gradient(#C5FCFF 9px, rgba(255,255,255,0) 10px); background-position: 30px -30px, -30px -30px, 0 0, 0 0, 0 0, 30px 30px; background-size: 60px 60px; background-color: white; background-repeat: repeat; padding: 30px 50px; position: relative; >.wrap span

Пример 4.

 

Мой профиль

Lorem ipsum.

Смотреть профиль

.wrap < width: 260px; height: 440px; margin: 0 auto; padding: 20px; box-sizing: border-box; background: white; text-align: center; font-family: 'Open Sans', sans-serif; position: relative; >.wrap:after < content: ""; position: absolute; width: 0; height: 0; border-left: 200px solid #CCF9F6; border-top: 220px solid #FFCE86; border-right: 200px solid #FF9B6C; border-bottom: 220px solid #CCF9F6; z-index: -1; left: -70px; top: 0; >.wrap p < font-size: 14px; line-height: 1.5; >.wrap a

Пример 5.

 

текст

.wrap < background: linear-gradient(90deg, #EFEFE7 50%, #BCE8EA 50%); position: relative; padding: 40px; box-sizing: border-box; >.wrap:before, .wrap:after < content: ""; position: absolute; width: 50%; height: 10px; background: linear-gradient(90deg, #BCE8EA 50%, #EFEFE7 50%); left: 25%; >.wrap:before .wrap:after .wrap p

Пример 6.

 

Мода & Весна

.border < height: 400px; background: #312861; padding: 30px 40px; box-sizing: border-box; >.image-container < position: relative; width: 80%; height: 100%; margin: 0 auto; background: #F9DAC8; >.image-container:before, .image-container:after < content: ""; position: absolute; top: 0; width: 10%; height: 100%; background: repeating-linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0) 18px, #F9DAC8 18px, #F9DAC8 25px); >.image-container:before .image-container:after .image-container img < width: 170px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 2px solid #312861; >.image-container h3

Пример 7.

 

Вечерний альбом

М. Цветаева

.block-container < width: 350px; height: 400px; background: #fdfefe; margin: 0 auto; position: relative; border-top: 1px solid rgba(255,255,255,0); box-shadow: 2px 2px 5px rgba(0,0,0,.1); >.block-container:before < content: ""; position: absolute; left: 50px; z-index: 3; width: 0; height: 0; border-top: 400px solid white; border-left: 50px solid rgba(255,255,255,0); >.block-container:after < content: ""; width: 100px; height: 100%; position: absolute; left: 0; top: 0; background: radial-gradient(circle, #00B3ED 4px, rgba(255,255,255,0) 4px, rgba(255,255,255,0) 9px, #D2F0FB 9px, #D2F0FB 10px, rgba(255,255,255,0) 10px) 0 0, radial-gradient(circle, #EC6047 4px, rgba(255,255,255,0) 4px, rgba(255,255,255,0) 9px, #FDFEFD 9px, #FDFEFD 10px, rgba(255,255,255,0) 10px) 18px 18px, radial-gradient(circle, #D2F0FB 2px, rgba(255,255,255,0) 2px) 18px 0, radial-gradient(circle, #EC6047 2px, rgba(255,255,255,0) 2px) 0 18px; background-size: 36px 36px; font-size: 6px; background-color: #2F2F63; background-repeat: repeat; >.text-wrap < position: relative; width: 100%; height: 100%; padding-right: 40px; box-sizing: border-box; text-align: right; >.text-wrap h1, .text-wrap h2 < font-family: 'Open Sans', sans-serif; color: #2F2F63; >.text-wrap h1 < margin-top: 150px; font-size: 24px; >.text-wrap h2 < text-transform: uppercase; position: relative; font-size: 16px; margin-top: 30px; font-weight: 300; >.text-wrap h2:before

Пример 8.

 

С днём рождения!

.card < background: white; position: relative; padding: 20px; box-sizing: border-box; >.card:before, .card:after < content: ""; position: absolute; left: 0; width: 100%; height: 100px; background: radial-gradient(circle, #fbfcfc 6px, rgba(255,255,255,0) 6px) 0 0, radial-gradient(circle, rgba(0,0,0,.1) 6px, rgba(255,255,255,0) 6px) 2px 2px; background-size: 30px 25px; background-repeat: repeat; >.card:before < top: 0; border-bottom: 3px solid #fbfcfc; >.card:after < bottom: 0; border-top: 3px solid #fbfcfc; >.card-text < border: 8px solid rgba(255, 151, 88, .7); border-radius: 8px; position: relative; z-index: 3; >.card h3

Пример 9.

 

Юлия ВысоцкаяФотограф

.business-card < padding: 20px; background: #E7F3E5; position: relative; >.business-card:before < content: ""; position: absolute; border-top: 6px solid #A2822F; border-left: 6px solid #A2822F; width: 30px; height: 30px; top: 24px; left: 24px; z-index: 3; >.business-card h1 < min-width: 300px; text-align: center; border: 4px solid #A2822F; position: relative; padding: 50px 0; margin: 0; font-family: 'Cormorant SC', serif; >.business-card h1:before < content: ""; position: absolute; width: 64px; height: 46px; border-bottom: 4px solid #A2822F; left: -4px; top: -4px; background: #E7F3E5; >.business-card h1:after < content: ""; position: absolute; width: 14px; height: 60px; border-top: 4px solid #A2822F; border-left: 4px solid #A2822F; left: 42px; top: -4px; >.business-card a < display: block; text-decoration: none; color: #A2822F; text-shadow: 1px 1px 0 white; >.business-card span

Пример 10.

 

текст.

.border < background: #F4F0E9; padding: 40px; >.border-top, .border-bottom < border: 3px solid #AF8B52; height: 12px; position: relative; >.border-top:before, .border-top:after, .border-bottom:before, .border-bottom:after < content: ""; position: absolute; border: 3px solid #AF8B52; width: 20px; height: 20px; >.border-top:before < border-radius: 0 100%; left: -26px; top: -26px; >.border-top:after < border-radius: 100% 0; right: -26px; top: -26px; >.border-bottom:before < border-radius: 100% 0; left: -26px; bottom: -26px; >.border-bottom:after < border-radius: 0 100%; right: -26px; bottom: -26px; >.center < border-left: 3px solid #AF8B52; border-right: 3px solid #AF8B52; >.center p

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

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

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

Описание в рамке, что идет пунктирной линией

div <
position:relative;
border: 3px dashed gray;
padding: 1em;
border-radius: 10px;
>

div:after content: ‘✂’;
position:absolute;
top:-.5em;
left:30%;
color:gray;
font-size:40px;
line-height:1;
text-shadow:10px 0 white, -10px 0 white;
>

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

Прикрепления: 5090218.png (21.2 Kb)
Администраторы
Сообщений: 44204

Прикрепления: 5965628.png (2.2 Kb)
Администраторы
Сообщений: 44204

Я не думаю, что могу сказать это достаточно. Основная задача Google — доставлять отличный контент людям, выполняющим поиск. Если это не ваша цель, то все потеряно.

Прикрепления: 0354023.png (7.5 Kb)
Администраторы
Сообщений: 44204

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

Оформляем текст в рамку с помощью HTML тегов

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

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

Использование свойств

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

Абзац

Теперь нужно назначить для него соответствующий стиль. Напоминаем, за рамку в HTML отвечает свойство » border «. Для него необходимо указывать 3 параметра:

  • Толщину рамку в пикселях
  • Форму границы (сплошная, точечная и тд.)
  • Цвет рамки

Допустим, нам нужно оформить наш абзац красной сплошной рамкой, толщиной в 1 пиксель. Вот такой код мы должны прописать в атрибуте » style » для тега » p «.

Привет. Этот текст оформлен красной рамкой

Вы получите вот такой результат.

В нашем примере текст в данном абзаце будет оформлен красной рамкой

Как правильно указывать параметры:

  1. Толщина указывается числом с дополнением » px «
  2. Доступны следующие варианты оформления рамки: dotted (точечная), dashed (прерывистая линия), solid (сплошная), double (двойная). Дополнительные варианты оформления делают рамку для текста с визуальными эффектами.
  3. Цвет рамки можно указывать английским словом, соответствующим выбранному цвету, или же указывая код цвета (например, синий #0000FF )

Такие же свойства вы можете применить к тегам » div » и » span «, заключив в них нужный текст.

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

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