Рамочки с флагом своей страны.Шадрина_Галина

Предлагаю вам вот такие простые, но оригинальные рамочки, для постов посвященных тематике своей страны, или поздравлений с 23 февраля, Днем Победы и прочих праздников. Код такой рамочки внутри рамки.

<div style="padding-left: 10px; padding-right: 10px;"><div style="width: auto; background-repeat: repeat; height: 100%; background-color: white; box-shadow: 0px 0px 10px black; padding: 0px 0px 0px 50px;"><div style="height: 100%; background-color:blue; padding: 0px 0px 0px 50px; box-shadow: 0px 0px 1px black;"><div style="height: 100%; background-color: red; box-shadow: 0px 0px 0px black; padding: 0px 0px 0px 50px;"><div style="height: 100%; background-color: #FFEBCD; box-shadow: 0px 0px 0px black;"> ВАШ ТЕКСТ, Картинки и прочее </div></div></div></div></div></div>

[more=] Где цвета , и размеры полосок можно заменять на свои. ШИРИНА полосок (цветов флага) в пикселях. Можно их менять. Посмотрите на картинке. В высоту рамка растянется сама, по вашему посту.Голубым цветом выделена ширина полосок флага. В первом случае ( рамочка вверху) она у меня стояла 50px, сейчас я ее заменила на 20px Рамочка уже выглядит вот так. (код ее внутри рамки)

<div style="padding-left: 10px; padding-right: 10px;"><div style="width: auto; background-repeat: repeat; height: 100%; background-color:White; box-shadow: 0px 0px 10px black; padding: 0px 0px 0px 20px;"><div style="height: 100%; background-color:blue; padding: 0px 0px 0px 20px; box-shadow: 0px 0px 1px black;"><div style="height: 100%; background-color: red; box-shadow: 0px 0px 0px black; padding: 0px 0px 0px 20px;"><div style="height: 100%; background-color: #FFFACD; box-shadow: 0px 0px 0px black;"> ВАШ ТЕКСТ и картинки </div></div></div></div></div></div>

Цвета полосок флага, так же можно заменять. Открываем таблицу цветов, которая находится здесь УНИКАЛЬНАЯ ТАБЛИЦА HTML цветов, находим нужные цвета и заменяем смотрим на картинке.Голубым выделены цвета полосок флага, а красным, это цвет самой рамки, где будет расположен пост. ВНИМАНИЕ из ТАБЛИЦЫ HTML цветов, можно брать как HTML Имя Цвета (это показано в полосках цвета флага и выделено ГОЛУБЫМ), так и его код (HEX), который показан в цвете самой таблицы (и выделено на рисунке КРАСНЫМ). Работает и так и так. Если в вашей стране флаг двух цветный, то один блок с полоской можно выбросить. Вот код таблицы с двухцветным флагом. <div style="padding-left: 10px; padding-right: 10px;"> <div style="width: auto; background-repeat: repeat; height: 100%; background-color:White; box-shadow: 0px 0px 10px black; padding: 0px 0px 0px 20px;"> <div style="height: 100%; background-color: red; box-shadow: 0px 0px 0px black; padding: 0px 0px 0px 20px;"> <div style="height: 100%; background-color: #FFFACD; box-shadow: 0px 0px 0px black;"> ВАШ ТЕКСТ </div> </div> </div> </div> </div> И еще одна рамочка с флагом. Но полоски флага располагаются не сбоку, а сверху. Код такой рамочки внутри ее.

<div style="padding-left: 10px; padding-right: 10px;"><div style="width: auto; background-repeat: repeat; height: 100%; background-color:White; box-shadow: 0px 0px 10px black; padding: 20px 0px 0px 0px;"><div style="height: 100%; background-color: blue; padding: 20px 0px 0px 0px; box-shadow: 0px 0px 1px black;"><div style="height: 100%; background-color: red; padding: 20px 0px 0px 0px; box-shadow: 0px 0px 1px black;"><div style="height: 100%; background-color:#F5DEB3; box-shadow: 0px 0px 0px black;"> ВАШ ПОСТ </div></div></div></div></div></div>

Ширину полосок, их количество и цвета менять аналогично. Как и цвет самой рамки, где будет располагаться ваш пост. Рамка, где ширина полосок увеличена до 50px . Код тоже внутри рамки.

<div style="padding-left: 10px; padding-right: 10px;"><div style="width: auto; background-repeat: repeat; height: 100%; background-color:White; box-shadow: 0px 0px 10px black; padding: 50px 0px 0px 0px;"><div style="height: 100%; background-color: blue; padding: 50px 0px 0px 0px; box-shadow: 0px 0px 1px black;"><div style="height: 100%; background-color: red; padding: 50px 0px 0px 0px; box-shadow: 0px 0px 1px black;"><div style="height: 100%; background-color:#B0E0E6; box-shadow: 0px 0px 0px black;"> ВАШ ПОСТ </div></div></div></div></div></div>

[/more]

Серия сообщений "Шпаргалки":
Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 17 - 100 самых полезных сайтов Интернета
Часть 18 - Как правильно вставлять код в окошко для кодов.
Часть 19 - Рамочки с флагом своей страны.
Часть 20 - Справочник по основным тегам HTML.
Часть 21 - Создание рамочек без знаний html всего за пару минут