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

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

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

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

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

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

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

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

Рамочник

Читать далее

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

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







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

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

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

РАМКА А

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

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

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

,

Урок ТуТ

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

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

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

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

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

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

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

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

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

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

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

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

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

Тень у рамки

Тень у букв тут: 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>

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

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

УРОК =УЧИМСЯ ДЕЛАТЬ 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>

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

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

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

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

Урок по рамочкам - составлен по просьбе
 

Рассмотрим простую рамочку на конеретном примере простой рамочки:

***Текст***

"left" - слева
"right" - справа
"center" - по центру
Спасибо за внимание!
С уважением к Вам
***Люд-Мила***

Как скопировать код рамки из окошка и перенести рамку в свой дневник.
 

КАК СКОПИРОВАТЬ КОД ПОСТА ИЗ ОКОШКА И ПЕРЕНЕСТИ РАМКУ В СВОЙ ДНЕВНИК. 1. Под рамкой или в комментариях вы увидите окошечко с непонятными значками и буковками. ЭТО и есть код! 2. Кликаем правой кнопкой мышки на код, потом левой на ВЫДЕЛИТЬ ВСЁ 3. Когда все выделится, опять кликаем правой кнопкой, потом левой выбираем КОПИРОВАТЬ 4. Идем в СВОЙ дневник, нажимаем на НОВАЯ ЗАПИСЬ. Когда откроется поле для записи, потом кликаем правой кнопкой ВСТАВИТЬ. 5. Код вставили. Теперь кликаем левой кнопкой мышки сразу после слов в рамке. ЗДЕСЬ БУДЕТ ВАШ ТЕКСТ. Появится мигающая вертикальная черточка. Пишем или вставляем свой текст. 6. И только теперь, аккуратненько стираем ненужные нам слова автора рамки. 7. Внизу жмем на ПРЕДПРОСМОТР, чтобы посмотреть все ли получилось так как надо. Если все ОК, то можно добавлять. Большая просьба к тем, кто берет рамки. Не убирайте, пожалуйста, ссылку на автора. Если у Вас вдруг что-то не получилось, бывает такое, лучше обратитесь к тому, кто делал рамку и Вам обязательно помогут. Пробуйте, у Вас получится! ЖЕЛАЮ УДАЧИ! Nataliya_Bezushko

Серия сообщений "МОИ УРОКИ":

Часть 1 - Урок 1. Делаем простую рамочку из 2-х слоев.
Часть 2 - Как скопировать код рамки из окошка и перенести рамку в свой дневник.
Часть 3 - Урок 2. СДЕЛАЕМ ПРОСТУЮ РАМОЧКУ ИЗ 3-х СЛОЕВ.
Часть 4 - Урок 3. Делаем вместе простую рамочку из 4-х слоев
...
Часть 21 - LiveInternet – Отношения
Часть 22 - Уменьшаем большую картинку.
Часть 23 - По просьбе "скелетик" кода такой рамки.
 

Закругление углов изображения без ФШ
 

Закруглять будем с помощью HTML кода + свойство CSS border-radius.


<img data-cke-saved-src="АДРЕС ИЗОБРАЖЕНИЯ" src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px solid red; border-radius: 100%;" />

Так выглядит код картинки — HTML овал (для прямоугольных изображений):

< img src="https://img-fotki.yandex.ru/get/16129/163781271.f8/0_
f121c_96424eec_L.jpg" style="border-radius: width: 430px; height: 280px;
border: 3px solid red; border-radius: 100%;"/>

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