Простые рамочки для текста. Ещё один урок от tomishka.

Воскресенье, 28 Марта 2021 г. 21:26 + в цитатник

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

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

Приведу скелетик еще одной простой рамочки для текста и дам некоторые пояснения.

1.ШИРИНА БОРДЮРА задается в px, чем меньше значение, тем уже будет бордюр ( при нулевом значении бордюра не будет ).
2.КОД ЦВЕТА БОРДЮРА задается шестнадцатеричным числом, а перед ним ставится символ решетки #, например: #fafec8.
3.Аналогично задается КОД ЦВЕТА ФОНА РАМКИ. Если код цвета где-то будет отсутствовать, то по умолчанию он будет черным.
4.ШИРИНУ и ВЫСОТУ РАМКИ можно взять произвольно, например, 700*200. Если потом в этой рамке поместить картинку размером 700*500, то высота рамки увеличится, и мы увидим картинку, по краям которой везде будет одинаковый отступ от бордюра. А вот если картинка по ширине будет меньшего размера, то отступы от бордюра слева и справа станут больше чем верхний отступ, при условии, что картинка должна располагаться по центру. Картинку можно сместить влево или вправо, заменив center соответственно на left или right.

ТЕКСТ, КАРТИНКА

Разместим картинку с размером 700*557 в центре рамочки размером 700*300 и посмотрим, как это будет выглядеть.

Теперь возьмем картинку размером 500*500 и поместим в рамку прежнего размера. Вид стал другим.

А вот таким будет вид, если исходный размер возьмем 700*700 для той же картинки.

Если после того, как сделали такую рамочку, начнете писать текст, то перед текстом надо будет поставить переход на новую строку. Удачи всем, решившим сделать рамочку по приведенному скелетику.

Рубрики:

ШАБЛОНЫ РАМОК

Метки: шаблоны рамок
Понравилось: 2 пользователям

<a href="https://www.liveinternet.ru/users/e_ledi/post482537981/">РџСЂРѕСЃС‚С‹Рµ СЂР°РјРѕС‡РєРё РґР»СЏ С‚РµРєСЃС‚Р°. Р•С‰С‘ РѕРґРёРЅ СѓСЂРѕРє РѕС‚  tomishka.</a><br/>
РџСЂРёРІРµРґСѓ СЃРєРµР»РµС‚РёРє РµС‰Рµ РѕРґРЅРѕР№ РїСЂРѕСЃС‚РѕР№ СЂР°РјРѕС‡РєРё РґР»СЏ С‚РµРєСЃС‚Р° Рё РґР°Рј РЅРµРєРѕС‚РѕСЂС‹Рµ РїРѕСЏСЃРЅРµРЅРёСЏ.
 РўР•РљРЎРў, РљРђР РўРРќРљРђ 
1.РЁРР РРќРђ Р‘РћР Р”Р®Р Рђ Р·Р°РґР°РµС‚СЃСЏ РІ px, С‡РµРј РјРµРЅСЊС€Рµ Р·РЅР°С‡РµРЅРёРµ, С‚РµРј СѓР¶Рµ Р±СѓРґРµС‚ Р±РѕСЂРґСЋСЂ ( РїСЂРё РЅСѓР»РµРІРѕРј Р·РЅР°С‡РµРЅРёРё Р±РѕСЂРґСЋСЂР° РЅРµ Р±СѓРґРµС‚ ).
2.РљРћР” Р¦Р’Р•РўРђ Р‘РћР Р”Р®Р Рђ Р·Р°РґР°РµС‚СЃСЏ С€РµСЃС‚РЅР°РґС†Р°С‚РµСЂРёС‡РЅС‹Рј С‡РёСЃР»РѕРј, Р° РїРµСЂРµРґ РЅРёРј СЃС‚Р°РІРёС‚СЃСЏ СЃРёРјРІРѕР» СЂРµС€РµС‚РєРё #, РЅР°РїСЂРёРјРµСЂ: #fafec8.
3.РђРЅР°Р»РѕРіРёС‡РЅРѕ Р·Р°РґР°РµС‚СЃСЏ РљРћР” Р¦Р’Р•РўРђ Р¤РћРќРђ Р РђРњРљР. Р•СЃР»Рё РєРѕРґ С†РІРµС‚Р° РіРґРµ-С‚Рѕ Р±СѓРґРµС‚ РѕС‚СЃСѓС‚СЃС‚РІРѕРІР°С‚СЊ, С‚Рѕ РїРѕ СѓРјРѕР»С‡Р°РЅРёСЋ РѕРЅ Р±СѓРґРµС‚ С‡РµСЂРЅС‹Рј.
4.РЁРР РРќРЈ Рё Р’Р«РЎРћРўРЈ Р РђРњРљР РјРѕР¶РЅРѕ РІР·СЏС‚СЊ РїСЂРѕРёР·РІРѕР»СЊРЅРѕ, РЅР°РїСЂРёРјРµСЂ, 700*200. Р•СЃР»Рё РїРѕС‚РѕРј РІ СЌС‚РѕР№ СЂР°РјРєРµ РїРѕРјРµСЃС‚РёС‚СЊ РєР°СЂС‚РёРЅРєСѓ СЂР°Р·РјРµСЂРѕРј 700*500, С‚Рѕ РІС‹СЃРѕС‚Р° СЂР°РјРєРё... <a href="https://www.liveinternet.ru/users/e_ledi/post482537981/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

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

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

LiveInternetLiveInternet

-Метки

-Рубрики

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

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

-Друзья

-Статистика

Простые рамочки для текста. Ещё один урок от tomishka.