• Авторизация


Рамочки с флагом своей страны. 25-02-2016 07:34 к комментариям - к полной версии - понравилось!

Это цитата сообщения Шадрина_Галина Оригинальное сообщение



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



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

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

[700x257]

Голубым цветом выделена ширина полосок флага. В первом случае ( рамочка вверху) она у меня стояла 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 цветов, находим нужные цвета и заменяем
смотрим на картинке.

[700x234]

Голубым выделены цвета полосок флага, а красным, это цвет самой рамки, где будет расположен пост.

ВНИМАНИЕ из ТАБЛИЦЫ 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: 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>

0_9349f_824aa83f_L.png



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

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


вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Рамочки с флагом своей страны. | ДругаяЯ - Украшаем дневники. | Лента друзей ДругаяЯ / Полная версия Добавить в друзья Страницы: раньше»