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

Понедельник, 05 Сентября 2022 г. 14:05 + в цитатник

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

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

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

Вариант с картинкой-фоном

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

2

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

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

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

5

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

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

Обратите внимание, что поля прописать можно, и даже очень большие, для этого нужно вставить специальные значения. Пример: 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 А такая рамочка накладывается как увеличенный аналог фона и хороша под картинку, например:

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

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

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

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

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

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

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

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

Серия сообщений "Кодировщик":
Шрифты, кнопки и прочее оформление

Часть 1 - Оформление днева (разные сайты и генераторы)
Часть 2 - Дизайн сообщений днева с принтскрином
Часть 3 - Алфавиты (+ генераторы в комментах)
Часть 4 - Фоны к сообщениям
Часть 5 - Возможности с текстом: новое! (для браузеров типа Explorer)
Часть 6 - Теги танцующие
...
Часть 30 - Фильтруем (убедитесь, что ваш браузер видит тени букв)
Часть 31 - Тень у рамки
Часть 32 - Читать закрытые записи

Серия сообщений "Формулы":
Часть 1 - Всё о картинке в тексте.
Часть 2 - Все о ссылках, оформление и коды.
...
Часть 26 - Простая формула для обрамления картинки для тех, кто не владеет фотошопом.
Часть 27 - Эпиграф+урок
Часть 28 - Фоны к сообщениям
Часть 29 - Меняем цвет под определённым участком текста
Часть 30 - Таблицы.
Часть 31 - Всё про картинки. Часть 4. Картинки в ряд и столбик.
Часть 32 - Всё про картинки. Часть 1. Закругляем углы.
Часть 33 - Окошко с кодом под флешкой.

Серия сообщений "Моя шпаргалка":
Оформление текста
Часть 1 - Теги..
Часть 2 - Окошки, пишем на картинке...
...
Часть 6 - Окошки, таблицы.
Часть 7 - Оформление текста.
Часть 8 - Фоны к сообщениям
Часть 9 - Текст в прокрутке.
Часть 10 - Как писать тексты на цветных фонах.
...
Часть 13 - Спецсимволы.
Часть 14 - Таблицы цветные.
Часть 15 - Виды формул фонов под тексты.