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

Среда, 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 - Делаем рамочку с картинками
...
Часть 37 - ОБРАМЛЯЕМ КАРТИНКУ РАМОЧКОЙ (урок от Zomka)
Часть 38 - ПРОСТЫЕ РАМКИ С ЗАГОЛОВКОМ
Часть 39 - Полоски или линии которыми можно украсить свой текст
Часть 40 - КОДЫ ОСНОВНЫХ КНОПОЧЕК
Часть 41 - Все о бегущем тексте. Примеры и коды.

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

Рубрики:

Уроки

Метки: оформление текста уроки шаблоны
Понравилось: 2 пользователям

<a href="https://www.liveinternet.ru/users/mangiana/post487639892/">РџРѕР»РѕСЃРєРё РёР»Рё Р»РёРЅРёРё РєРѕС‚РѕСЂС‹РјРё РјРѕР¶РЅРѕ СѓРєСЂР°СЃРёС‚СЊ СЃРІРѕР№ С‚РµРєСЃС‚</a><br/>
	
		
			
				
					
						Р¤Р°РЅС‚Р°Р·РёСЏ Р±Р»РѕРіРµСЂРѕРІ-РґРёР·Р°Р№РЅРµСЂРѕРІ РЅРµ Р·РЅР°РµС‚ РіСЂР°РЅРёС†.. РљР°Р¶РґС‹Р№ СЂР°Р· РїСЂРёРґСѓРјС‹РІР°РµС‚СЃСЏ С‡С‚Рѕ-С‚Рѕ РЅРѕРІРѕРµ РѕС‚ С‡РµРіРѕ Р·Р°С…РІР°С‚С‹РІР°РµС‚ РґСѓС…..РЎРµРіРѕРґРЅСЏ СЏ РїСЂРµРґР»РѕР¶Сѓ РЅРµР·РЅР°С‡РёС‚РµР»СЊРЅС‹Р№, РЅРѕ РёРЅРѕРіРґР° РїСЂРёС…РѕРґСЏС‰РёР№ РІ РїРѕРјРѕС‰СЊ РЅР°Рј СѓСЂРѕРє. РўРµРјР°: &quot;РџРѕР»РѕСЃРєРё&quot;(Р»РёРЅРёРё)
						РРЅРѕРіРґР° РїРѕР»РѕСЃРєР° РјРѕР¶РµС‚ РѕС‡РµРЅСЊ РґР°Р¶Рµ РєСЂР°СЃРёРІРѕ СѓРєСЂР°СЃРёС‚СЊ РЅР°С€ С‚РµРєСЃС‚, РЅР°РїСЂРёРјРµСЂ РІРјРµСЃС‚Рѕ СЂР°Р·РґРµР»РёС‚РµР»РµР№ РёР»Рё РїР°РЅРµР»РµР№ С‚РµРєСЃС‚Р°..РњРѕР¶РµС‚ РєРѕРјСѓ РёРЅС‚РµСЂРµСЃРЅРѕ? РњРЅРµ СЌС‚Рѕ Р±С‹Р»Рѕ РѕС‡РµРЅСЊ РёРЅС‚РµСЂРµСЃРЅРѕ.. Р—РґРµСЃСЊ С‚Рѕ, С‡С‚Рѕ СЏ Р·РЅР°СЋ.Р•СЃР»Рё Сѓ РІР°СЃ РµСЃС‚СЊ РµС‰С‘ РїСЂРµРґР»РѕР¶РµРЅРёСЏ РїРёС€РёС‚Рµ, СЏ РґРѕРїРёС€Сѓ РІ РїРѕСЃС‚ РѕС‚ РІР°С€РµРіРѕ РёРјРµРЅРё. РҐРѕС‡РµС‚СЃСЏ РїРѕР±РѕР»СЊС€Рµ РјР°РЅРёРїСѓР»СЏС†РёР№ СЃ РєРѕРґР°РјРё...
						
						РџСЂРѕСЃС‚Р°СЏ РїСЂСЏРјР°СЏ РїРѕР»РѕСЃРєР° РЅР° РІСЃСЋ ... <a href="https://www.liveinternet.ru/users/mangiana/post487639892/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Метки

-Рубрики

-Цитатник

-Фотоальбом

-Приложения

-Всегда под рукой

-Поиск по дневнику

-Подписка по e-mail

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