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

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

  • автор:

Как сделать текст на рамке, в качестве заголовка (html + CSS)?

aaca0217ca174758bd61fcf21b4c769f.png

Примерно таким образом

  • Вопрос задан более трёх лет назад
  • 2821 просмотр

Комментировать

Решения вопроса 1

Ankhena

Ankhena @Ankhena Куратор тега CSS

Нежно люблю верстку

Для этого есть обычный HTML

 
ваш текст

Ответ написан более трёх лет назад

Нравится 4 2 комментария

Romua1d @Romua1d Автор вопроса

вот именно его я и искал)

Ankhena

Ankhena @Ankhena Куратор тега CSS

Romua1d: Есть классный сайт https://webref.ru/html продолжатель htmlbook.ru, можно просто открыть список тегов и проглядеть его глазами за пару минут, чтобы вспомнить забытый тег или css-свойство.
Да и просто полезно иногда проглядывать этот или аналогичный справочник.

Как выровнять текст в рамке?

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

Сделал рамку в форме круга. И заполненность этого круга — это статистика. Повернул таблицу (transform: rotate(-45.0deg);). Конечно же логично, что и текст при этом повернулся. Как выровнить текст? CSS

.skills h1 < border-bottom: 10px solid #000; padding-top: 100px; >.skills__stats < max-width: 775px; color: #1cb88b; padding-top: 80px; >.circle__stats < display: flex; justify-content: space-between; padding-bottom: 50px; >.circle__1, .circle__2, .circle__3, .circle__4 < width: 152px; height: 152px; border: 10px solid #1cb88b; border-radius: 100%; text-align: center; padding-top: 7%; font-size: 18px; font-weight: 700; >.circle__1 < border-top: #fff solid 10px; transform: rotate(-45.0deg); >.circle__2
 

Our
skills

75
25
75
50

Отслеживать
1,744 1 1 золотой знак 5 5 серебряных знаков 31 31 бронзовый знак
задан 14 авг 2019 в 9:00
221 1 1 золотой знак 3 3 серебряных знака 13 13 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Тут два примера и один на SVG и второй на html css и заметьте что svg можно управлять

.chart < width: 100px; height: 100px; border: 20px solid red; border-radius: 50%; border-left: 20px solid transparent; transform: rotate(30deg); text-align: center; line-height: 100px; >.chart p
   45%  

45%

Отслеживать
ответ дан 14 авг 2019 в 9:46
Резидент Казахстана Резидент Казахстана
13.5k 2 2 золотых знака 19 19 серебряных знаков 62 62 бронзовых знака

  • css
  • вёрстка
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Html выделить текст цветом (фон), рамкой

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

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

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

В текстовом режиме вставьте в запись (пост) следующий html код (в режиме ТЕКСТ).

ваш текст

Все параметры можете изменить по своему вкусу.
В режиме ВИЗУАЛЬНО вы увидите текст в рамке.

html выделить цветом фон текста, рамку

Толщина и размер рамки

В вышеприведенном примере РАЗМЕР шрифта текста font-size: 12px

СТИЛЬ шрифта font-family: Arial

ТОЛЩИНУ и ЦВЕТ рамки определяет свойство border: 2px solid #aa0000.

ЦВЕТ фона background: #F8E4DF

Вид рамки

Solid — сплошная линия. Обводка может быть:

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

При таком написании рамка растягивается на всю ширину занимаемого блока

или .

Html рамка по длине текста

Чтобы сделать рамку по длине текста, надо задать ее ширину, например, width:100px.

ваш текст

html рамка по длине текста

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

Как выбрать цвет рамки и фона

Чтобы подобрать цвет рамки и цвет фона, наиболее подходящие к дизайну вашего сайта:
ОТКРОЙТЕ свой сайт.

Где в CSS искать название блога

НАВЕДИТЕ курсор на элемент, который надо изменить.

ПРАВАЯ кнопка мыши, ПРОСМОТР КОДА ЭЛЕМЕНТА (в Google Chrome), или ИССЛЕДОВАТЬ ЭЛЕМЕНТ (в Mozilla Firefox), или ПРОИНСПЕКТИРОВАТЬ ЭЛЕМЕНТ (в Opera). Далее во всех этих браузерах действия аналогичны.

Появляется окно в нижней части экрана. Просматриваемый элемент в нем подсвечен.

Нажмите на квадратик COLOR и выберите наиболее подходящий вам цвет. Скопируйте цифровое обозначение цвета и вставьте его в html код (цвет рамки или цвет фона).

Заключение

Готово, вы получили выделение текста цветом (цветной фон) и цветной рамкой. Сделали это простым способом.

Понравилась статья? Поделитесь информацией с друзьями. Пишите отзывы в комментариях!

Как написать на чистом css рамку с «вырезом» для текста?

GlYmGLa.png

Много раз пытался, но не получилось. Жду любые предложения. Критиковать о том, что я объяснять не умею, не обязательно 🙂

  • Вопрос задан более трёх лет назад
  • 9194 просмотра

Комментировать

Решения вопроса 1

copyloc

Ярослав Никитин @copyloc Автор вопроса

Человек то я не глупый, просто притворяюсь

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

.text_theme < font-size:10px; border-left: 100px solid #333333; border-right: 500px solid #333333; padding-left:20px; padding-right:20px; >.box_theme
ТЕКСТ
Содержимое

Ответ написан более трёх лет назад

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

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