Пост для желающих научиться делать свои рамочки.

Среда, 15 Февраля 2023 г. 05:15 + в цитатник

Цитата сообщения tomishka

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

В окошке приведен код восьмислойной рамочки, по которому можно сделать рамочку с любым количеством слоев. Я расскажу об однослойной и двухслойной. По своей сути все слои одинаковые, их различие состоит только в том, что они по-разному названы и имеют разную ширину. Код в окне от Ларисы Гурьяновой, я удалила из него ссылки на радикал и второй разделитель посчитала картинкой, заменив указанное в первом разделителе свойство другим.

<div align="center"><table border="0" background="АДРЕС ФОНА ОБВОДКИ" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС БЛЕСТЯЩЕГО ФОНА" cellpadding="10" cellspacing="0"><tr><td style="padding: 10px;"><table border="0" background="АДРЕС ФОНА ОБВОДКИ" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС ШИРОКОГО ФОНА" cellpadding="45" cellspacing="0"><tr><td style="padding: 45px;"><table border="0" background="АДРЕС ФОНА ОБВОДКИ" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС БЛЕСТЯЩЕГО ФОНА" cellpadding="10" cellspacing="0"><tr><td style="padding: 10px;"><table border="0" background="АДРЕС ФОНА ОБВОДКИ" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="АДРЕС ОСНОВНОГО ФОНА" cellpadding="11" cellspacing="0"><tr><td style="padding: 11px;"><center><img data-cke-saved-src="АДРЕС КАРТИНКИ" src="АДРЕС КАРТИНКИ" width="ШИРИНА" /><br /><img data-cke-saved-src="АДРЕС РАЗДЕЛИТЕЛЯ" src="АДРЕС РАЗДЕЛИТЕЛЯ" border="0" /><br /><center> <font size="5" color="#000000" face="Monotype Corsiva"> Здесь будет ваш текст<br /><img data-cke-saved-src="АДРЕС РАЗДЕЛИТЕЛЯ" src="АДРЕС РАЗДЕЛИТЕЛЯ" width="ШИРИНА" /><br /></font></center><div align="center"><a target="_blank" data-cke-saved-href="АДРЕС ДНЕВНИКА" href="АДРЕС ДНЕВНИКА"><font size="1" color="#000000" face="Monotype Corsiva">ВАШ НИК</font></a></div></center></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></div>

Вот пример рамочки, которая выполнена по предложенной формуле. Нижний разделитель в этой рамочке фактически сконструирован из трех.

Здесь будет ваш текст

<div align="center"><table border="0" background="https://img1.liveinternet.ru/images/attach/d/2/147/514/147514657_y1.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="//img0.liveinternet.ru/images/attach/d/2/147/859/147859930_c6.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="https://img1.liveinternet.ru/images/attach/d/2/147/514/147514657_y1.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="//img0.liveinternet.ru/images/attach/d/2/148/331/148331248_m10.jpg" cellpadding="45" cellspacing="0"><tr><td style="padding: 45px;"><table border="0" background="https://img1.liveinternet.ru/images/attach/d/2/147/514/147514657_y1.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="//img0.liveinternet.ru/images/attach/d/2/147/859/147859930_c6.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="https://img1.liveinternet.ru/images/attach/d/2/147/514/147514657_y1.jpg" cellpadding="4" cellspacing="0"><tr><td style="padding: 4px;"><table border="0" background="//img0.liveinternet.ru/images/attach/c/10/112/262/112262962_p2.png" cellpadding="0" cellspacing="0"><tr><td style="padding: 0px;"><center><img data-cke-saved-src="//img0.liveinternet.ru/images/attach/d/2/148/331/148331112_m9.gif" src="//img0.liveinternet.ru/images/attach/d/2/148/331/148331112_m9.gif" width="550" /><br /><img data-cke-saved-src="https://img1.liveinternet.ru/images/attach/d/2/148/156/148156999_m4.gif" src="https://img1.liveinternet.ru/images/attach/d/2/148/156/148156999_m4.gif" width="300" /><br /><br /><center><font size="5" color="#ffee9f" face="Monotype Corsiva"> Здесь будет ваш текст<br /><br /><img data-cke-saved-src="//img1.liveinternet.ru/images/attach/d/2/148/331/148331929_m11.png" src="//img1.liveinternet.ru/images/attach/d/2/148/331/148331929_m11.png" width="200" /><img data-cke-saved-src="//img0.liveinternet.ru/images/attach/d/2/148/331/148331616_m10.png" src="//img0.liveinternet.ru/images/attach/d/2/148/331/148331616_m10.png" width="100" /><img data-cke-saved-src="//img0.liveinternet.ru/images/attach/d/2/148/331/148331948_m11.png" src="//img0.liveinternet.ru/images/attach/d/2/148/331/148331948_m11.png" width="200" /><br /></font></center><div align="center"><a target="_blank" data-cke-saved-href="http://www.liveinternet.ru/users/tomishka/" href="http://www.liveinternet.ru/users/tomishka/"><font size="1" color="#ffee9f" face="Monotype Corsiva">*</font></a></div></center></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table></div>

Теперь перейдем к рассмотрению однослойных рамочек.
Из кода восьмислойной рамочки получим код однослойной, убрав всё лишнее. Для этого оставляем первый тег, а всё, следующее дальше, до начала тега, задающего основной фон, выделяем и удаляем. Я последнее время не забочусь об удалении закрывающих тегов, убедившись в том, что они будут удалены автоматически, как лишние. Код однослойной рамочки готов.

Картинка для рамочки найдена, но как сделать, чтобы рамочка понравилась и вам, и другим?
1.Желательно удачно подобрать фон, на котором собираетесь разместить картинку.
2.Если имеется подходящий разделитель, то он тоже может освежить рамочку ( пример 1 ).
3.В качестве разделителя можно использовать клипарт ( пример 2 ).
4.В некоторых случаях вокруг картинки можно сделать симпатичную обводку ( пример 3 ).
В зависимости от стиля обводки и ширины рамочка будет выглядеть по-разному.
Стиль задается одним из слов: double; inset; outset; dotted; dashed; solid;
Под каждой рамочкой есть код, по которому каждый из вас в своем дневнике (в черновике )
может посмотреть вид рамочки, если внести какие-то изменения, например, заменить стиль обводки.

Пример 1.

Здесь будет ваш текст

Пример 2.

Здесь будет ваш текст

Пример 3.

Здесь будет ваш текст

<div align="center"><table border="0" background="//img0.liveinternet.ru/images/attach/d/2/149/184/149184586_d2.jpg" cellpadding="0" cellspacing="0"><tr><td style="padding: 0px;"><center><p><img data-cke-saved-src="//img1.liveinternet.ru/images/attach/d/3/159/407/159407623_dmr.jpg" src="//img1.liveinternet.ru/images/attach/d/3/159/407/159407623_dmr.jpg" width="700" height="525" align="absmiddle" style="border: 8px double #9fc7e4" /></p><br /><img data-cke-saved-src="//img1.liveinternet.ru/images/attach/d/3/157/293/157293251_a3.png" src="//img1.liveinternet.ru/images/attach/d/3/157/293/157293251_a3.png" border="0" /><br /><center><font size="5" color="#6d86ca" face="Monotype Corsiva"> Здесь будет ваш текст<br /><br /><img data-cke-saved-src="https://img0.liveinternet.ru/images/attach/d/2/149/7/149007202_y6.gif" src="https://img0.liveinternet.ru/images/attach/d/2/149/7/149007202_y6.gif" width="250" /><br /></font></center><div align="center"><a target="_blank" data-cke-saved-href="http://www.liveinternet.ru/users/tomishka/" href="http://www.liveinternet.ru/users/tomishka/"><font size="1" color="#9fc7e4" face="Monotype Corsiva">*</font></a></div></center></td></tr></table></div>

Перейдем к рассмотрению двухслойных рамочек.

Простейший вариант - это однослойная рамочка с внешней окантовкой ( пример 4 )
А вот другой пример. Делая рамочку с зимней тематикой, вам захотелось фон сделать со снегом ( с анимацией или без нее ), но найти подходящий фон не удается. Можно ли совместить подходящий однотонный фон со снежным формата png? Да, можно! Достаточно один слой наложить на другой. Рамочка на первый взгляд однослойная, но на самом деле в ней два слоя. ( пример 5 )
Пример 4.

Здесь будет ваш текст

<div align="center"><table border="0" background="https://img1.liveinternet.ru/images/attach/d/3/157/909/157909953_t1.gif" cellpadding="6" cellspacing="0"><tr><td style="padding: 6px;"><table border="0" background="//img1.liveinternet.ru/images/attach/d/3/159/408/159408509_fdv.jpg" cellpadding="0" cellspacing="0"><tr><td style="padding: 0px;"><img data-cke-saved-src="//img0.liveinternet.ru/images/attach/d/3/159/408/159408534_9vd.jpg" src="//img0.liveinternet.ru/images/attach/d/3/159/408/159408534_9vd.jpg" width="700" height="433" alt="9vd (700x433, 142Kb)" /><center><br /><img data-cke-saved-src="//img0.liveinternet.ru/images/attach/d/3/159/408/159408670_rl.png" src="//img0.liveinternet.ru/images/attach/d/3/159/408/159408670_rl.png" width="500" /><br /><font size="5" color="#ffdede" face="Franklin Gothic Medium">Здесь будет ваш текст<br /><br /><img data-cke-saved-src="https://img0.liveinternet.ru/images/attach/d/2/147/92/147092386_f4.png" src="https://img0.liveinternet.ru/images/attach/d/2/147/92/147092386_f4.png" width="170" /><br /><br /><br /></font></center></td></tr></table></td></tr></table></div>

Пример 5.

Здесь будет ваш текст

На сегодня всё! Удачи всем и здоровья!

Рубрики:

МОЙ КОМПЬЮТЕР/ноутбук

<a href="https://www.liveinternet.ru/users/albens/post498150990/">РџРѕСЃС‚ РґР»СЏ Р¶РµР»Р°СЋС‰РёС… РЅР°СѓС‡РёС‚СЊСЃСЏ РґРµР»Р°С‚СЊ СЃРІРѕРё СЂР°РјРѕС‡РєРё.</a><br/>
	&nbsp;

Р’ РѕРєРѕС€РєРµ РїСЂРёРІРµРґРµРЅ РєРѕРґ РІРѕСЃСЊРјРёСЃР»РѕР№РЅРѕР№ СЂР°РјРѕС‡РєРё, РїРѕ РєРѕС‚РѕСЂРѕРјСѓ РјРѕР¶РЅРѕ СЃРґРµР»Р°С‚СЊ СЂР°РјРѕС‡РєСѓ СЃ Р»СЋР±С‹Рј РєРѕР»РёС‡РµСЃС‚РІРѕРј СЃР»РѕРµРІ. РЇ СЂР°СЃСЃРєР°Р¶Сѓ РѕР± РѕРґРЅРѕСЃР»РѕР№РЅРѕР№ Рё РґРІСѓС…СЃР»РѕР№РЅРѕР№. РџРѕ СЃРІРѕРµР№ СЃСѓС‚Рё РІСЃРµ СЃР»РѕРё РѕРґРёРЅР°РєРѕРІС‹Рµ, РёС… СЂР°Р·Р»РёС‡РёРµ СЃРѕСЃС‚РѕРёС‚ С‚РѕР»СЊРєРѕ РІ С‚РѕРј, С‡С‚Рѕ РѕРЅРё РїРѕ-СЂР°Р·РЅРѕРјСѓ РЅР°Р·РІР°РЅС‹ Рё РёРјРµСЋС‚ СЂР°Р·РЅСѓСЋ С€РёСЂРёРЅСѓ. РљРѕРґ РІ РѕРєРЅРµ РѕС‚ Р›Р°СЂРёСЃС‹ Р“СѓСЂСЊСЏРЅРѕРІРѕР№, СЏ СѓРґР°Р»РёР»Р° РёР· РЅРµРіРѕ СЃСЃС‹Р»РєРё РЅР° СЂР°РґРёРєР°Р» Рё РІС‚РѕСЂРѕР№ СЂР°Р·РґРµР»РёС‚РµР»СЊ РїРѕСЃС‡РёС‚Р°Р»Р° РєР°СЂС‚РёРЅРєРѕР№, Р·Р°РјРµРЅРёРІ СѓРєР°Р·Р°РЅРЅРѕРµ РІ РїРµСЂРІРѕРј СЂР°Р·РґРµР»РёС‚РµР»Рµ СЃРІРѕР№СЃС‚РІРѕ РґСЂСѓРіРёРј.
					
					
						
						&lt;div align=&quot;center&quot;&gt;&lt;table border=&quot;0&quot; background=&quot;РђР”Р Р•РЎ Р¤РћРќРђ ... <a href="https://www.liveinternet.ru/users/albens/post498150990/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

LiveInternetLiveInternet

-Рубрики

-Музыка

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

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

-Статистика

Пост для желающих научиться делать свои рамочки.