Обводка для текста

ОБВОДКА ДЛЯ ТЕКСТА
БЕЗ ФОТОШОПА

Кто-то в комментариях попросил меня рассказать как на пестром фоне сделать более видимым текст. Решила дать урок. Может кому-то пригодится.

Посмотрите ниже пример двух рамок с пестрым фоном и текстом. В верхней рамке текст написан с обводкой и поэтому его легче читать, а в нижней рамке текст написан обычным способом и читается с трудом. О том как сделать обводку мы сегодня и поговорим.

Женщина остаётся Женщиной, Неважно, сколько ей лет, И сколько лет ей по паспорту, Замужем или нет. Она может быть молоденькой, И может быть средних лет, И дамой преклонного возраста, У Женщины возраста нет!

Женщина остаётся Женщиной, Неважно, сколько ей лет, И сколько лет ей по паспорту, Замужем или нет. Она может быть молоденькой, И может быть средних лет, И дамой преклонного возраста, У Женщины возраста нет!

Если надо вставить текст в рамку.
Копируем в окошечке код.

<span style="text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px;">Здесь будет Ваш текст</span>

Код будет выглядеть вот так (см. фото А)



Код дан с обводкой черного цвета. Код цвета обводки выделен красной рамочкой. Вместо цифр 000000 вставляете код(6 знаков) нужного вам цвета. Вместо слов "Здесь будет Ваш текст" вставляете свой текст, всё копируете и вставляете в рамочку.

Если надо вставить текст без рамки.
Копируем в окошечке код.

<span style="text-shadow: #000000 1px 0px, #000000 1px 1px, #000000 0px 1px, #000000 -1px 1px, #000000 -1px 0px, #000000 -1px -1px, #000000 0px -1px, #000000 1px -1px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px, #000000 0 0 3px; font-size: 17px; color: #fffe9f;">Здесь будет Ваш текст</span>

Код будет выглядеть вот так (см. фото Б)



В код добавился параметр размера (синяя рамочка) и цвета (зеленая рамочка) шрифта. Их нужно заменить на свои.

Вот и всё! Удачи!

еще разные уроки

Огненный текст без фотошопа

Огненный текст
без фотошопа

Сегодня я расскажу, как сделать эффект огня на буквах. Это очень легко. Выбираете нужное "пламя" в рамке ниже. Копируете код из окошечка и вставляете вместо моих слов "Здесь будет Ваш текст" свой текст. Если захотите оформить таким огненным текстом стихи, то оставляйте между строк расстояние. Лучше всего такой текст смотрится на темных фонах. На светлом яркость теряется.

ТЕКСТ 1 <div style="font-size: 20px;color:#000000;font-family: Verdana;text-shadow: rgb(255, 255, 0) 0px -1px 2px, rgb(255, 204, 0) -1px -3px 3px, rgb(255, 153, 0) -1px -5px 4px, rgb(255, 102, 0) -1px -7px 5px, rgb(255, 51, 0) 0px -9px 6px, rgb(255, 0, 0) 4px -11px 7px; ">Здесь будет Ваш текст</div> ТЕКСТ 3 <div style="font-size: 20px;color: #fff799; font-family: Verdana; margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 10px rgb(254, 252, 201), 5px -5px 15px rgb(255, 255, 0), -10px -10px 20px rgb(255, 174, 52), 10px -20px 25px rgb(236, 118, 12), -10px -30px 30px rgb(205, 70, 6), 0pt -40px 35px rgb(151, 55, 22), 5px -45px 40px rgb(69, 27, 14); text-transform: uppercase;">Здесь будет Ваш текст</div> ТЕКСТ 2 <div style="font-size: 20px;color:#3f2305;font-family: Verdana;text-shadow: rgb(255, 255, 0) 0px -2px 4px, rgb(255, 204, 0) -2px -6px 6px, rgb(255, 153, 0) -2px -10px 8px, rgb(255, 102, 0) -2px -14px 10px, rgb(255, 51, 0) 0px -18px 12px, rgb(255, 0, 0) 2px -22px 14px; ">Здесь будет Ваш текст</div> ТЕКСТ 4 <div style="font-size: 20px;color: #ffcc66; font-family: Verdana; margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 20px rgb(254, 252, 201), 10px -10px 30px rgb(254, 236, 133), -20px -20px 40px rgb(255, 174, 52), 20px -40px 50px rgb(236, 118, 12), -20px -60px 60px rgb(205, 70, 6), 0pt -80px 70px rgb(151, 55, 22), 10px -90px 80px rgb(69, 27, 14); text-transform: uppercase;">Здесь будет Ваш текст</div>

Из блога Егоровой Татьяны

На фото ниже выделены параметры, которые можно менять в коде.



Удачи!

еще разные уроки

ТАБЛИЦА КОДОВ и НАЗВАНИЙ БАЗОВЫХ ЦВЕТОВ для ШРИФТА

*** эта информация пригодится для тех,кто оформляет свои записи,помещая информацию в "рамочки"...делается все просто : нужно скопировать из ячейки подходящего цвета или его название,или 6-ти значный КОД под ним и осторожно вставить в формулу рамки,заменив в ней КОД ,например,черного цвета 000000 : <span style="color:#000000;">...ВАШ ТЕКСТ...</span> Таблица базовых цветов Читать далее ***

Серия сообщений "ПАЛИТРА цветов":
Часть 1 - ПАЛИТРА цветов
Часть 2 - ПАЛИТРА ЦВЕТОВ флеш
...
Часть 18 - ПАЛИТРЫ (замена цвета шрифта на нужный)
Часть 19 - все ПАЛИТРЫ ЦВЕТОВ
Часть 20 - ТАБЛИЦА КОДОВ и НАЗВАНИЙ БАЗОВЫХ ЦВЕТОВ для ШРИФТА

Огненный текст без фотошопа

Огненный текст
без фотошопа

Сегодня я расскажу, как сделать эффект огня на буквах. Это очень легко. Выбираете нужное "пламя" в рамке ниже. Копируете код из окошечка и вставляете вместо моих слов "Здесь будет Ваш текст" свой текст. Если захотите оформить таким огненным текстом стихи, то оставляйте между строк расстояние. Лучше всего такой текст смотрится на темных фонах. На светлом яркость теряется.

ТЕКСТ 1 <div style="font-size: 20px;color:#000000;font-family: Verdana;text-shadow: rgb(255, 255, 0) 0px -1px 2px, rgb(255, 204, 0) -1px -3px 3px, rgb(255, 153, 0) -1px -5px 4px, rgb(255, 102, 0) -1px -7px 5px, rgb(255, 51, 0) 0px -9px 6px, rgb(255, 0, 0) 4px -11px 7px; ">Здесь будет Ваш текст</div> ТЕКСТ 3 <div style="font-size: 20px;color: #fff799; font-family: Verdana; margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 10px rgb(254, 252, 201), 5px -5px 15px rgb(255, 255, 0), -10px -10px 20px rgb(255, 174, 52), 10px -20px 25px rgb(236, 118, 12), -10px -30px 30px rgb(205, 70, 6), 0pt -40px 35px rgb(151, 55, 22), 5px -45px 40px rgb(69, 27, 14); text-transform: uppercase;">Здесь будет Ваш текст</div> ТЕКСТ 2 <div style="font-size: 20px;color:#3f2305;font-family: Verdana;text-shadow: rgb(255, 255, 0) 0px -2px 4px, rgb(255, 204, 0) -2px -6px 6px, rgb(255, 153, 0) -2px -10px 8px, rgb(255, 102, 0) -2px -14px 10px, rgb(255, 51, 0) 0px -18px 12px, rgb(255, 0, 0) 2px -22px 14px; ">Здесь будет Ваш текст</div> ТЕКСТ 4 <div style="font-size: 20px;color: #ffcc66; font-family: Verdana; margin: 10px auto; padding: 70px 0pt 0pt; text-shadow: 0pt 0pt 20px rgb(254, 252, 201), 10px -10px 30px rgb(254, 236, 133), -20px -20px 40px rgb(255, 174, 52), 20px -40px 50px rgb(236, 118, 12), -20px -60px 60px rgb(205, 70, 6), 0pt -80px 70px rgb(151, 55, 22), 10px -90px 80px rgb(69, 27, 14); text-transform: uppercase;">Здесь будет Ваш текст</div>

Из блога Егоровой Татьяны

На фото ниже выделены параметры, которые можно менять в коде.



Удачи!

еще разные уроки

разделители для текста с весенней ноткой

Надписи к 23 февраля

Серия сообщений "23 ФЕВРАЛЯ":

Часть 1 - с Днём защитника Отечества!
Часть 2 - Детский клипарт к 23 февраля
...
Часть 7 - "Я служу России!"- А. Хворостян - для Вас, дорогие мужчины.
Часть 8 - Рамочка "С днем защитника Отечества"
Часть 9 - Надписи к 23 февраля

Серия сообщений "НАДПИСИ, ТЕКСТ":

Часть 1 - Надписи "1 сентября".
Часть 2 - Текст, надписи к 1 сентября.
...
Часть 38 - Надписи Romantic WordArt
Часть 39 - Надписи "С Масленицей" от Natalivesna
Часть 40 - Надписи к 23 февраля

Оформляем текст и картинки

Картинка обтекаемая текстом Не забывайте, что картинка должна быть не очень большой, иначе текст просто выдавит ее вверх. цифровые значения vspace="10" и hspace="10"- это всего навсего расстояние от картинки к тексту вправо и вниз, можно их менять, по вашему вкусу.	Код обтекания картинки текстом <img src="httр:адрес картинки" align="left" vspace="10" hspace="30" alt=>Здесь нет картинки, хотя должно быть изображение. Какое оно будет, решать вам.
Картинка слева от текста Снова пишем свой текст. Если картинка длинная, бордюрного типа, то и весь текст будет вдоль нее. Если не очень большая, то продолжится ниже. Предупреждение: в постах картинка не должна превышать размер 200px в ширину, иначе просто снова уйдет вверх.	Код картинки слева <img src="URL адрес картинки" align="left" border="0"> И снова пишем свой текст, или стихотворение, или.... придумали? молодцы!
Картинка справа от текста: Все правила написания для правой стороны такие же , как и для левой.	Код для картинки справа: <img src="URL адрес картинки" align="right" border="0">Пишем свой текст, что напишем, то и увидим

Смотрим далее >>>

Коллекция РОЖДЕСТВЕНСКИХ разделителей на прозрачном фоне.

Коллекция РОЖДЕСТВЕНСКИХ разделителей на прозрачном фоне. Для оформления новогодних постов и рамок. Как взять картинку в другом размере с альбомов на Яндекс.Фотках СМОТРИМ ЗДЕСЬ

Серия сообщений "Разделители для блогов":

Часть 1 - Новая коллекция разделителей
Часть 2 - Коллекция НОВОГОДНИХ разделилей
...
Часть 17 - Новая коллекция новогодних разделителей
Часть 18 - Новогодие ВЕРТИКАЛЬНЫЕ раздлители.
Часть 19 - Коллекция РОЖДЕСТВЕНСКИХ разделителей на прозрачном фоне.

Надписи:"С Новым годом" и Код :)))

LJILJANA
Надписи:"С Новым годом" и Код :)))
Автор Кантемирова Ирина

<img src="https://img-fotki.yandex.ru/get/15557/100348571.427/0_ce123_b6a626db_orig.png" width="597" height="197" border="0" title="" alt="" /> <img src="https://img-fotki.yandex.ru/get/16118/100348571.428/0_ce135_7cb2fdb9_orig.png" width="600" height="302" border="0" title="" alt="" /> <img src="https://img-fotki.yandex.ru/get/15585/100348571.428/0_ce132_19b4e669_orig.png" width="600" height="302" border="0" title="" alt="" />

Красивые осенние шрифты.

Красивые шрифты на тему ОСЕНЬ на прозрачном фоне. Щелкните по нужному ИЗОБРАЖЕНИЮ мышкой, и оно вам откроется в оригинальном размере. Как по новому взять картинку с альбомов на Яндекс.Фотках СМОТРИМ ЗДЕСЬ

Серия сообщений "Красивые надписи":

Часть 1 - Красивые надписи ОСЕНЬ
Часть 2 - Красивые надписи "ДОБРО ПОЖАЛОВАТЬ"
Часть 3 - Красивые надписи 2014
Часть 4 - Красивые надписи МЕСЯЦЫ ГОДА. на прозрачном фоне.
Часть 5 - Красивые осенние шрифты.

Красивые надписи МЕСЯЦЫ ГОДА. на прозрачном фоне.

Красивые надписи МЕСЯЦЫ ГОДА. на прозрачном фоне. Щелкните по нужному ИЗОБРАЖЕНИЮ мышкой, и оно вам откроется в оригинальном размере.Как по новому взять картинку с альбомов на Яндекс.Фотках СМОТРИМ ЗДЕСЬ

Серия сообщений "Красивые надписи":

Часть 1 - Красивые надписи ОСЕНЬ
Часть 2 - Красивые надписи "ДОБРО ПОЖАЛОВАТЬ"
Часть 3 - Красивые надписи 2014
Часть 4 - Красивые надписи МЕСЯЦЫ ГОДА. на прозрачном фоне.

Большая коллекция ЗОЛОТЫХ разделителей

Большая коллекция ЗОЛОТЫХ разделителей. Для оформления постов и рамок. Как по новому взять картинку с альбомов на Яндекс.Фотках СМОТРИМ ЗДЕСЬ

Серия сообщений "Разделители для блогов":

Часть 1 - Новая коллекция разделителей
Часть 2 - Коллекция НОВОГОДНИХ разделилей
...
Часть 8 - Коллекция разделителей На тему ЕДА НАПИТКИ.
Часть 9 - Большая коллекция красивых разделителей.
Часть 10 - Большая коллекция ЗОЛОТЫХ разделителей

Генератор анимированного текста для оформления дневника.

Сайт


Здесь создайте свой текст
Напишите текст, выберите шрифт, размер. Русских шрифтов мало, я создавала тексты: arial, georgia.
Чтобы текст был на прозрачном фоне, в "Цвет фона" поставьте галочку: Нет . Выберите эффекты анимации на тексте, цветные кубики внизу, фонов очень много семь страниц.
Нажмите на кнопку: Generate.
Вверху появится Ваш анимированный текст.
Если Вас всё устраивает, то сохраните его на свой компьютер. Правой клавишей мыши: Сохранить картинку как...




Спасибо за ваши комментарии!

Серия сообщений "фотогенераторы ":

Часть 1 - Создаём свои Валентинки к Дню Святого Валентина.
Часть 2 - Генератор любовных писем.
...
Часть 17 - Рамки для фотографий онлайн - Ваше Фото в рамке, сделанной Вами!
Часть 18 - Картинки с надписями на сайте: ImageChef - Творческая работа с фотографиями.
Часть 19 - Генератор анимированного текста для оформления дневника.