Серия сообщений "Кодировщик":Выбрана рубрика Кодировщик.Шрифты, кнопки и прочее оформлениеЧасть 1 - Оформление днева (разные сайты и генераторы)
Часть 2 - Дизайн сообщений днева с принтскрином
Часть 3 - Алфавиты (+ генераторы в комментах)
Часть 4 - Фоны к сообщениям
Часть 5 - Возможности с текстом: новое! (для браузеров типа Explorer)
Часть 6 - Теги танцующие
Часть 7 - Цветовая палитра
Часть 8 - Курсоры на выбор для браузеров типа Internet Explirer
Часть 9 - Пост - просто картинка!
Часть 10 - Фильтруем (подходит для браузера Internet Explorer)
Часть 11 - Как сделать открыточку с музыкой? Смотрим
Часть 12 - Для браузера типа Internet Explorer: Вот такой волшебный текст без цветного генератора!
Часть 13 - Оформляем полосу прокрутки
Часть 14 - Текст на фоне
Часть 15 - Полупрозрачные рамки
Часть 16 - Рамка с автооглавлением и главами
Часть 17 - Фоны под текст
Часть 18 - Знаки и символы
Часть 19 - Новостная бегущая строка для дневника, сайта
Часть 20 - Далее (текст под кат) Читать (смотреть) далее
Часть 21 - Редкие символы с тегом написания
Часть 22 - Шрифты (надеюсь ваш браузер отображает все перечисленные)
Часть 23 - Кнопочки делаем :)
Часть 24 - Таблицы делаем
Часть 25 - Буквы-хамелеоны MS Outlook и Wingdings
Часть 26 - Буквы webdings и marlett
Часть 27 - Буквица
Часть 28 - Ctrl как горячая клавиша
Часть 29 - Символы (просто скопируйте что надо)
Часть 30 - Фильтруем (убедитесь, что ваш браузер видит тени букв)
Часть 31 - Тень у рамки
Часть 32 - Читать закрытые записи
Оформление днева (разные сайты и генераторы) |
Дневник |
|
Метки: спецэффект |
Дизайн сообщений днева с принтскрином |
Дневник |
Ваш текст Ваш текст ттттттттттттт ттттттттттттттттттттттт тттттттттттттттттттттт |
Метки: оформление рамки теги пост рамочки рамка рамочка |
Алфавиты (+ генераторы в комментах) |
Метки: шрифты алфавит буква шрифт буквы азбука |
Фоны к сообщениям |
Дневник |
Метки: фоны оформление текст фон буква буквы фоны для днева |
Возможности с текстом: новое! (для браузеров типа Explorer) |
Дневник |
Метки: оформление текст рамки тексты шаблоны супер буква буквы шаблон |
Теги танцующие |
Дневник |
Метки: оформление текст танец буква теги буквы тег буквы танцующие буквы_танцующие |
Цветовая палитра |
Противоположные сочетания цветов для лучшей видимости фона и букв на нем
Более 440 цветов для Вашего текста
238, 213, 183
в скобки:
Цвет | RGB | Код цвета |
Snow | 255, 250, 250 | #FFFAFA |
Метки: оформление цвета цвет палитра цветов палитра цветной палитра_цветов |
Пост - просто картинка! |
Дневник |
style=1
style=2
ВАШ ТЕКСТ |
ВАШ ТЕКСТ СЛЕВА | ВАШ ТЕКСТ СПРАВА |
Метки: картинки оформление картинка фон фоны фоновый на фоне длина ширина |
Фильтруем (подходит для браузера Internet Explorer) |
Дневник |
Если нет - посмотрите другой вариант фильтров тут |
Сегодня я расскажу о фильтрах. Их можно писать в рамках тегов div или p. Эти фильтры используются вместе с набором аттрибутов размера текста, иначе их не видно. Вот обязательные аттрибуты, которые можно изменить при желании: div style="FILTER: НАЗВАНИЕ ФИЛЬТРА; width: ШИРИНА ТЕКСТА НАПР.700px; height: ВЫСОТА ТЕКСТА НАПР.25px; FONT-FAMILY: ШРИФТ НАПР.georgia;TEXT-ALIGN: ПОЛОЖЕНИЕ ТЕКСТА НАПР,ПО ЦЕНТРУ center; FONT-WEIGHT: normal; FONT-SIZE: РАЗМЕР ШРИФТА НАПР.25px;">Ваш Текст и КАРТИНКА-ОБРАЗЕЦ НАПР. . Далее я вам покажу только смену фильтра без других аттрибутов (шрифта, выравнивания и т.д.). Сначала идут легкие фильтры: 1. flipH Поворачивает объект горизонтально Ваш Текст |
Метки: оформление фильтры фильтр |
Как сделать открыточку с музыкой? Смотрим |
Метки: открытка открыточка музыка оформление |
Для браузера типа Internet Explorer: Вот такой волшебный текст без цветного генератора! |
Дневник |
В браузере Internet Explorer я вижу вот такую красоту букв на рисунке, что не передать словами. А дальше идут анекдоты про Леди, тоже в таком оформлении: А в Гугл-хроме и Опере я заглянула на свою страничку и обнаружила, что нифига у меня не получается той красоты текста, которую я создала, а получается какой-то странный набор букв! |
|
Оформляем полосу прокрутки |
Дневник |
scrollbar-darkshadow-color: #FF1493; scrollbar-shadow-color: #FF0099; scrollbar-arrow-color: #FF00FF; scrollbar-track-color: #FFFACD; TOP: 2px; HEIGHT: 150px; TEXT-ALIGN: justify">Привет! В этом примере я хочу рассказать как делать такую рамку. На картинке показано что каким цветом мы обозначаем. Все пишется через знак ; (точка с запятой и затем один пробел). background-image: url('АДРЕС ФОНОВОЙ КАРТИНКИ') либо background-color: #КОД ЦВЕТА - если вам нужен цвет фона. Если вам фон не нужен, т.е. не хотите эффект как в данной рамочке - можете вообще стереть от слова от слова background вплотную до слова LEFT (т.е. должно начинаться с div style="LEFT) OVERFLOW: auto означает что мы пользуемся рамкой с полосой прокрутки. WIDTH: 350px - это ширина рамки в пикселях HEIGHT: 270px - это - высота рамки в пикселях TEXT-ALIGN: - это выравнивание текста (justify по ширине окна, center - по центру, left - по левому краю, right - по правому краю). Если какой-то элемент не прописан, то система по умолчанию присваивает ему свойства как у всего экрана. Итак, вот код этой рамочки: |
scrollbar-darkshadow-color: #000000; scrollbar-shadow-color: #E0FFFF; scrollbar-arrow-color: #FFA500; scrollbar-track-color: #CAFF70; TOP: 2px; HEIGHT: 300px; TEXT-ALIGN: justify">Вот в данной ячейке фона background-image нет, посмотрите Информация о генераторе прокрутки сперта с этого сайта и адаптирована под наши дневы Хотя если ваш фон сообщений дневничка позволяет видеть буквы и вас это устраивает, то почему бы и нет? Я, например, балдею от красного цвета и предпочитаю этот цвет, смотрите по удобствам ))) |
Метки: оформление рамка прокрутка полоса_прокрутки |
Полупрозрачные рамки |
Дневник |
Собрала тут заготовки для тем дизайнов. Прелесть их в том, что они полупрозрачные. Почему-то в фотошопе не научилась я сохранятьь картинки именно такими... Приxодится поэтому иметь на всякий случай следующее. В основу заливаете какую-нибудь яркую картинку, а под текст подкладываете наиболее подходящую под цвет шрифта и цвет фона. Например Красный фон лучше "смягчать" розовым полупрозрачным. Итак, поехали! Заливаете (лучше бесшовную) яркую картинку, а под фон сообщений пойдет остальное. Примеры таких полупрозрачных фонов с готовыми кодами |
|
Рамка с автооглавлением и главами |
Дневник |
№ 1 2 3 | |
№ 1 2 3 | |
Метки: рамка рамочка |
Фоны под текст |
Дневник |
В данной рамочке font color="#FFFF99" а адрес картинки фона //img1.liveinternet.ru/images/attach/c/1//58/195/58195115_roz111.jpg У ссылок ниже font color=#FFEFD5 |
//img1.liveinternet.ru/images/attach/c/1//59/496/59496631_333.JPG font color например #000000 означает цвет букв. Можете оставить везде черный цвет, а можете выбрать по цветовой палитре (ссылка выше) Размер size= и остальные шаблоны редактирования текста смотрите в шпаргалке наверху моей страницы дневника либо в иных источниках html-редактирования |
//img0.liveinternet.ru/images/attach/c/2//71/853/71853360_111111.jpg |
//img0.liveinternet.ru/images/attach/c/2//71/853/71853360_111111.jpg Цвет этих букв такой: #8B4513 Хотите оставить черные буквы - оставляйте номер #000000 как в шаблоне |
Можете убрать size="+1", поскольку в данном фоне цвет фона достаточно светлый и не нуждается в крупном шрифте, можете буквы сделать бордовыми или какими захотите пользуясь шпаргалкой цветовой палитры и изменить значение font color=#000000. Картинка данного фона такая: //img0.liveinternet.ru/images/attach/c/2//71/186/71186709_22.jpg |
//img1.liveinternet.ru/images/attach/c/2//72/161/72161978_wd.jpg Буквы такого цвета для данного фона:#8B3626 Буквы такого цвета для данного фона:#006633 Буквы такого цвета для данного фона:#8B864E Или предложите свой цвет |
//img1.liveinternet.ru/images/attach/c/2//72/161/72161442_de.jpg |
//img0.liveinternet.ru/images/attach/c/1//59/259/59259433_nnn.jpg |
//img0.liveinternet.ru/images/attach/c/1//58/747/58747100_karta_fon.jpg |
//img1.liveinternet.ru/images/attach/c/1//57/730/57730615_tetradka_si.jpg |
//img1.liveinternet.ru/images/attach/c/1//57/503/57503582_555559.jpg |
//img0.liveinternet.ru/images/attach/c/1//57/503/57503560_55555511.jpg |
//img0.liveinternet.ru/images/attach/c/1//57/483/57483025_121212.jpg |
//img1.liveinternet.ru/images/attach/c/1//57/336/57336175_roz.jpg |
//img0.liveinternet.ru/images/attach/c/1//57/14/57014736_42820012_1240254058_WA03_060L.jpg |
//img1.liveinternet.ru/images/attach/c/1//57/3/57003575_234.JPG |
//img1.liveinternet.ru/images/attach/c/1//55/943/55943207_eda37a.jpg |
//img1.liveinternet.ru/images/attach/c/1//55/725/55725591_1256797083_razpolos16.jpg |
//img0.liveinternet.ru/images/attach/c/2//72/162/72162280_ra.jpg |
//img0.liveinternet.ru/images/attach/c/6/92/541/92541682_a.jpg |
//img1.liveinternet.ru/images/attach/c/6/92/541/92541701_b.jpg |
//img0.liveinternet.ru/images/attach/c/6/92/545/92545672_5.jpg |
//img1.liveinternet.ru/images/attach/c/6/92/659/92659893_11.jpg |
Метки: фоны оформление фон |
Знаки и символы |
Дневник |
|
Метки: знак иероглифы символы символ знаки иерогриф |
Новостная бегущая строка для дневника, сайта |
|
Далее (текст под кат) Читать (смотреть) далее |
Дневник |
Когда большой объем текста прячем под кат, то пишем в каком-то определенном месте [more]. В итоге получается строчка Читать далее, а весь текст за словом [more] убирается под кат, т.е. становится виден только когда Вы нажимаете на слова типа Читать далее. При желании мы меняем Читать далее на какие-нибудь слова типа Смотреть здесь (тогда напишите [more=Смотреть здесь], Жмякай сюда (тогда напиши [more=Жмякай сюда] и т.д. А есть и чудесные кнопки, когда подставляете адрес нужной вам картинки, слова, флешки, сложные тексты и т.д. Например, простенькую кнопочку-картинку можно создать таким кодом: [more=<img src="АДРЕС КАРТИНКИ" />]. Если хотите сделать четкое выравнивание по центру кнопки, четко строчкой ниже под текстом - в коде уточняйте это, например, так: [more=<center><br />Интересно? Тогда <br /><img src="АДРЕС КАРТИНКИ" /></center>] Будет видно так: <br /> это команда переноса строки. В принципе можете просто сделать новую строку, нажав привычно на Enter. А также можно сделать картинку плюс текст, несколько картинок, бегающие буквы, флешки, картинки с выравниванием и подписью и т.д. Под катом их много, смотрите и берите себе с готовым кодом вставки more= |
Метки: далее читать далее читать продолжение кат под кат под катом подкатом more |
Редкие символы с тегом написания |
Дневник |
|
Метки: символ символы знак знаки |
Шрифты (надеюсь ваш браузер отображает все перечисленные) |
Дневник |
size="2pt" | size="3pt" | size="4pt" | size="5pt" | size="6pt" | size="7pt" | Код шрифта |
Ваш текст | Ваш текст | Ваш текст | Ваш текст | Ваш текст | Ваш текст |
Метки: шрифт шрифты русские_шрифты русский_шрифт html |
Кнопочки делаем :) |
Дневник |
Метки: кнопка кнопки кнопочка кнопочки |
Таблицы делаем |
Дневник |
Метки: таблица табличка |
Буквы-хамелеоны MS Outlook и Wingdings |
Дневник |
A | B | C | D | E | F | G | H | I | J | K | L | M | N |
A | B | C | D | E | F | G | H | I | J | K | L | M | N |
А | Б | В | Г | Д | Е | Ё | Ж | З | И | Й | К | Л | М | Н | О | П |
А | Б | В | Г | Д | Е | Ё | Ж | З | И | Й | К | Л | М | Н | О | П |
Метки: буква буквы шрифт |
Буквы webdings и marlett |
Дневник |
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | W |
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 0 | W |
А | Б | В | Г | Д | Е | Ё | Ж | З | И | Й | К | Л | М | Н | О | П |
А | Б | В | Г | Д | Е | Ё | Ж | З | И | Й | К | Л | М | Н | О | П |
Метки: шрифт шрифты |
Буквица |
Дневник |
Б |
R |
{А |
И |
Метки: буквица буквицы |
Ctrl как горячая клавиша |
Дневник |
Некоторые горячие клавиши я уже знала, а сегодня стала с клавишей Ctrl тыкать все подряд. Ну заодно и кому-то шпаргалка будет (и мне в том числе) Ctrl Q выравнивание текста по левому краю W закрытие документа E выравнивание текста по центру R выравнивание текста по правому краю T не увидела изменений, может вы напишете, если знаете? Y как повторное нажатие кнопки жирный, курсив или подчеркивание в зависимости что нажимали перед этой комбинацией кнопок U подчеркивание выделенного текста (или отмена подчеркивания) I курсив выделенного текста (либо его отмена) O открытие нового документа P отправка документа на печать (предварительный просмотр перед печатью) [ не увидела изменений, может вы напишете, если знаете? ] не увидела изменений, может вы напишете, если знаете? A выделить все S сохранение изменений в уже существующем документе (вроде бы) D предлагает изменить шрифт, размер букв и т.д. по работе со шрифтом F поиск по тексту G перейти по тексту H заменить по тексту J выравнивание текста по ширине или по левому краю (чредуется) K вставка гиперссылки, например, на другой документ L выравнивание текста по ширине или по левому краю (чредуется) ВЫБИРАЕМ |
Метки: горячие клавиши горячая клавиша клавиатура ctrl |
Символы (просто скопируйте что надо) |
Дневник |
Что надо сделать? Просто скопировать этот значок и вставить по надобности куда хотите ± плюс-минус ∓ минус-плюс ≠ зачеркнутое равно ≀ загогулинка вертикальная ∾ загогулинка горизонтальная ≈ приблизительное равенство > больше ≥ больше или равно ≫ двойное больше ≷ больше или меньше ≶ меньше или больше < меньше ≤ меньше или равно ≪ двойное меньше ≺ меньше курсивом ≻ больше курсивом ν V жирное ∨ V нежирное Ну и далее, все подряд: ' ^ ` ` ~ € ƒ „ † ‡ ˆ ‰ Š ‹ Œ Ž ‘ ’ “ ” • – — ˜ ™ š › œ ž Ÿ ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ • ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î СМОТРИМ |
|
Фильтруем (убедитесь, что ваш браузер видит тени букв) |
Дневник |
Другой вид для фильтров: тут Ваш текст |
|
Страницы: | [2] 1 |