Пример рукописного шрифта
[477x366]Простыми способами такой текст невозможно сделать, но можно пойти на хитрость и сделать текст в виде картинки
Заходим на http://vln.dp.ua/li/f/t.php, выбираем шрифт, указываем размер шрифта и вводим текст. Жмем на "получить рисунок с текстом" и получаем то что хотели :). Рисунок выделен рамкой для удобства. Дальше клацаем на рисунке правой кнопкой мыши, вибираем "сохранить изображение как". Сохраняем на комп, а дальше вставляем в нужно место в пост дневника.
Сделаем рамку с заголовком и закругленым уголком.
В лесу родилась елочка, В лесу она росла, Зимой и летом стройная, Зеленая была. Метель ей пела песенку: "Спи, елочка, бай-бай!" Мороз снежком укутывал: "Смотри, не замерзай!" Трусишка зайка серенький Под елочкой скакал. Порою волк, сердитый волк Рысцою пробегал. Чу! Снег по лесу частому Под полозом скрипит; Лошадка мохноногая Торопиться, бежит. Везет лошадка дровенки, А в дровнях старичок, [мужичок] Срубил он нашу елочку Под самый корешок. Теперь она, нарядная, На праздник к нам пришла И много, много радости Детишкам принесла.
Для этого понадобяться 2 рисунка, один для фона заголовка и рисунок уголка
[показать] - Фоновый рисунок заголовка высотой 25 пикселей и шириной в 1 пиксель
[показать] - рисунок уголка ширина и высота по 25 пикселей
Что бы сделать такую рамку понадобится 3 <DIV>. Один общий который задаст ширину рамки, один для заголовка рамки и див в котором разместится текст
Упрощенно это выглядит так
Полный вариант выглядит так. Для удобства я пронумеровал дивы 1,2,3
Первый див задает общую ширину рамка width 600px и добавляет бордер к рамке border: solid 1px #00000f;
Обратите внимание на то что высота второго дива задана явно и составляет height: 25px столько же сколько и высота фонового рисунка который задается в background
Остальные стили задают цвет фона, размер шрифта и тд.
Что бы скруглить уголок нужно поверх угла дива вывести рисунок скругленного уголка. Что бы вывести рисунок в нужном нам месте нужно к рисунку добавить стиль position: relative и параметрами top, left задать нужное нам место
Код с скругленым уголком выглядит вот так
Разместим текст в две колонки. Что бы было веселее читать пост я позаимствовал стишок http://kievforum.org/showthread.php?t=1183. ( не рекламы ради, а гуглю спасибо :))) )
Познакомились мы в чате Ты представилася Катей Оказалось - ты Иван... ах, какой ты хулиган
Все сайты умерли, осталось только ICQ, И лишь ReGet качает тихо мне игру, И звук "ха-ха" писклявым тихим тоном, С забытья голову мою срывает стоном... Неоднозначно, непонятно, не всегда, Не видя, как опять бегут года, Просаживая сутки напролет, Мы ждем, когда же время то придет. Что из страны не грез, не сновидений, Нас вырвет, прекратя весь круг сомнений, И встретиться возможно станет наяву, Мерцает монитор, я всё же сплю... Нас двое лишь на эту Сеть, И мы не верим в нашу смерть...
Это можно было бы сделать таблицей, но есть вариант проще - использовать div.
Попробуем разместить каждый стих в своем диве
В примере кода я не указал что бы было проще читать код, а при выводе добавлю рамку к каждому диву
Вот что получится
Познакомились мы в чате Ты представилася Катей Оказалось - ты Иван... ах, какой ты хулиган
Все сайты умерли, осталось только ICQ, И лишь ReGet качает тихо мне игру, И звук "ха-ха" писклявым тихим тоном, С забытья голову мою срывает стоном... Неоднозначно, непонятно, не всегда, Не видя, как опять бегут года, Просаживая сутки напролет, Мы ждем, когда же время то придет. Что из страны не грез, не сновидений, Нас вырвет, прекратя весь круг сомнений, И встретиться возможно станет наяву, Мерцает монитор, я всё же сплю... Нас двое лишь на эту Сеть, И мы не верим в нашу смерть...
Во первых ширина дивов равна максимальной ширине, а во вторых они размещены не рядом, а друг под другом
Зададим ширину дивов добавив стиль width, для того что бы дивы размещались рядом, а не друг под другом нужно к каждому диву добавить стиль float: left это выравнивает элемент по левому краю, а все остальные элементы, вроде текста, огибают его по правой стороне.
Вот теперь мы получили 2 колонки
Познакомились мы в чате Ты представилася Катей Оказалось - ты Иван... ах, какой ты хулиган
Все сайты умерли, осталось только ICQ, И лишь ReGet качает тихо мне игру, И звук "ха-ха" писклявым тихим тоном, С забытья голову мою срывает стоном... Неоднозначно, непонятно, не всегда, Не видя, как опять бегут года, Просаживая сутки напролет, Мы ждем, когда же время то придет. Что из
Очень часто попадаются видеоролики которых нет возможности скачать простыми способами и для которых нет кода для размещения. Если есть желание разместить такой видеоролик в дневнике то достаточно кликнуть правой кнопкой мышки на видеоролике и выбрать "copy embed html", а затем в простом редакторе кликнуть правой кнопкой на поле для поста и сделать "вставить". И все :))))
Все это отлично работает в opera и seamonkey ( mozilla ). Работает ли это в других браузерах я не проверял.
[497x436]
Добавим к тексту тень
Делаем тень в тексте
Делаем тень в тексте
Делается все очень просто. Нужно вывести текст 2 раза так что бы один текст выводился поверх второго.
Сделаем все по порядку. Выведем два раза текст.
Делаем тень в тексте
Делаем тень в тексте
Все что теперь осталось - сместить второй текст вверх и влево. Для этого добавим стиль position: relative.
Это говорит от том что положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
Вот что мы получим
Делаем тень в тексте
Делаем тень в тексте
[показать]
[показать]Картинки, фоны и музыку я взял их из постов
Kapitoshka_70 и
Inmira за что им огромное спасибо
Включите звук на компьютере :)))
[показать]
[показать]
Женщина, стоя на гребне скалы, Круто нависшей над ширью морскою, Взглядом бежала до полной луны, Тая в минорном аккорде прибоя. Море на берег роняло слезу, Рокотом нежным звало и манило, Волнами камни ласкало внизу, В брызгах соленых любовь ей дарило. В этой окутанной магией мгле Вдруг услыхала призывные звуки, И наяву, но как будто во сне, Счастью навстречу раскинула руки. И закричала – Люблю я тебя! Смерть не ищу, лишь хочу быть с тобою. В крике гортанном – боль, радость, тоска Шаг… И себя отдала она морю |
Код открытки
При желании замените ссылку на музыкальный файл, картинку. Ну и текст вставьте тот который Вам нужен
[699x358]
Не забываем убирать галочку с "Сохранять переводы строк в тексте."
Из-за своей природной лени я не стал искать для примера фотки в безбрежном просторе инета, а взял их из постов
Kapitoshka_70 и
Inmira за что им огромное спасибо
[показать]
[показать]
[показать]
[показать]
[показать]
|
Итак делаем рамку.
Заливаем фоны и рисунки в черновик или берем изображения с любого другого сервера.
Нам нужны коды рисунков. Их можно посмотреть при редактировании черновика в простом редакторе или, если рисунки беруться с другого места, клацнуть на изображении правой кнопкой и посмотреть свойства изображения.
Коды самих рисунков
Обратите внимание на то что в код картинок добавлен vspace="10" это сделанго для того что бы рисунки не "слипались" а между ними оставался отступ в 10 пикселей
Коды фоновых рисунков
Заходим на http://vln.dp.ua/li/liphoto.php и заполняем поля формы.
[612x162]
Жмем на "получить код" и вот он код нашей рамки
[700x234]
Все что осталось это добавить к коду рамки коды изображений. В результате получится код
Вот и все :))))
Если у Вас есть посты с картинками и Вы хотите разместить их в рамку то нужно перед кодом первого рисунка добавть код который до подчеркнутой красным строкой, а после последнего рисунка - код который после подчеркнутой строки