Рамочки - линии для выделения текста

Четверг, 11 Июня 2015 г. 22:41 + в цитатник

Цитата сообщения Шадрина_Галина

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

Рамочки - линии для выделения текста

Рамочки линии. Такие простые рамочки можно ставить, если просто хочется как-то выделить весь пост, или только самую важную часть его, при этом фон останется ваш.

В рамочку можно вставлять все, что вам захочется, то есть весь ваш пост. Коды каждой такой рамочки внутри конкретной рамки.
Копируйте их, и ставьте в свои записи в Простом редакторе..
Там где написано ВАШ ТЕКСТ- Вставляете свой текст.

В коде рамочек можно заменять цвет ободка рамки, и толщину рамки.
Немного поподробнее об этих кодах.

Посмотрите внимательно на коды таких рамочек. (ниже на рисунке коды нескольких рамочек) Они совершенно одинаковы, и различаются только названием линий, из которых они состоят.

Все, что находится до слов ВАШ ТЕКСТ, Это ОТКРЫВАЮЩИЙ ТЕГ РАМКИ, где и находятся все значения рамки (толщина, цвет, размер. Тег /div, который стоит последним, является закрывающим То есть, где вы его поставите, там и будет заканчиваться рамка.

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

В коде можно заменить цвет ободка рамки. Только заменяйте все очень аккуратно, не задевая других кодов. Находим вот такой значок, он обозначает цвет #FFFACD и меняем цвет на тот, который нужен вам.
Коды цветов HTML НАХОДЯТСЯ ЗДЕСЬ

Толщину линии ободков рамки, так же можно заменять. Она как обычно в пикселях. Находите это значение, и меняете на свое. От этого сразу меняется вид рамки.

Посмотрите на примере как меняется вид рамки.

Рамочка с линией

толщиной 8px

Эта же рамочка, с линией

толщиной 20px

Вот и все настройки по таким рамочкам. Поменять цвет ободков, и толщину стенок рамки совсем несложно. Ставите код рамочки в самом начале вашего поста и все. Если вы берете в рамочку весь ваш пост, то закрывающий тег можете и не ставить, система поставит его сама.
Просто поставьте коды (ДО СЛОВ ВАШ ТЕКСТ), в начале поста, и не заморачивайтесь.

А теперь коды 10 простейших рамочек, с примерами, как выглядят эти рамки.

Ободок рамки выделяется точками.

Меняйте цвет ободков рамки на свой.

КОД рамочки dotted
<div style="border:5px dotted #0000cd;padding:10px;">ВАШ ТЕКСТ.</div>

Ободок рамки - пунктир.

Рамка dashed Цвет краев рамки так же можно поменять на свой. Ищите в коде т#FFFACD и меняйте на цвет, который подходит вам.

КОД рамки dashed
<div style="border:3px dashed #8b0000;padding:10px;">ВАШ ТЕКСТ.</div>

Ободок рамки имеет сплошную линию

solid - ОБОДОК рамки имеет сплошную линию.

КОД рамки solid <div style="border:3px solid #4b0082;padding:10px;">ВАШ ТЕКСТ.</div>

Ободок рамки с двойной обводкой

double - ОБОДОК рамки с двойной робводкой.

КОД рамки double
<div style="border:10px double #006400;padding:10px;">ВАШ ТЕКСТ.</div>

Ободок рамки выделяется в виде кромки

ridge - ОБОДОК рамки выделяется в виде кромки.

КОД рамки ridge
<div style="border:10px ridge #4b0082;padding:10px;">ВАШ ТЕКСТ.</div>

Выпуклый Ободок рамки

outset - ОБОДОК рамки получается выпуклым.

КОД рамки outset
<div style="border:10px outset #800000;padding:10px;">ВАШ ТЕКСТ. </div>

Вдавленный Ободок рамки

inset - ОБОДОК рамки получается вдавленным.

КОД рамки inset
<div style="border:10px inset #f000a0;padding:10px;">ВАШ ТЕКСТ. </div>

Ободок рамки с выемкой

groove -ОБОДОК рамки с выемкой.

КОД рамки groove
<div style="border:10px groove #4169e1;padding:10px;">ВАШ ТЕКСТ. </div>

Рамка с разрывом посредине.

ЗАГОЛОВОК Рамка с разрывом для вставки оглавления или картинки

КОД рамки с разрывом
<center><fieldset style=" border:3px #B22222 solid; padding: 14px; margin:0px 0px 0px 0px;"><legend><font color="#B22222"><b>ЗАГОЛОВОК</b></font></legend>ЗДЕСЬ ПИШЕМ ТЕКСТ</fieldset></center>

Рамка с разноцветными краями

Все ободки рамки разного цвета. Проставляйте коды цветов очень аккупатно

КОД рамки с разноцветными краями
<center><blockquote style="BORDER-LEFT: #ЦВЕТ ЛЕВОГО БОРДЮРА 3px solid; padding: 15px; BORDER-TOP: #ЦВЕТ ВЕРХНЕГО БОРДЮРА 3px solid; padding: 15px; BORDER-BOTTOM: #ЦВЕТ НИЖНЕГО БОРДЮРА 3px solid; padding: 15px;BORDER-RIGHT: #ЦВЕТ ПРАВОГО БОРДЮРА 3px solid" 15px="15px"><font color="#000000"><center>ЗДЕСЬ ПИШЕМ ТЕКСТ</center></font></blockquote></center>

Пунктирная рамочка с фоном.

ЗДЕСЬ ПИШЕМ ТЕКСТ. Рамочка с белым фоном.

Код рамки с фоном
<center><div style="padding: 10px 10px; background: #f3f3f3; width: 820px; font-size: 25px; font-family: Georgia; color: #790000; border: 2px dashed #790000; border-radius: 3px; box-shadow: 0 0 0 5px #f3f3f3, 3px 2px 7px 4px rgba(10,10,0,.5);"><br />ЗДЕСЬ ПИШЕМ ТЕКСТ</div><br /> <br /> Успехов в вашем творчестве. <br /> <img src="https://img-fotki.yandex.ru/get/17914/65387414.749/0_12090c_3c242a9b_orig.png" width="300" height="51" border="0" title="0_987c4_60480c65_orig.png" alt="0_987c4_60480c65_orig.png" /></center>

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
Часть 3 - Рамочки - линии для выделения текста
Часть 4 - Бродилка по сайтам для вашего творчества
Часть 5 - БРОДИЛКА ПО САЙТАМ одноразовая e-mail электронная почта
Часть 6 - Разлиновка — шаблоны разлинованных листов всех форматов.
Часть 7 - Красивые слайд-шоу в ваш дневник