Text border using css (border around text)
Is there a way to integrate a border around text like the image below?
5 Answers 5
Use multiple text shadows:
Alternatively, you could use -webkit-text-stroke, which produces a slightly different result because it modifies the stroke width instead of adding additional shadows around the text. Despite the webkit prefix, it works in most browsers (including Firefox) as of 2022:
Also, read more at CSS-Tricks.
Sure. You could use CSS3 text-shadow :
However it wont show in all browsers right away. Using a script library like Modernizr will help getting it right in most browsers though.
I don’t like that much solutions based on multiplying text-shadows, it’s not really flexible, it may work for a 2 pixels stroke where directions to add are 8, but with just 3 pixels stroke directions became 16, and so on. Not really confortable to manage.
The right tool exists, it’s SVG <text> The browsers’ support problem worth nothing in this case, ’cause the usage of text-shadow has its own support problem too, filter: progid:DXImageTransform can be used or IE < 10 but often doesn’t work as expected.
To me the best solution remains SVG with a fallback in not-stroked text for older browser:
This kind of approuch works on pratically all versions of Chrome and Firefox, Safari since version 3.04, Opera 8, IE 9
Compared to text-shadow whose supports are: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, it results even more compatible.
КАК СДЕЛАТЬ РАМКУ в html вокруг текста?
В процессе оформления сайта многие начинающие сайтостроители задаются вопросом, как изменить шрифт, размер и цвет заголовков. Да, это действительно отличный вариант, с помощью которого можно внести некоторую свежесть оформления сайта. Но существует еще один не менее интригующий вопрос, как сделать рамку html.
Для чего нужна рамка html
На самом деле, никакой особенной функции данный элемент не несет. Но все же текст, заключенный в привлекательно оформленную рамку вызывает определенный интерес у читателей. Поэтому рамку вокруг текста смело можно назвать одним из способов подчеркивания важности обрамленного текста.
Особенности создания рамки вокруг текста
«>
Конечно же, вариаций оформления рамки средствами CSS значительно больше, но это совсем другая история. К тому же данный способ подойдет более продвинутым сайтостроителям. Я думаю, у нас с вами и с помощью правки html кода получится не менее красивая рамка html.
На первом этапе необходимо уяснить то, что рамку можно сделать для каждого html элемента в независимости, что это за тег <h1>, <p>, <img>, <span> и т.д.
В свою очередь существует разница между рамками встраиваемых и блочных элементов.
Рамка встроенного типа находится внутри тегов, правильнее сказать, отвечающий за ее отображение html код заключенный между определенных тегов. На выходе у нас получается html рамка вокруг текста, для которой необходимо прописать определенные команды с целью задания внутренних отступов.
Блочные рамки формируются во всю ширину блока, что провоцирует потребность задания команд связанных с ограничением ширины.
Конечно же для того чтобы сделать текст в рамке html нам придется обратиться к встроенным стилям. Данный способ станет наиболее приемлемым для выделения некоторых отдельно взятых фраз, абзацев в тексте и картинок. Если же вам необходимо выделить какую-то определенную часть шаблона, отображающуюся на всех страницах сайта, разумно обратиться к правке файла style.css шаблона.
Как вокруг текста сделать рамку в html
Думаю теории предостаточно. Пришло время попрактиковаться. В качестве примера я заключу в яркую салатовую рамку с серым фоном одно из важных предложений этой статьи.
Важно! Встроенные стили отменно работают и не вредят HTML валидности сайта.
Для реализации такой же рамки необходимо обратиться к тегу <p> и заключить между ним ниже опубликованный код.
Так как в данном примере использовались встроенные css стили, считаю не менее важным ознакомить вас с каждым из них.
1. border – свойство, отвечающее за отображение рамки. Для упрощения поставленной задачи я не стал по отдельности прописывать каждое свойство — border-width (толщина границ рамки), border-color (цвет рамки html). А вместо этого немного сократил html код, прописав все свойства после двоеточия.
Для изменения внешнего вида рамки достаточно изменить значение solid. Существуют следующие границы рамок:
— ridge – рельефная.
— dotted – точечная.
— double – двойная.
— dashed – пунктирная.
— solid – сплошная.
2. padding – свойство, отвечающее за расстояние между рамкой и объектом, заключенным в нее.
При желании можно еще немного побаловаться со стилями добавив к числу команд заключенных между открывающимся и закрывающимся тегом <p> свойство margin. Таким способом можно осуществить отступы элементов, которые находятся снаружи рамки.
Чтобы изменить задний фон достаточно прописать свойство background-color, указав после двоеточия код желанного цвета.
Рамка вокруг картинки html делается тем же самым способом, поэтому у вас с этим не должно возникнуть проблем. Единственное что нужно знать новичку, это то, что для ее отображения свойства необходимо прописать в одиночном теге <img>.
Подытожив можно сказать, что для того чтобы сделать рамку вокруг картинки или текста достаточно открыть отображение html кода статьи и прописать в нем между определенными тегами специальные свойства.
источник
Свойство CSS border
Свойство CSS border слажит для создания границы объекта, а именно за толщину рамки, за ее цвет и стиль. Это свойство широко используется в HTML. Можно создавать различные эффекты для лучшего восприятия контента на странице. Например, оформить сайдбар, шапку сайта, меню и т.п.
1. Синтаксис CSS border
- border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
- border-style — стиль выводимой рамки. Может принимать следующие значения
- none или hidden — отменяет границу
- dotted — рамка из точек
- dashed — рамка из тире
- solid — простая линия (применяется чаще всего)
- double — двойная рамка
- groove — рифленая 3D граница
- ridge , inset , outset — различные 3D эффекты рамки
- inherit — применяется значение родительского элемента
Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».
Как выделить текст в рамку в html
html рамка – при создании и о оформлении html страниц, иногда возникает необходимость выделить рамкой часть текста, картинку или какой либо другой элемент html документа.
Добавление рамки вокруг текста или картинки на html странице, делается для того, чтобы выделить важную информацию, чтобы обратить внимание посетителя сайта на данный блок.
Какими средствами HTML можно сделать рамку вокруг текста, картинки, или какого-либо другого объекта, добавляемого на страницу сайта?
html рамка с помощью html таблицы
Пожалуй, самым простым способом сделать рамку вокруг текста или картинки, в html, является размещение нужного контента в ячейке таблицы.
То есть, в процессе написания статьи, мы добавляем таблицу, состоящую из одной ячейки и в эту таблицу добавляем блок текста, к которому нужно привлечь внимание посетителя.
HTML код в данном случае может выглядеть вот так:
<table border=»1″ bordercolor=»red» width=»350″ bgcolor=»white» cellspacing=»0″ cellpadding=»10″>
<td>Текст в рамке. Толщина и цвет рамки зависят от значения параметров таблицы</td>
Вот какую рамку формирует выше приведенный код, если его открыть в окне браузера
Как видно из приведенного выше html кода, мы можем изменять толщину рамки, ее цвет, а так же, ширину рамки и фон ячейки.
Получается, что внешний вид рамки может быть задан путем изменения значений параметров:
border=»1″ толщина рамки
bordercolor=»red» цвет рамки
width=»350″ ширина блока с рамкой
bgcolor=»white» цвет фона ячейки
cellspacing=»0″ расстояние между ячейками
cellpadding=»10″ отступ от рамки до текста
В данном случае, количество параметров для редактирования рамки, достаточно большое и это позволяет оформить рамку и ее содержимое на любой вкус.
То есть обилие параметров, которые мы имеем здесь в своем распоряжении, позволяют нам оформить текстовые блоки в рамке таким образом, что на них, наверняка обратит внимание читатель сайта. Но нужно помнить, что все должно быть оформлено красиво и гармонично!
html рамка с помощью стиля style
Если Вы не хотите использовать таблицу для создании рамки вокруг текста, тогда можно воспользоваться стилем border. Применение стилей в html, возможно в блочных элементах, таких как параграф <p></p> или <div></div>.
Так и сделаем, вот пример html кода, выводящего вокруг текста рамку с использованием стилей:
<p align=»center» style=’border: 1px solid red; padding: 5px;’>Есть ли возможность сделать рамку вокруг текста средствами html?</p>
HTML рамка, созданная стилем style
Обрабатывая данный html код, браузер выведет в окно текст в рамке. Внешний вид рамки будет определятся значением параметров стиля style, следующим образом:
border: 1px solid red; — Толщина и цвет рамки
padding: 5px; — Отступ рамки от текста
В некоторых случаях, использование стилей при создании html рамки, будет более предпочтительным, чем использование ячейки таблицы.
Ну что же, мы с Вами рассмотрели два способа, с помощью которых можно сделать рамку вокруг текста или картинки.
В первом способе рамка была создана с помощью html тега <table>, то есть с помощью таблицы, а во втором способе, рамка вокруг текста была создана с использованием стиля style.