Полоски или линии которыми можно украсить свой текст

Среда, 20 Октября 2021 г. 15:41 + в цитатник

Цитата сообщения Schamada

Прочитать целиком В свой цитатник или сообщество!

Фантазия блогеров-дизайнеров не знает границ.. Каждый раз придумывается что-то новое от чего захватывает дух..Сегодня я предложу незначительный, но иногда приходящий в помощь нам урок. Тема: "Полоски"(линии)
Иногда полоска может очень даже красиво украсить наш текст, например вместо разделителей или панелей текста..Может кому интересно? Мне это было очень интересно.. Здесь то, что я знаю.Если у вас есть ещё предложения пишите, я допишу в пост от вашего имени. Хочется побольше манипуляций с кодами...

Простая прямая полоска на всю ширину вашей рамочки или текста, которая всегда серого цвета выглядит так:

<hr />

их можно сделать сразу 2 шт.,но ни размер,ни цвет и толщину полоски вы тут не измените.

<hr /><hr />

Видите, что они серого цвета?
А теперь я дам вам код, в котором можно менять цвет, толщину и длину полоски..

Код на одну полоску:

<hr align="center" width="60%" size="2" color="#0080FF" />

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

Между полосками можно также вставить текст,например вот так:

Лаборатория, где я целыми днями стучу пальцами по «клаве», располагается на двадцать шестом этаже самого высокого из пяти соединенных между собой зданий, принадлежащих нашему холдингу. На двадцать седьмом, последнем, – «Олимп», где живут небожители, наше в прямом смысле «высокое» руководство. «Всевидящее Око Саурона».

<hr />ТЕКСТ<hr />

Вертикальные полосы:

Вертикальными полосками можно тоже украсить текст..
Полоска слева перед текстом:

<center><div style="height:100%; width:700px; border-left:2px solid #cc0033; padding-left:10px;">ТЕКСТ</div></center>

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

<center><div style="height:100%; width:700px; border-left:4px double #E31C1C; background-color:#610C38; padding-left:10px; border-right:5px double #E31C1C;"><span style="font-size:22px;color:#FCF7E9;"><font face="Brush Script MT"><font face="Segoe Script">ТЕКСТ</font></font></span></div></center>

А теперь поговорим о полосках с двух сторон.

На прозрачном фоне,где текст по центру

<center><div style="height:100%; width:560px; border-left:3px #6F6837 double; padding-left:10px; border-right:3px #6F6837 double;padding-right:10px;">ТЕКСТ</div></center>

....... или на прозрачном фоне с текстом на левой стороне

<center><div style="height:100%; width:560px; border-left:3px #6F6837 double; padding-left:10px; border-right:3px #6F6837 double;padding-right:10px;"><p style="text-align: left;">ТЕКСТ</p></div></center>

Полоски с двух сторон на фоне для записей:

<center><div style="height:100%; width:700px; border-left:2px solid #602C01; background-color:#fc9; padding-left:10px; border-right:2px solid #602C01;padding-right:10px;"><p style="text-align: left;">ТЕКСТ</p></div></center>

Полоски можно сделать как скобки, например вот так:

<center><div style="height:100%; width:75%; border-left:3px #6F6837 double; padding-left:10px; border-right:3px #6F6837 double;padding-right:10px;border-radius: 30px;"><br /> <p style="text-align: left;">ТЕКСТ</p></div></center>

Можно сделать рамочку из своего фона например:

<center><table cellpadding="0" cellspacing="0" style="background-image: url('ВАШ ФОН'); border-radius: 30px; box-shadow: 0px 0px 5px #000000;" width="700"><tbody><tr><td align="" style="padding:0px" zzz="zzz"><center><div style="height:100%; width:650px; border-left:3px #fff double; padding-left:15px; border-right:3px #fff double;padding-right:10px;border-radius: 30px;"><font face="Arial" style="font-size: 1.0em; text-shadow: 1px 1px 1px #000; color: #ffffff;"><br /> <p style="text-align: left;">ТЕКСТ</p></font></div></center></td></tr></tbody></table></center>

Вместо слов ВАШ ФОН вставьте код своего фона...

Также ваш текст может украсить название поста или текста окружённая с двух сторон горизонтальными полосками... длину полосок вы ставьте сами в процентном выражении.

Название Вашего поста.

<table><tr><td style="width:25%"><hr /></td><td style="vertical-align:middle; text-align:center">Название Вашего поста.</td><td style="width:25%"><hr /></td></tr></table>

Вот так выглядит текст:

Название Вашего поста.

Стиль полосок можно выбирать самим,какой вам подходит..Я написала выше как менять..

dotted - Линия состоящая из набора точек.
dashed - Пунктирная линия, состоящая из серии коротких отрезков.
solid - Сплошная линия.
double - Двойная линия.
groove - Создает эффект вдавленной линии.
ridge - Создает эффект рельефной линии.

Серия сообщений "Шаблоны":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - Делаем рамочку с картинками
...
Часть 38 - ОБРАМЛЯЕМ КАРТИНКУ РАМОЧКОЙ (урок от Zomka)
Часть 39 - ПРОСТЫЕ РАМКИ С ЗАГОЛОВКОМ
Часть 40 - Полоски или линии которыми можно украсить свой текст
Часть 41 - КОДЫ ОСНОВНЫХ КНОПОЧЕК
Часть 42 - Все о бегущем тексте. Примеры и коды.

Серия сообщений "Оформление текста":
Часть 1 - Меняем цвет под определённым участком текста
Часть 2 - КАК СДЕЛАТЬ СВОЮ НАДПИСЬ НА ИЗОБРАЖЕНИИ В ОНЛАЙН-ФОТОШОП
...
Часть 30 - Справочник по основным тегам HTML
Часть 31 - Генератор живого текста Screedbot
Часть 32 - Полоски или линии которыми можно украсить свой текст
Часть 33 - Онлайн генератор текста
Часть 34 - Как добавить и убрать разрыв страницы в Word
Часть 35 - Бесплатный онлайн сервис X-LINES.RU // Создание красивых графических надписей /
Часть 36 - Символы с кодами,которыми можно украсить свой текст..
Часть 37 - Все о бегущем тексте. Примеры и коды.