-Метки

18+ bazzlan covid more аббревиатура аббревиатуры адрес анекдот анекдоты бдсм болезни боль буква буквы весна вилки витамин вопрос гиф голод гороскоп грамота граффити грудь далее далматин далматинец двустишия девочка девушка длина еда желание желания женское женщина забор здоровье зима зимнее знак знаки игра игры имена имя иней иностранец интерьер история казань карта картинка картинки карты книга книги кнопка кнопки кнопочка кнопочки ковид компьютер консультации кот котэ крэйг кукурузные курсор курсоры леди ложкин ломка любовь магия мебель милиционер мой сон мостмилениум мостмиллениум моча мужчина музыка наказание ночь осень отдых оформление писуары под кат подборка поза позитив позитиф позитифф позиции позиция поиск полицейские полицейский полупирожки поляков порка пошлость правопорядок праздник прикол природа продолжение психология птица птицы радость рамка рамки рамочка рамочки растение реклама русский русский язык секс сердечки сердечко сердце символ символы смайл смешно сны совместимости сон соционика социотип социотипы спорт стих стихи страх стройность танец танцы теги текст тема территория тест тесты тим ужас унитаз унитазы упражнение фигура физкульт физкультподготовка физкультура фильм флеш флешка флешки фон фоны фоны для днева фото фотографии цветок ширина шоколад шрифт шрифты щавед экстрасенс эмоции эмоция эротика эштон_крэйг юмор языг язык

 -Помощь новичкам

Всего опекалось новичков: 0
Проверено анкет за неделю: 0
За неделю набрано баллов: 0 (57753 место)
За все время набрано баллов: 777 (615 место)

 -Я - фотограф

Просто понравившиеся картинки )))

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

Поиск сообщений в ka82

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 29.01.2008
Записей: 1228
Комментариев: 17407
Написано: 105195


Фоны к сообщениям

Воскресенье, 02 Ноября 2008 г. 16:03 + в цитатник

Сейчас вы смотрите пост http://www.liveinternet.ru/users/ka82/post88771163/
Другие посты:
Шпаргалка html (очень много тегов) и генератор разноцветных букв http://www.liveinternet.ru/users/ka82/post70054149/
Теги волнистого разноцветного подчеркивания, дрожания текста, текст написанный боком, линии, простые варианты фонового рисунка справа, слева, вокруг текста, колыхающиеся слова, выравнивание параграфов, текст между картинками и т.д. http://www.liveinternet.ru/users/ka82/post90899043/
Простые теги типа жирного шрифта, выравнивания слов, типа шрифта, курсива, обычного подчеркивания-зачеркивания, разноцветный текст, ползущие вправо-влево буквы, размер шрифта, таблицы цветов для шрифта http://www.liveinternet.ru/users/ka82/post322462090/
Танцующие буквы http://www.liveinternet.ru/users/ka82/post91709665/
Готовые схемы оформления, необычное преподнесение текста и картинок, рамочек, затуманенные буквы, инструкции даны скриншотами, а не просто текстом http://www.liveinternet.ru/users/ka82/post85922639/
Как вставить картинку: http://www.liveinternet.ru/users/ka82/post109072479
Как вставить баннер, видео, музыку, часы и т.д. http://www.liveinternet.ru/users/ka82/post89422126/

Еще раз напоминаю, что если Вы хотите сделать фон к вашему сообщению, отличный от фона днева, то следует сделать следующее:
1.
Вариант с картинкой-фоном



ВАЖНО! Поскольку фон-картинка бывает темная или светлая, а настройки дизайна предполагают светлые или темные буквы, чтобы при цитировании в другом дневнике не получилось "белое на белом" или "черное на черном", рекомендуется ВАШ ТЕКСТ заключать в тег с указанием цвета букв, например:
<font color="#000000">ВАШ ТЕКСТ<font> - буквы будут черные всегда
<font color="#ffffff">ВАШ ТЕКСТ<font> буквы будут белые всегда
(ну или какой цвет вы укажете по таблице - голубой, желтый и любой другой)

2
Вариант с цветом-фоном (например такой серый будет код #eeeeee)



3 Особенность такого оформления - фон выходит только сверху на буквах, а НЕ растягивается на всю ширину текста. Сравните с предыдушим случаем.


4 Похожий случай - но уже с картинкой. Обратите внимание как вставляется картинка и как заканчивается строка по сравнению с примерами ранее


5
Для фонового цвета используем код
Как видите, в отличие от верхнего примера,
он располагается на ВСЮ ширину поста,
а не только до окончания ширины текста,
и не имеет полей справа-слева
(если специально не прописать)



6
Для фоновой картинки, которая также не имеет полей справа-слева, используем код ниже. Обратите внимание, что поля прописать можно, и даже очень большие, для этого нужно вставить специальные значения padding (см. ниже)



7
Обратите внимание, что поля прописать можно, и даже очень большие, для этого нужно вставить специальные значения. Пример: padding:10px 3px 0px 50px;
Первое число - отступ сверху, второе число - отсутуп справа, третье число - отступ снизу (здесь мы поставили ноль для примера) и четвертое число - отступ слева (как видите, он здесь самый большой)



8.
Текст с цветной основой под фон, возможной рамкой border, цветом букв и т.д.:

Сначала все поле тега заливается цветом, например, #000 - черным. Вместо этого числа можно подставить любой другой цвет из таблицы цветов (например получится background-color:#fff где #fff белый цвет как у меня сейчас в виде рамочки). На самом деле фоновым я сделала зеленый, но его видно будет только в 2 случаях: либо если не загрузится фоновая картинка, либо если фоновые гифки будут с прозрачной частью.
border: 0px ширина рамки. Если бы я захотела вообще без рамки, то поставила бы 0 (ноль). В данном случае это 30 (тридцать). У прозрачных фоновых гиф-картинок прозрачный фон сменится на цвет, который вы залили в основу.
padding:0px 60px; означает что текст начинается отступив от краев картинки: первое число-сверху второе число-сбоку.
Минус такой формы тега: картинка множится и на экран выходит не одна, а подряд много-много (как в данном случае). Одновременно такая форма тега (как и для случая 2.2) очень удобна, если вы хотите сделать из одного цветочка весь экран в цветочек.
Есть другая форма тега - не через div (где поля надо указывать дополнительно), а через table (там небольшие отступы полей уже по умолчанию, сравните с примерами 1-2:



9 А такая рамочка накладывается как увеличенный аналог фона и хороша под картинку, например:
5123775_Fungif_24 (320x240, 4299Kb)

Место куда вставлять адрес фона при желании оставлено ниже в коде background-image: url('АДРЕС ФОНА')


10 Для подписания картинки, которая выходит на экран ОДИН РАЗ. WIDTH: ширина картинки например 700px; HEIGHT: высота картинки например 150px. Рассмотрим более подробно тот же принцип с нижеследующей картинкой:

Сюда можно
написать
что-то умное
Ka82


Вот, ниже код этой "говорящей" гифки:


А вот код в который можно вставить не обязательно эту гифку, но и указать свои параметры, ширину:

valign="bottom" означает, что текст подписывается внизу. При желании подписать сверху пишите valign="top"
Тут можно регулировать без проблем высоту и ширину картинки, Courier new" - это пример шрифта, выбираемый вами для текста. Здесь и вообще WIDTH - ширина, HEIGHT высота. Рекомендую сохранять эти параметры как в оригинале если не хотите, чтобы ваша картинка расползлась, вытяналась или ужалась, а также расплылась.

12. Расположение объекта на картинке (музыкального плеера, картинки, и т.д.)
valign="top" или "bottom" (положение по вертикали), "center" можно, но точное положение не фиксируется
align="left" "center" или "right" (по горизонтали)
padding:0px ОТСТУП ПИКСЕЛЕЙ ОТ КРАЯ при желании
Пример ниже: положение сверху слева valign="top" align="left"




12. В некоторых браузерах это отображается по-разному, но есть фильтры затуманивания, указание ширины и высоты не в пикселях а процентре занимаемого места от экрана. У меня, например, Опера и Эксплоэр видят это несколько по-разному


По фильтрам рекомендую посмотреть отдельный пост. Ссылка на него у меня в шпаргалке наверху страницы.
table width="75% в данном теге - часть занимаемого экрана картинкой в ширину. Просто если картинка узкая и занимает в ширину только 45% экрана, а вы поставите значение 99%, то картинка размножится по ширине пространства в ширину.
width:45% в данном случае - ширина занимаемого текста опираясь на размеры картинки. То есть если ваша картинка в ширину занимает 80%, а для текста вы установите 50%, то от общего экрана он займет лишь 80х0,5=40%.
Напоминаю, что возможности со шрифтом описаны отдельно, например, в посте http://www.liveinternet.ru/users/ka82/post85922639/

Серия сообщений "Коды (теги)":
Оформление. В помощь: Цветовая палитра и Просмотр html
Часть 1 - Оформление днева (разные сайты и генераторы)
Часть 2 - Дизайн сообщений днева с принтскрином
Часть 3 - Алфавиты (+ генераторы в комментах)
Часть 4 - Фоны к сообщениям
Часть 5 - Возможности с текстом: новое! (для браузеров типа Explorer)
Часть 6 - Теги танцующие
...
Часть 34 - Вставить музыкальный плеер
Часть 35 - Плееры часть 2 (из блогов друзей)
Часть 36 - Сделать гиф

Рубрики:  Спецэффекты и шоу
Метки:  

Процитировано 64 раз
Понравилось: 35 пользователям

Milana_21   обратиться по имени Среда, 04 Февраля 2009 г. 14:29 (ссылка)
[QUOTE]Исходное сообщение ka82
QUOTE]
ka82, спасибо! Так много всего интересного и полезного! Супер!!!
У меня вопрос: если пишешь код к сообщению или экспериментируешь , то где лучше просматривать то, что получилось, саму картинку?
В черновике дневника ( а если дневника нет)? Или есть ещё варианты?
 (230x310, 30Kb)
Ответить С цитатой В цитатник
RenSol   обратиться по имени Пятница, 20 Февраля 2009 г. 19:35 (ссылка)
Ответить С цитатой В цитатник
Michel_perm   обратиться по имени Среда, 02 Июня 2010 г. 10:02 (ссылка)
Фоновая кухня.
Ответить С цитатой В цитатник
SlavnayaAli   обратиться по имени Пятница, 07 Сентября 2012 г. 08:27 (ссылка)
Спасибо за пост))))
Ответить С цитатой В цитатник
RiaArei   обратиться по имени Понедельник, 20 Мая 2013 г. 19:05 (ссылка)
Спасибо большое за ваш труд...как же это сложно....
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 20 Мая 2013 г. 19:06ссылка
да нет, нормально, если что спрашивай
RiaArei   обратиться по имени Понедельник, 20 Мая 2013 г. 19:08 (ссылка)
я попозжее спрошу, когда освобожусь. Очень рада, что сюда попала!
Ответить С цитатой В цитатник
теролька   обратиться по имени Пятница, 24 Мая 2013 г. 11:10 (ссылка)
Отлично!Здесь , похоже , можно застрять надолго. А я ведь зашла только глянуть! Спасибо тебе большое!
Ответить С цитатой В цитатник
Tapioka   обратиться по имени Воскресенье, 04 Августа 2013 г. 13:29 (ссылка)
ka82, благодарю!!
Ответить С цитатой В цитатник
Ольга_Фадейкина   обратиться по имени Вторник, 28 Января 2014 г. 03:51 (ссылка)
С БЛАГОДАРНОСТЬЮ ....ВЫ -УМНИЧКА...
Ответить С цитатой В цитатник
Madam_Halina   обратиться по имени Четверг, 30 Января 2014 г. 21:30 (ссылка)
Необъятные просторы ! Спасибо за просветительство !
Ответить С цитатой В цитатник
ЛОИНА   обратиться по имени Четверг, 30 Января 2014 г. 21:40 (ссылка)
Вы такая умная.....!!!!!!! У вас прямо научные труды....Потрясающе!!!!! Рада знакомству с вами. Спасибо!
Ответить С цитатой В цитатник
Вдовина_Инна   обратиться по имени Четверг, 30 Января 2014 г. 21:56 (ссылка)
Здорово! Спасибо!
Ответить С цитатой В цитатник
Biryusinka   обратиться по имени Воскресенье, 02 Февраля 2014 г. 20:29 (ссылка)
Благодарю.
Удачи!
Ответить С цитатой В цитатник
Alica_in   обратиться по имени Понедельник, 10 Февраля 2014 г. 14:00 (ссылка)
Спасибо!!! Так много всего!!!! Придётся ещё не раз зайти))))
Ответить С цитатой В цитатник
NATALI_SOLER   обратиться по имени Суббота, 21 Июня 2014 г. 22:50 (ссылка)
Спасибо за интересное и познавательное!!!
Ответить С цитатой В цитатник
ledi-mada   обратиться по имени Воскресенье, 08 Февраля 2015 г. 01:00 (ссылка)
Здорово, класс, Вы просто молодец. меня все впечатлило, поэтому беру себе, буду обязательно пользоваться
Ответить С цитатой В цитатник
Дневник_Девы   обратиться по имени Вторник, 31 Марта 2015 г. 14:20 (ссылка)
Супер-подсказка!
Ответить С цитатой В цитатник
Nina_Gracia   обратиться по имени Понедельник, 16 Мая 2016 г. 21:37 (ссылка)
ka82,
Увлеклась, до того интересный дневник и полезный к работе и в то же время интересно развлeкательный.
Spasibo.
Ответить С цитатой В цитатник
Люмила-Зимушка   обратиться по имени Понедельник, 04 Февраля 2019 г. 18:23 (ссылка)
Катюша, спасибо за классные уроки и
шпоры...
Ответить С цитатой В цитатник
Сундучок-Людмила   обратиться по имени Четверг, 30 Мая 2019 г. 12:43 (ссылка)
Спасибо, Катюша...приятного дня, здоровья, удачи...
Ответить С цитатой В цитатник
ЛюдмилаЧ-немецкий   обратиться по имени Понедельник, 29 Июля 2019 г. 17:31 (ссылка)
...Катенька, ну и от меня СПАСИБО за твой ТРУД...чмоки...всё КЛАССНО!!:angel:
Ответить С цитатой В цитатник
Expositor   обратиться по имени Среда, 13 Мая 2020 г. 13:32 (ссылка)
Спасибо! случайно обнаружил, много своих вопросов разом закрыл
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку