Обводка внутри рамки (блока)
 

Делаем рамки. Лариса Гурьянова

Урок 3. Делаем вместе простую рамочку из 4-х слоев
 

Делаем вместе простую рамочку из 4-х слоев.
Для тех кто присоединился к нам оставила все предыдущие мои объяснения, что бы было понятно, (что и как) рамка почти не изменилась только добавился еще один слой. Рамку тоже не меняла для того что бы вы могли рассмотреть разницу.
Делаем вместе простую рамочку из 4-х слоев (фонов)
Вот такую.

Тут будет располагаться ваш текст! Nataliya Bezushko

Изучаю тени...
 

Создание рамочки для текста по шагам.
 

Главная  Текстокрас  Рамочник  Текстофот  Буквомиксер  Анаграмма  Шифровщик  Молодой Текстокрас  Гостевая Книга  Помощь

Рамочник

Читать далее

CssRound: округлые генератор угол CSS3-урок
http://cssround.com/

Ответ на вопрос, как правильно сделать рамочку
CssRound: округлые генератор угол CSS3 может, кому и пригодится







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

Рамки с объемным фоном без фотошопа!
 

Не так давно здесь и здесь я давала уроки как делать без фотошопа рамки с круглыми углами и тенью. Сегодня даю небольшое дополнение к предыдущим урокам. Расскажу как сделать объемно-выпуклым центральный фон и вообще любой фон в рамке. Сравните. Рамка А без эффекта объема, рамка Б с таким эффектом и рамка В с усиленным эффектом.

РАМКА А

Как сделать тени в рамочке и на картинках
 

Сегодня сделаю рамочки и открыточки с тенью без ФШ, используя

генератор рамок

,

Урок ТуТ

.
Сделали рамочку, но рамочка там плучается плоская, да и цвет фона однотонный...
Чтобы рамочка имела как бы объем, вот и воспользуемся подсказкой сайта

Шпаргалка блоггера

Стильные рамки (блоки)
 

Как своими руками сделать рамку в "Рамочнике".
 

Я сюда на Лиру перебралась потому что, случайно в инете, увидела красивую рамку. Так захотелось научится делать нечто подобное. С тех пор уже не могу остановится. Всем, кто любит украшать свой дневник рамками, предлагаю вариант, как это можно делать не особо напрягаясь. И в этом мне очень помог Рамочник , ведь для него не нужно больших познаний в HTML. Итак как с ним работать ? В Рамочнике есть 4 панели, которые вам нужно заполнить. 1 ПАНЕЛЬ. Выглядит она так. В этой панели вы выбираете как хотите чтобы выглядела ваша рамочка. ЗДЕСЬ далее... SvetlanaT

Изображения с тенями
 

Набор рамочек с разрывом (можно вставлять фон)

Рамочка с внешней тенью

Рамочка без тени

Рамочка с внутренней тенью

Внутренние тени изображений и текста
 

Внутренние тени изображений, текста широко применяются в CSS, но и в HTML их тоже можно отразить. Достигается это с помощью box-shadow или text-shadow.

вот еще такой вариант рамочек
 

Урок 4. Делаем вместе рамочку из 6-х слоев
 

Делаем вместе простую рамочку из 6-х слоев.
Для тех кто присоединился к нам оставила все предыдущие мои объяснения, что бы было понятно, (что и как) рамка почти не изменилась только добавился еще один слой. Рамку тоже не меняла для того что бы вы могли рассмотреть разницу.
Делаем вместе рамочку из 6-х слоев (фонов)
Вот такую.

Тут будет располагаться ваш текст! Nataliya Bezushko

Тень у рамки

Тень у букв тут: http://www.liveinternet.ru/users/ka82/post350166795/
 

набор простых рамочек
 

Объемные рамки разной конфигурации. Без фотошопа!

Недавно я давала урок по изготовлению рамок с круглыми углами. Посмотреть его можно здесь. А Sergg62, подсказал как сделать рамки с разными углами и тенью. За это ему огромное спасибо!
Эффект круглых углов виден в браузерах Google Chrome, Mozilla Firefox. В Internet Explorer рамка будет отражаться как обычная с прямыми углами. В других не знаю.
 

Фоновое изображение в рамке. Часть 1
 

РАМКИ С КРУГЛЫМИ УГЛАМИ БЕЗ ФОТОШОПА
 

Простые Рамки для выделения текста

Простые Рамки для выделения текста 1. Шпаргалочка по тегам № 1

Рамки, украшенные картинкой
 

С помощью CSS можно сделать вот такие лёгкие симпатичные рамки с картинкой слева, либо справа от текста.
Не буду вдаваться в подробности, как их собрать с нуля, а поясню самое необходимое. Под каждой рамкой стоит готовый код шаблона.

Ваша картинка будет располагаться слева от текста. При заполнении рамки текстом последний будет обтекать картинку. Если картинка большого размера, то и запись должна быть объёмной, иначе часть изображения выпадет за границы рамки, поскольку за разворот рамки отвечает именно текст.

Ваша подпись

<div style="background-color: #F4FC03; border:3px #00B344 ridge; width: 640px; padding-top: 15px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px;"><img data-cke-saved-src="ВАША КАРТИНКА" src="ВАША КАРТИНКА" style="float: left; margin: 0px 15px 10px 0px" /><span style="font-family: Georgia; color:#000000; font-size: 18px;">Ваша картинка будет располагаться слева от текста. При заполнении рамки текстом последний будет обтекать картинку. Если картинка большого размера, то и запись должна быть объёмной, иначе часть изображения выпадет за границы рамки, поскольку за разворот рамки отвечает именно текст.<br /><br /> <center><a data-cke-saved-href="ССЫЛКА НА ВАШ БЛОГ" href="ССЫЛКА НА ВАШ БЛОГ" target="_blank">Ваша подпись</a></center></span></div>

Смотрим дальше

Рамка с КАРТИНКАМИ-ЛИНЕЕЧКАМИ.

КОД "СКЕЛЕТИКА" РАМКИ.<left><table border="0" background="ЛИНЕЕЧКА 1" cellpadding="0" cellspacing="0" width="ШИРИНА" height="ВЫСОТА ЛИНЕЕЧКИ 1"><tr><td></td></tr></table><table border="0" background="ФОН где ТЕКС" cellpadding="0" cellspacing="0" width="ШИРИНА" height="200"><tr><td><center></center><center><font size="4"><font color="#FFFFCC"><b><font face="Monotype Corsiva">ВАШ ТЕКСТ</font></b></font></font></center><br /><center><a target="_blank" data-cke-saved-href="ССЫЛКА НА ВАШ ДНЕВНИК" href="ССЫЛКА НА ВАШ ДНЕВНИК"><font size="1"><b><font color="#000000">ВАШ НИК</font></b></font></a></center></td></tr></table><table border="0" background="ЛИНЕЕЧКА 2" cellpadding="0" cellspacing="0" height="ВЫСОТА ЛИНЕЕЧКИ 2" width="ШИРИНА"><tr><td></td></tr></table></left>

Рамки оригинальные
 

УРОК =УЧИМСЯ ДЕЛАТЬ 8-МИ СЛОЙНУЮ РАМОЧКУ=
 

ВСЕ МОИ УРОКИ ЗДЕСЬ Сегодня я хочу вам рассказать как делать 8-ми слойную рамочку такого вида: Линеечка или картинка ВАШ ТЕКСТ     Линеечка логотип

Как сделать тень на простой рамочке.
 

Примеры работы с тенью текста
 

Наиболее интересные варианты примеров работы с тенью текста используя возможности CSS. Атрибут * font-size *отвечает за размер шрифта. Например: в font-size 20xp;(размер шрифта) вместо 20 подставляем нужное вам значение. Кому интересно смотрим далее...кому нет,проходит мимо!

Как сделать объёмную тень на рамочках
 

Делаем тень на рамочках Заходим на сайт Смотрим ниже по страничке.Все варианты:вставлять только значения,какие вас устраивают в свои рамочки в том числе и квадратные. Как вставить тень было ТУТ Пишу о таком варианте:

Красивый текст для блога
 

текстовые весенние рамочки
 

рамка в 3 слоя

Код "Cкелетика" этой рамки.<left> <table border="2" background="1СЛОЙ ФОНА" cellpadding="2" cellspacing="20" width="600"><tr><td><table border="2" background="2СЛОЙ ФОНА" cellpadding="5" cellspacing="25" width="100%"><tr><td><table border="2" background="3СЛОЙ ФОНА" cellpadding="5" cellspacing="0" width="600"><tr><td><font size="5"><font color="000000"><font face="Monotype Corsiva"><text size="4"><block>ВАШ ТЕКСТ<block><br />ВАШ НИК</block></block></text></font></font></font></td></tr></table></td></tr></table></td></tr></table></left>

набор альбомных рамочек
 

Простые ОБЪЕМНЫЕ рамочки разной формы
 

Простые объемные рамочки, которыми можно разнообразить свои посты. Смотрятся они красиво, и очень просты в использовании. Рамочки не мои, собраны на просторах инета, пользуюсь ими давно , авторов не знаю, но очень им благодарна за работу. В рамочку можно вставлять все, что вам захочется, то есть весь ваш пост. Коды каждой такой рамочки внутри конкретной рамки. Копируйте их, и ставьте в свои записи в Простом редакторе, меняйте фоны под свой дневник. Там где написано ВАШ ПОСТ- Вставляете свой текст.

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 6 - Разлиновка — шаблоны разлинованных листов всех форматов.
Часть 7 - Красивые слайд-шоу в ваш дневник
Часть 8 - Простые ОБЪЕМНЫЕ рамочки разной формы
Часть 9 - Он-лайн конвертер с большим выбором форматов
Часть 10 - Бродилка по сайтам для обработки фото
Часть 11 - Простые, оригинальные рамочки разного цвета
Часть 12 - Бродилка по ОНЛАЙН - генераторам для создания Слайд-шоу.
 

набор альбомных рамочек
 

Простые, оригинальные рамочки разного цвета
 

Простые и оригинальные рамочки, которыми можно разнообразить свои посты. Смотрятся они красиво, и очень просты в использовании. Рамочки не мои, собраны на просторах инета, пользуюсь ими давно , авторов не знаю, но очень им благодарна за работу. В рамочку можно вставлять все, что вам захочется, то есть весь ваш пост. Коды каждой такой рамочки внутри конкретной рамки. Копируйте их, и ставьте в свои записи в Простом редакторе. Цвет ободков рамки так же можно менять. Таблица кода цветов НАХОДИТСЯ ЗДЕСЬ. Аккуратно стираете в коде рамки КОД ЦВЕТА, и меняете на свой. Для новичков поясню. Код цвета надо БРАТЬ ИЗ САМОЙ ПОСЛЕДНЕЙ КОЛОНКИ в таблице. Там где написано ВАШ ПОСТ- Вставляете свой текст.

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 9 - Он-лайн конвертер с большим выбором форматов
Часть 10 - Бродилка по сайтам для обработки фото
Часть 11 - Простые, оригинальные рамочки разного цвета
Часть 12 - Бродилка по ОНЛАЙН - генераторам для создания Слайд-шоу.
 

Рамки для выделения текста.
 

 

Если вас устраивает тот фон который есть у вас на страничке.
А пост просто хочется как-то выделить.
Можно выделить рамкой ,а уж какой край будет у рамки выбирайте сами по НАЗВАНИЮ.
Копируем код и вставляем к себе в блог в Простом редакторе.
Там где написано ВАШ ТЕКСТ- Вставляете свой текст.
Ещё в коде можно поменять цвет рамки.
Находим вот такой значёк,он обозначает цвет#FFFACD и меняем цвет на тот,
который подходит вам. Выбираем цвет здесь.

solid - край рамки имеет сплошную линию.
КОД solid<div style="border:3px solid #FFFACD;padding:10px;">ВАШ ТЕКСТ.</div>

ЗДЕСЬ далее...
SvetlanaT

Рамочка с круглыми краями
 

Здесь будет Ваш текст

для serdjick(объяснение для новичка)
 

Это прозрачная рамочка: Попробуйте поставить текст сюда.Вместо записи "***Здесь будет Ваш текст***Поставьте свои стихи.Но сначала скопируйте код в рамочке и поставьте его у себя в редакторе)))

<i><div align="center"><table style=" width:740px;-webkit-border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;border-radius: 40px 40px 40px 40px;-webkit-box-shadow: #000000 4px 4px 4px;-moz-box-shadow: #000000 4px 4px 6px; box-shadow: #000000 2px 4px 6px;" background="ОБВОДКА" cellspacing="0" cellpadding="0"><tr><td style="padding:5px"><table style="width:740px;-webkit-border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;border-radius: 40px 40px 40px 40px;" background="ФОН 3" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="font-family:Verdana;color:#ЦВЕТ ШРИФТА;font-size:16px"><br /><br /> ***Здесь будет Ваш текст***<br /> <br /></span></td></tr><tr><td style="padding:0px" height="1%" align="center"><span style="font-family:Verdana;color:#000000;font-size:10px"></span></td></tr></table></td></tr></table></div></i>


Или перед текстом поставьте это(копируй)
<i><div align="center"></div></i>

У меня всё получилось

ДЕЛАЕМ РАМКУ В ВОСЕМЬ СЛОЕВ
 

УЧИМСЯ ДЕЛАТЬ РАМКУ В ВОСЕМЬ СЛОЕВ

Рамку в два слоя мы уже научились делать ЗДЕСЬ.
В три слоя - ЗДЕСЬ.
В четыре слоя - ЗДЕСЬ.
В шесть слоев - ЗДЕСЬ.
Чтобы сделать рамку, которую вы видите, - рамку в 8 слоев, вам достаточно скопировать формулу в окошке под рамкой.

Здесь будет ваш текст Лорик

Формула состоит из тегов.
Рассмотрим, что обозначают основные теги.

Читать далее

Серия сообщений "Делаем рамки":

Часть 1 - Золотая рамочка с фильтром Factory C в ФОТОШОПЕ
Часть 2 - Рамочка с радужным градиентом
...
Часть 9 - Учимся делать рамку в три слоя
Часть 10 - ДЕЛАЕМ РАМКУ В ШЕСТЬ СЛОЕВ
Часть 11 - ДЕЛАЕМ РАМКУ В ВОСЕМЬ СЛОЕВ
Часть 12 - Как вставить ПРОКРУТКУ в пост
Часть 13 - Делаем простую Рамку с двигающимся текстом
...
Часть 42 - Как сделать разрезную рамку в ФШ
Часть 43 - Коды для Мейла и ЛиРу
Часть 44 - Делаем разрезную рамку в ФШ
 

Коды для Мейла и ЛиРу
 

Простые Рамки с Заголовком.
 

Рамка с картинкой в виде ЗАГОЛОВКА. В рамке Заголовок может быть в виде ТЕКСТА или можно использовать КАРТИНКУ. Пример такой рамочки,как она будет выглядеть.Картинку лучше брать не большую. Чуть ниже я даю код,чтобы вы могли сделать рамку какая вам нужна-САМИ. Копируете его и вставляете к себе в дневник а потом... В коде где написано УРЛ АДРЕС КАРТИНКИ.— Вставляете свою картинку. Через РАДИКАЛ-ФОТО Код берёте под № 1..Вам только нужно будет изменить размеры картинки на свои. width="300"—Ширина картинки. height="100"—Высота картинки. Если с других сайтов или с Лиру,тогда берёте УРЛ АДРЕС КАРТИНКИ,ССЫЛКИ ведущий на оригинал. Вставлять внутрь кавычек,кавычки не трогаете. Находите в коде вот такой тег ...border:3px #FF00FF solid... Здесь можно менять #FF00FF—ЦВЕТ БОРДЮРА 3px—РАЗМЕР БОРДЮРА на свой. Где написано ВАШ ТЕКСТ—Пишите свой текст. Вот и всё ВАША рамочка готова. Пробуйте,экспериментируйте на здоровье. ЗДЕСЬ ЕЩЁ РАМКИ... SvetlanaT