Как сделать бегущий текст на картинке, без всякого редактора

Четверг, 13 Ноября 2014 г. 22:24 + в цитатник

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

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

В этом уроке я покажу как сделать бегущий текст на картинке, не прибегая ни к каким редакторам! Выглядит это вот так.

Падают с ветки

Жёлтые монетки…

Под ногами целый клад!

Это осень золотая

Дарит листья

Не считая...

Золотые дарит листья

дарит листья Вам, и нам,

И всем подряд.

Сделать это не сложно, надо просто взять вот такую формулу. (Потяните за правый нижний уголочек, и формула вам откроется полностью.

<table height="ВЫСОТА КАРТИНКИ" cellpadding="10" width="ШИРИНА КАРТИНКИ" align="center" background="АДРЕС КАРТИНКИ" border="0" table="0"> <tbody><tr><td><marquee scrollamount="2" direction="up" height="ВЫСОТА ДВИЖЕНИЯ ТЕКСТА"> <center> 1-я строчка 2-я строчка 3-я строчка 4-я строчка 5-я строчка 6-я строчка 7-я строчка 8-я строчка 9-я строчка </center></marquee></td></tr></tbody></table>

Картинка здесь выступает ВМЕСТО ФОНА, поэтому на нее можно ставить все, что хотите, главное правильно поставить РАЗМЕР КАРТИНКИ.
Рассмотрим эту формулу более подробно. Выглядит она вот так.

Теперь начинаем подставлять в нее свои значения.
Вместо слов АДРЕС КАРТИНКИ, поставляем адрес своей картинки (если с картинка с радикала, то код N1, если с ЯНДЕКС фото, то берете адрес там, а если картинка из интернета, то просто встаете мышкой на картинку, нажимаете правую кнопку мыши и выбираете КОПИРОВАТЬ АДРЕС КАРТИНКИ)

Вместо слов ВЫСОТА КАРТИНКИ, ШИРИНА КАРТИНКИ, подставляете размеры своей картинки в пикселях. (Размер картинки всегда можно взять в ее свойствах. Встаете на картинку мышкой, жмете правую кнопку, и выбираете ИНФОРМАЦИЯ ОБ ИЗОБРАЖЕНИИ)

Вместо слов ВЫСОТА ДВИЖЕНИЯ ТЕКСТА, ставите ВЫСОТУ КАРТИНКИ, или тот размер, на который вы хотите видеть бегущий текст.

Ну а вместо строчек вставляете свой текст. Лишние строчки можно просто стереть, или наоборот добавить новые, если требуется.

Теперь код нашей картинки выглядит вот так

Где
height="530" - высота картинки НУЖНО МЕНЯТЬ НА СВОЮ.
width="500" - ширина картинки, НУЖНО МЕНЯТЬ НА СВОЮ.
marquee scrollamount="2" - Скорость прокрутки текста (МОЖНО МЕНЯТЬ)
height="500" - Высота движения текста. (можно по высоте картинки, можно меньше)
[br /] расстояние между строчками текста. Чем БОЛЬШЕ вы поставите [br /], между строчками, тем большее расстояние будет между ними, то есть строчки будут опускаться вниз. Обычно ставится одна или две.
Текст редактируется как обычно. Перед первой строчкой текста ставите цвет, размер и расположение текста.

Если убавить ВЫСОТУ ДВИЖЕНИЯ ТЕКСТА, то текст будет двигаться только по этой высоте (то есть не во всю картинку). И выглядеть это будет ВОТ ТАК.

Вода в стремительном потоке,

Мой завораживает взгляд.

Реки, живительные соки,

Бросает в бездну водопад.

Текст можно писать любой длины, то есть количество строчек можно добавлять, или наоборот убирать. Это зависит от того, что вы хотите написать на своей картинке.

Ох, понедельник…вот взял и пришёл,

Можно подумать его кто-то звал!

Кучу проблем за собою привёл,

Всех загрузил и работой достал!

ДОБРОЙ РАБОЧЕЙ НЕДЕЛИ ВСЕМ!

К тексту можно добавить небольшие картинки, если вы хотите как то его украсить, например создавая красивое приветствие или поздравление. Код картинки ставьте прямо перед текстом (тогда она будет вначале текста). Или в конце текста (картинка будет сразу за текстом) Выглядеть это будет ВОТ ТАК.

Приятного осеннего дня

Для новичков, кому трудно составить такой код, я его пропишу вот в этом окошечке.

<table height="ВЫСОТА КАРТИКИ" cellpadding="10" width="ШИРИНА КАРТИНКИ" align="center" background="АДРЕС КАРТИНКИ" border="0" table="0"> <tbody><tr><td><marquee scrollamount="2" direction="up" height="ВЫСОТА КАРТИНКИ"> <center> HTML КОД КАРТИНКИ. ВАШ ТЕКСТ. HTML КОД КАРТИНКИ </center></marquee></td></tr></tbody></table>

Если вы хотите вставить только картинки (Т.е. просто картинки, или красивый текст, в виде картинки), то просто вместо строчек текста, ставьте HTML коды картинок. Выглядит это вот так.

Красивой вам ОСЕНИ

Выглядит в кодах это вот так

Где красным выделен код первой картинки (вместо первой строчки)
Голубым - код второй картинки (вместо второй строчки)
Зеленым - код третьей картинки и +текст (вместо третьей строчки)

Вот и все. Успехов в вашем творчестве!

Серия сообщений "Уроки для блогов":

Часть 1 - Как скопировать текст с сайта, который защищен от копирования.
Часть 2 - Как взять картинку с альбомов Яндекс -фото
...
Часть 24 - Как быстро вставить в пост на ЛиРу картинку из Интернета
Часть 25 - Рамка для блога, имитирующая картину.
Часть 26 - Как сделать бегущий текст на картинке, без всякого редактора

Рубрики:

Моё личное

Метки: Моё личное

<a href="https://www.liveinternet.ru/users/4181418/post343282559/">РљР°Рє СЃРґРµР»Р°С‚СЊ Р±РµРіСѓС‰РёР№ С‚РµРєСЃС‚ РЅР° РєР°СЂС‚РёРЅРєРµ, Р±РµР· РІСЃСЏРєРѕРіРѕ СЂРµРґР°РєС‚РѕСЂР°</a> 
Р’ СЌС‚РѕРј СѓСЂРѕРєРµ СЏ РїРѕРєР°Р¶Сѓ РєР°Рє СЃРґРµР»Р°С‚СЊ Р±РµРіСѓС‰РёР№ С‚РµРєСЃС‚ РЅР° РєР°СЂС‚РёРЅРєРµ, РЅРµ РїСЂРёР±РµРіР°СЏ РЅРё Рє РєР°РєРёРј СЂРµРґР°РєС‚РѕСЂР°Рј! Р’С‹РіР»СЏРґРёС‚ СЌС‚Рѕ РІРѕС‚ С‚Р°Рє.

РџР°РґР°СЋС‚ СЃ РІРµС‚РєРёР–С‘Р»С‚С‹Рµ РјРѕРЅРµС‚РєРёвЂ¦РџРѕРґ РЅРѕРіР°РјРё С†РµР»С‹Р№ РєР»Р°Рґ!РС‚Рѕ РѕСЃРµРЅСЊ Р·РѕР»РѕС‚Р°СЏР”Р°СЂРёС‚ Р»РёСЃС‚СЊСЏРќРµ СЃС‡РёС‚Р°СЏ...Р—РѕР»РѕС‚С‹Рµ РґР°СЂРёС‚ Р»РёСЃС‚СЊСЏ
РґР°СЂРёС‚ Р»РёСЃС‚СЊСЏ Р’Р°Рј, Рё РЅР°Рј,Р РІСЃРµРј РїРѕРґСЂСЏРґ.
 
РЎРґРµР»Р°С‚СЊ СЌС‚Рѕ РЅРµ СЃР»РѕР¶РЅРѕ, РЅР°РґРѕ РїСЂРѕСЃС‚Рѕ РІР·СЏС‚СЊ РІРѕС‚ С‚Р°РєСѓСЋ С„РѕСЂРјСѓР»Сѓ. (РџРѕС‚СЏРЅРёС‚Рµ Р·Р° РїСЂР°РІС‹Р№ РЅРёР¶РЅРёР№ СѓРіРѕР»РѕС‡РµРє, Рё С„РѕСЂРјСѓР»Р° РІР°Рј РѕС‚РєСЂРѕРµС‚СЃСЏ РїРѕР»РЅРѕСЃС‚СЊСЋ.

1-СЏ СЃС‚СЂРѕС‡РєР°2-СЏ СЃС‚СЂРѕС‡РєР° 3-СЏ СЃС‚СЂРѕС‡РєР°4-СЏ СЃС‚СЂРѕС‡РєР°5-СЏ СЃС‚СЂРѕС‡РєР°6-СЏ СЃС‚СЂРѕС‡РєР°7-СЏ СЃС‚СЂРѕС‡РєР°8-СЏ СЃС‚СЂРѕС‡РєР°9-СЏ СЃС‚СЂРѕС‡РєР°

РљР°СЂС‚РёРЅРєР° Р·РґРµСЃСЊ РІС‹СЃС‚СѓРїР°РµС‚ Р’РњР•РЎРўРћ Р¤РћРќРђ, РїРѕСЌС‚РѕРјСѓ РЅР° РЅРµРµ РјРѕР¶РЅРѕ СЃС‚Р°РІРёС‚СЊ РІСЃРµ, С‡... <a href="https://www.liveinternet.ru/users/4181418/post343282559/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

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

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

LiveInternetLiveInternet

-Рубрики

-Метки

-Цитатник

-Ссылки

-Фотоальбом

-Приложения

-Новости

-Видео

-Музыка

-Я - фотограф

-Всегда под рукой

-неизвестно

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

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

-Интересы

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

Как сделать бегущий текст на картинке, без всякого редактора