-Метки

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

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

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

 -Я - фотограф

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

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

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

 -Статистика

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


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

Воскресенье, 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 высота. Рекомендую сохранять эти параметры как в оригинале если не хотите, чтобы ваша картинка расползлась, вытяналась или ужалась, а также расплылась.

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 - Теги танцующие
...
Часть 31 - Тень у рамки
Часть 32 - Читать закрытые записи
Часть 33 - Уроки и советы по компьютеру и интернету 1(серия сообщений в 250 частей)

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

Процитировано 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 в ссылку
 Подписаться на комментарии
 Подписать картинку