Полоски и линии для украшения текстов

Вторник, 09 Октября 2018 г. 05:44 + в цитатник

Цитата сообщения 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 - Оформление текста (все коды в окошечках)
...
Часть 29 - HTML5 для ЛиРу - коды плееров
Часть 30 - Подборка кодов для странички..
Часть 31 - Полоски и линии для украшения текстов
Часть 32 - Необычные курсоры
Часть 33 - Создать Gif-картинку из видео с YouTube
Часть 34 - Как обрезать видео на компьютере: подробная инструкция
Часть 35 - Как скачать видео с Rutube и выделить музыкальный файл

Метки: для блога

<a href="https://www.liveinternet.ru/users/gulcatai/post441832708/">РџРѕР»РѕСЃРєРё Рё Р»РёРЅРёРё РґР»СЏ СѓРєСЂР°С€РµРЅРёСЏ С‚РµРєСЃС‚РѕРІ</a><br/>РџРѕР»РѕСЃРєРё РёР»Рё Р»РёРЅРёРё РєРѕС‚РѕСЂС‹РјРё РјРѕР¶РЅРѕ СѓРєСЂР°СЃРёС‚СЊ СЃРІРѕР№ С‚РµРєСЃС‚ .

Р¤Р°РЅС‚Р°Р·РёСЏ Р±Р»РѕРіРµСЂРѕРІ-РґРёР·Р°Р№РЅРµСЂРѕРІ РЅРµ Р·РЅР°РµС‚ РіСЂР°РЅРёС†.. РљР°Р¶РґС‹Р№ СЂР°Р· РїСЂРёРґСѓРјС‹РІР°РµС‚СЃСЏ С‡С‚Рѕ-С‚Рѕ РЅРѕРІРѕРµ РѕС‚ С‡РµРіРѕ Р·Р°С…РІР°С‚С‹РІР°РµС‚ РґСѓС…..РЎРµРіРѕРґРЅСЏ СЏ РїСЂРµРґР»РѕР¶Сѓ РЅРµР·РЅР°С‡РёС‚РµР»СЊРЅС‹Р№, РЅРѕ РёРЅРѕРіРґР° РїСЂРёС…РѕРґСЏС‰РёР№ РІ РїРѕРјРѕС‰СЊ РЅР°Рј СѓСЂРѕРє. РўРµРјР°: "РџРѕР»РѕСЃРєРё"(Р»РёРЅРёРё)
РРЅРѕРіРґР° РїРѕР»РѕСЃРєР° РјРѕР¶РµС‚ РѕС‡РµРЅСЊ РґР°Р¶Рµ РєСЂР°СЃРёРІРѕ СѓРєСЂР°СЃРёС‚СЊ РЅР°С€ С‚РµРєСЃС‚, РЅР°РїСЂРёРјРµСЂ РІРјРµСЃС‚Рѕ СЂР°Р·РґРµР»РёС‚РµР»РµР№ РёР»Рё РїР°РЅРµР»РµР№ С‚РµРєСЃС‚Р°..РњРѕР¶РµС‚ РєРѕРјСѓ РёРЅС‚РµСЂРµСЃРЅРѕ? РњРЅРµ СЌС‚Рѕ Р±С‹Р»Рѕ РѕС‡РµРЅСЊ РёРЅС‚РµСЂРµСЃРЅРѕ.. Р—РґРµСЃСЊ С‚Рѕ, С‡С‚Рѕ СЏ Р·РЅР°СЋ.Р•СЃР»Рё Сѓ РІР°СЃ РµСЃС‚СЊ РµС‰С‘ РїСЂРµРґР»РѕР¶РµРЅРёСЏ РїРёС€РёС‚Рµ, СЏ РґРѕРїРёС€Сѓ РІ РїРѕСЃС‚ РѕС‚ РІР°С€РµРіРѕ РёРјРµРЅРё. РҐРѕС‡РµС‚СЃСЏ РїРѕР±РѕР»СЊС€Рµ РјР°РЅРёРїСѓР»СЏС†РёР№ СЃ РєРѕРґР°РјРё...

РџСЂРѕСЃС‚Р°СЏ РїСЂСЏРјР°СЏ РїРѕР»РѕСЃРєР° РЅР° РІСЃСЋ С€Рё... <a href="https://www.liveinternet.ru/users/gulcatai/post441832708/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

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

LiveInternetLiveInternet

-Метки

-Рубрики

-Цитатник

-Музыка

-Приложения

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

-Фотоальбом

-Я - фотограф

Я хочу шофер, чтоб тебе повезло...

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

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

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

Полоски и линии для украшения текстов