Рамочки с флагом своей страны

Вторник, 02 Февраля 2016 г. 15:07 + в цитатник

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

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

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

Предлагаю вам вот такие простые, но оригинальные рамочки, для постов посвященных тематике своей страны, или поздравлений с 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>

Где цвета , и размеры полосок можно заменять на свои. ШИРИНА полосок (цветов флага) в пикселях. Можно их менять. Посмотрите на картинке.

В высоту рамка растянется сама, по вашему посту.

Голубым цветом выделена ширина полосок флага. В первом случае ( рамочка вверху) она у меня стояла 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;"><br /> ВАШ ТЕКСТ<br /> </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>

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

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