Серия сообщений "советы от Юлии Гурбер":
советы от Юлии Гурбер
Часть 1 - Фоновое изображение в рамке. Часть 1
Часть 2 - Набор цветных окошек для кодов
Часть 3 - Интервалы в тексте
Часть 4 - Как взять код изображения с ЯФ
Часть 5 - Цветное окошко для кода
Часть 6 - Стильные рамки (блоки)
Часть 7 - Рамки, украшенные картинкой
Часть 8 - Рамочки с закруглёнными углами
Часть 9 - Красивый текст для блога
Часть 10 - Таблица "безопасных" цветов
Часть 11 - Рамка "В ожидании чуда" (с прокруткой)
Часть 12 - Рамка сиреневая (с прокруткой)
Часть 13 - Рамка коричневая (с прокруткой)
Часть 14 - Рамка цветочная (с прокруткой)
Часть 15 - Рамка цветочная (с прокруткой)
Часть 16 - Рамка "Розовый текстиль" (с прокруткой)
Часть 17 - Рамки для текста
Часть 18 - Рамка "Зима"
Часть 19 - Рамка "Зимний пейзаж"
Часть 20 - Рамка цветочная (сиреневая)
Часть 21 - Обводка внутри рамки (блока)

Комментарии (0)

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

Вторник, 27 Декабря 2016 г. 12:45 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

На этот раз хочу поделиться более сложными шаблонами, в которых можно не только менять цвет фона, но и сделать фоном изображение.
В представленной рамке фон-изображение вставляется в верхний слой снаружи.

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

Ваша подпись

<center><div style="border:2px solid #EBE3D4; width:650px; padding:18px; background-image: url('https://img-fotki.yandex.ru/get/6846/163781271.c8/0_dce0f_53e73c4b_XXS.jpg'); box-shadow:rgba(0,0,0,.8) 0 5px 11px -5px;"><div style="border:2px solid #EBE3D4; padding:18px; background:#E2D6C1; border-radius:32px; box-shadow:inset 0 0 20px #000000; box-shadow:inset 0 0 20px #000000; box-shadow:inset 0 0 20px #000000; font-family:Georgia; font-size:19px; font-style:italic; color:#663300;">Здесь будет ваш текст<br /> <br /> <center><center><a data-cke-saved-href="ССЫЛКА НА ВАШ БЛОГ" href="ССЫЛКА НА ВАШ БЛОГ" target="_blank"><span style="font-size: 0.9em">Ваша подпись</span></a></center></center></div></div></center>

Объяснительная часть

Метки: рамки дневник

Комментарии (0)

Набор цветных окошек для кодов

Понедельник, 06 Марта 2017 г. 06:29 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Набор цветных окошек для кодов

Подготовила набор цветных окошек для кодов.
Очень удобно просто найти понравившийся цвет и скопировать готовую формулу.

<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Bisque; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Hotpink; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Khaki; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Pink; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД
<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Powderblue; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Lightgreen; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Plum; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Aquamarine; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД
<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Darkseagreen; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Gainsboro; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Coral; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Darkkhaki; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД
<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Darkgray; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Navajowhite; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Palegreen; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Yellow; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД
<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Burlywood; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Thistle; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Palegoldenrod; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Sandybrown; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД
<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Greenyellow; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Goldenrod; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Salmon; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Springgreen; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД
<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Violet; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: YellowGreen; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Gold; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД	<textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color: Paleturquoise; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД

Разъяснения по использованию

Комментарии (0)

Интервалы в тексте

Понедельник, 06 Марта 2017 г. 06:38 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Интервалы в тексте

Межстрочный интервал равен 2. То есть расстояние от строчки до строчки в 2 раза больше размера шрифта. Увеличивать и уменьшать интервал можно прибавляя, либо отнимая по одной десятой. Пример: 1.7, 1.8, 1.9, 2, 2.1, 2.2, 2.3 и т. д.

<p style="line-height: 2; color: #006633; font-size: 1.2em; font-family: Georgia;">Здесь будет ваш текст</p>

Расстояние между словами составляет 15 пикселей.

<p style="word-spacing: 15px; color: #800080; font-size: 1.2em; font-family: Georgia;">Здесь будет ваш текст</p>

Интервал между буквами равен 8 пикселям.

<p style="letter-spacing: 8px; color: #0000FF; font-size: 1.2em; font-family: Georgia;">Здесь будет ваш текст</p>

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

Метки: оформление постов шпаргалки интервалы в тексте

Комментарии (0)

Как взять код изображения с ЯФ

Понедельник, 06 Марта 2017 г. 07:33 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Как взять код изображения с ЯФ

Обратила внимание, что многим всё ещё трудно разобраться с кодами на Яндекс Фотках — не получается взять работающую картинку.
Хочу показать один из способов, как взять изображение. Заодно отсечём в коде кликабельность, которая не приветствуется.

Несколько кликов мышью и вот такая забавная зверушка (или любая другая) окажется на страничке:

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

Метки: оформление постов шпаргалки

Комментарии (0)

Цветное окошко для кода

Понедельник, 06 Марта 2017 г. 07:35 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Цветное окошко для кода

Не мной придумано, но вещь полезная. Без окошек для кодов нам не
обойтись при написании многих постов.

Вот простенькое, с прозрачным фоном: ВАШ КОД

А это код нашего простого окошка: <textarea style="text-align: center;" readonly="readonly" cols="15" rows="1" name="S1">ВАШ КОД

При необходимости меняем размер. Атрибут cols="15" отвечает за
ширину окошка. Меняем цифру "15" на нужную нам. Атрибут rows="1" отвечает за высоту. Вместо "1" можем поставить "2", например.

А можно украсить наше окошко цветом, вот так: ВАШ КОД

Вот код цветного окошка: <textarea rows="1" cols="15" style="border-right: black 1px solid; border-top: black 1px solid; background-color:lawngreen; color:black; border-left: black 1px solid;border-bottom:black 1px solid; ">ВАШ КОД

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

Таблица цветов с названиями по-английски

Метки: оформление постов шпаргалки коды

Комментарии (0)

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

Понедельник, 06 Марта 2017 г. 07:37 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

Недавно заинтересовалась CSS (Cascading Style Sheets) — каскадные таблицы стилей.
Можно ли, не будучи веб-дизайнером, научиться разбираться в этом сложном наборе
параметров? Для чего? Ну, хотя бы для того, чтобы с помощью языка CSS создавать
блоки (рамочки), где будут размещаться текст, картинки или что нашей душе угодно.
Поэкспериментировала с кодами и получила вот такие стильные, лёгкие блоки.

Под каждым стоит его код. Можно менять размер (атрибут width: 650px), цвет фона,
обводок, чтобы получить разные по цветовому исполнению блоки.
Обозначение цвета: #ABEDF7, просто оставляем решётку #, убираем ABEDF7,
и ставим свой цвет.

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

Ваша подпись

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

Метки: оформление постов шпаргалки коды

Комментарии (0)

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

Понедельник, 06 Марта 2017 г. 07:38 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

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

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

Ваша подпись

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

Метки: оформление постов шпаргалки рамки коды

Комментарии (0)

Рамочки с закруглёнными углами

Понедельник, 06 Марта 2017 г. 07:39 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамочки с закруглёнными углами

Хотите за 5 минут собрать простенькую, но очень симпатичную рамку
для текста? Например, такую:

Здесь будет ваш текст
-------

Или такую:

Здесь будет ваш текст
-------

Тогда смотрим и берём на заметку.
Смотрим дальше

Метки: оформление постов шпаргалки рамки

Комментарии (0)

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

Понедельник, 06 Марта 2017 г. 07:40 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

Используя возможности CSS можно работать с тенью текста, добиваясь удивительных результатов.
Атрибут font-size отвечает за размер шрифта. Например:
в font-size: 2em; вместо 2 подставляем любое другое значение. Если нужен курсив, то сам текст заключаем между "i" и "/i", меняя скобки " " на < >.

Вот примеры и коды некоторых шрифтов:

Текст будет таким

А это его код:

<p style="color: #fff;  font-size: 1.9em; font-family:&amp#39;ChunkFiveRegular&#39;;  margin: 20px auto;  text-shadow: 0 1px 0 #ccc, 0 1px 0 #c9c9c9, 0 2px 0 #bbb, 0 3px 0 #b9b9b9, 0 4px 0 #aaa, 0 5px 1px rgba(0,0,0,.1), 0 0 4px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.25), 0 8px 8px rgba(0,0,0,.2), 0 15px 15px rgba(0,0,0,.15);">Текст будет таким</p>

Текст будет таким

Его код:

<p style="color: #006633;  font-size: 1.9em; font-family:&amp#39;ChunkFiveRegular&#39;; margin: 20px auto; text-shadow: 0 1px 0 #ccc, 0 1px 0 #c9c9c9, 0 2px 0 #bbb, 0 3px 0 #b9b9b9, 0 4px 0 #aaa, 0 5px 1px rgba(0,0,0,.1), 0 0 4px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.25), 0 8px 8px rgba(0,0,0,.2), 0 15px 15px rgba(0,0,0,.15);">Текст будет таким</p>

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

Метки: оформление постов шпаргалки текст

Комментарии (0)

Таблица "безопасных" цветов

Понедельник, 06 Марта 2017 г. 07:41 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Таблица "безопасных" цветов

Безопасные html цвета воспринимают без искажений все
веб-браузеры и мониторы. На разных компьютерах изображение будет
именно в той цветовой гамме, которую задумал дизайнер.

"Безопасные цвета интернета"

Метки: оформление постов шпаргалки цвет

Комментарии (0)

Рамка "В ожидании чуда" (с прокруткой)

Понедельник, 06 Марта 2017 г. 07:45 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамка "В ожидании чуда" (с прокруткой)

В это поле пишем всё, что подскажет фантазия. Для начала копируем код рамки и вставляем его в режиме «HTML» в «Новую запись». Затем набираем свой текст, не забывая стереть мои слова и теги < br />, идущие после них. Когда рамка будет заполнена текстом, справа появится полоса прокрутки.

<center><table style="width: 635px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 5px, -1px 18px 36px -20px #000000;" background="https://img-fotki.yandex.ru/get/6412/163781271.106/0_10bc65_1eef15b4_orig.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px"><table width="635" height="" style="border:0px; box-shadow: 0px 0px 7px #000000, 0 0 5px #000000 inset;" background="https://img-fotki.yandex.ru/get/6412/163781271.106/0_10bc65_1eef15b4_orig.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px"><table style="width: 635px;" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px"><table style="width: 635px; box-shadow: 0px 0px 7px #000000, 0 0 5px #000000 inset;" background="https://img-fotki.yandex.ru/get/6412/163781271.106/0_10bc65_1eef15b4_orig.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px" zzz="zzz" align="center"><img src="https://img-fotki.yandex.ru/get/9803/163781271.106/0_10bc5d_52543aa6_orig.gif" width="300" height="460" align="left" /><span style="font-family: Georgia; font-size: 20px; text-shadow: 1px 1px 2px #006666, 1px 1px #006666, -1px 0px #000033; color:#fff;"><div style="height: 450px; padding:10px; overflow: auto;">В это поле пишем всё, что подскажет фантазия. Для начала копируем код рамки и вставляем его в режиме «HTML» в «Новую запись». Затем набираем  свой текст, не забывая стереть мои слова и теги < br />, идущие после них. Когда рамка будет заполнена текстом, справа появится полоса прокрутки.<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><tr><td style="padding:10px" zzz="zzz" align="center"><a href="//www.liveinternet.ru/users/5550538/profile" target="_blank"><img src="https://img-fotki.yandex.ru/get/9508/163781271.9b/0_c243b_5afb1b7e_orig.gif" width="15" height="15" border="0" title="Ю Гурбер" alt="" /></a></td></tr></div></span></td></tr></table></td></tr></table></td></tr></table></td></tr></table></center>

Метки: рамка (с прокруткой)

Комментарии (0)

Рамка сиреневая (с прокруткой)

Понедельник, 06 Марта 2017 г. 07:47 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамка сиреневая (с прокруткой)

Убедительная просьба не использовать оригинальный код вместо шаблона
для создания собственных рамок! Благодарю за понимание.

<center><table style="width: 617px; box-shadow: inset rgba(0,0,0,.6) 0 -7px 12px, inset rgba(252,255,255,.7) 0 7px 12px, -1px 23px 41px -25px #000000;" background="https://img-fotki.yandex.ru/get/6744/163781271.c4/0_dcd27_7d2c99d4_XS.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 28px"><table style="width: 617px; box-shadow: 0px 0px 15px #000000, 0 0 8px #000000 inset;" background="https://img-fotki.yandex.ru/get/6744/163781271.c4/0_dcd27_7d2c99d4_XS.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 18px"><table style="width: 617px;" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px"><table style="width: 617px; box-shadow: 0px 0px 17px #000000, 0 0 8px #000000 inset;" background="https://img-fotki.yandex.ru/get/6821/163781271.c3/0_dcd1b_5a8e1682_S.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:1px" zzz="zzz" align="center"><span style="font-family:Georgia; font-size:20px; text-shadow: 1px 1px 3px #660066, -1px -1px 3px #330033, 1px 1px #660066, -1px 0px #330033; color:#fff;"><div style="width: 617px; height: 370px; padding: 0px; overflow: auto;"><br />В это поле пишем всё, что подскажет фантазия. Для начала копируем код рамки и вставляем его в режиме «HTML» в «Новую запись». Затем набираем  свой текст, не забывая стереть мои слова и теги < br />, идущие после них. Когда рамка будет заполнена текстом, справа появится полоса прокрутки.<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br /><br />
<center></center><a href="//www.liveinternet.ru/users/5550538/profile" target="_blank"><img src="https://img-fotki.yandex.ru/get/6730/163781271.9b/0_c244c_80591f15_orig.gif" width="10" height="10" border="0" title="Ю Гурбер" alt="" /></a></div></span></td></tr></table></td></tr></table></td></tr></table></td></tr></table></center>

Метки: рамка сиреневая (с прокруткой)

Комментарии (0)

Рамка коричневая (с прокруткой)

Понедельник, 06 Марта 2017 г. 07:48 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамка коричневая (с прокруткой)

Убедительная просьба не использовать оригинальный код вместо шаблона
для создания собственных рамок! Благодарю за понимание!

<center><table style="width:620px; box-shadow: inset rgba(0,0,0,.6) 0 -7px 12px, inset rgba(252,255,255,.7) 0 7px 12px, -1px 23px 41px -25px #000000;" background="https://img-fotki.yandex.ru/get/6802/163781271.c9/0_dce24_d7f02f1e_M.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 32px"><table style="width:620px; box-shadow: 0px 0px 15px #000000, 0 0 8px #000000 inset;" background="https://img-fotki.yandex.ru/get/4802/163781271.f5/0_f065e_49f157d5_XS.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 10px"><table style="border: 2px inset #FFFFFF; width:620px;" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px"><table style="width:620px; box-shadow:inset 0 0 22px #330000;" background="https://img-fotki.yandex.ru/get/4802/163781271.f5/0_f065e_49f157d5_XS.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:1px" zzz="zzz" align="center"><span style="font-family:Georgia; font-size:20px; text-shadow: 1px 1px 3px #663300, -1px -1px 3px #330000, 1px 1px #663300, -1px 0px #330000; color:#fff;"><table width="610" border="0" cellspacing="0" cellpadding="0"><div style="width: 620px; height: 370px; padding: 0px; overflow: auto;"><br />В это поле пишем всё, что подскажет фантазия. Для начала копируем код рамки и вставляем его в режиме «HTML» в «Новую запись». Затем набираем  свой текст, не забывая стереть мои слова и теги < br />, идущие после них. Когда рамка будет заполнена текстом, справа появится полоса прокрутки.<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<center><a href="//www.liveinternet.ru/users/5550538/profile" target="_blank"><img src="https://img-fotki.yandex.ru/get/15517/163781271.f6/0_f096a_55cc734d_orig.gif" width="25" height="16" border="0" title="Ю Гурбер" alt="" /></a></center></div></table></span></td></tr></table></td></tr></table></td></tr></table></td></tr></table></center>

Метки: рамка коричневая (с прокруткой)

Комментарии (0)

Рамка цветочная (с прокруткой)

Понедельник, 06 Марта 2017 г. 07:50 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамка цветочная (с прокруткой)

<center><div style="border: 2px solid #CC99CC; padding:38px; width: 625px; background: #DDFFAC; background-image: url('https://img-fotki.yandex.ru/get/6832/163781271.e2/0_ddc7c_543b2e02_M.jpg'); box-shadow: -1px 23px 41px -25px #000000;"><div style="border: 2px solid #CC99CC; padding:0px; width: 622px; background-image: url('https://img-fotki.yandex.ru/get/6746/163781271.e3/0_dffeb_2cbd5bc7_orig.png'); font-size: 21px; font-family: Georgia; text-shadow: 1px 1px 3px #FFCCFF, -1px -1px 3px #fff , 1px 1px #fff, -1px 0px #fff; color:#330033; box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000;"><div style="width: 622px; height: 350px; padding: 0px; overflow: auto;"><center><br />В это поле пишем всё, что подскажет фантазия. Для начала копируем код рамки и вставляем его в режиме «HTML» в «Новую запись». Затем набираем  свой текст, не забывая стереть мои слова и теги < br />, идущие после них. Когда рамка будет заполнена текстом, справа появится полоса прокрутки.<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
</center><center><a target="_blank" href="//www.liveinternet.ru/users/5550538/profile"><img src="//img-fotki.yandex.ru/get/9811/163781271.a6/0_c842d_6aa9c684_orig.gif" width="13" height="13" border="0" title="Ю Гурбер" alt="" /></a></center></div></div></div></center>

Метки: рамка цветочная (с прокруткой)

Комментарии (0)

Рамка цветочная (с прокруткой)

Понедельник, 06 Марта 2017 г. 07:51 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамка цветочная (с прокруткой)

<center><div style="border: 2px solid #CCFFFF; padding:38px; width: 625px; background: #DDFFAC; background-image: url('https://img-fotki.yandex.ru/get/6802/163781271.e1/0_ddc54_f1fd7b73_orig.jpg'); box-shadow: -1px 23px 41px -25px #000000;"><div style="border: 2px solid #CCFFFF; padding:0px; width: 622px; background-image: url('https://img-fotki.yandex.ru/get/6820/163781271.e3/0_dffec_e8bbff1_orig.png'); font-size: 21px; font-family: Georgia; text-shadow: 1px 1px 3px #CCFFFF, -1px -1px 3px #fff , 1px 1px #fff, -1px 0px #fff; color:#003366; box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000; box-shadow: inset 0 0 20px #000000;"><div style="width: 622px; height: 350px; padding: 0px; overflow: auto;"><center><br />В это поле пишем всё, что подскажет фантазия. Для начала копируем код рамки и вставляем его в режиме «HTML» в «Новую запись». Затем набираем  свой текст, не забывая стереть мои слова и теги < br />, идущие после них. Когда рамка будет заполнена текстом, справа появится полоса прокрутки.<br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
</center><center><a target="_blank" href="//www.liveinternet.ru/users/5550538/profile"><img src="//img-fotki.yandex.ru/get/9811/163781271.a6/0_c842d_6aa9c684_orig.gif" width="13" height="13" border="0" title="Ю Гурбер" alt="" /></a></center></div></div></div></center>

Метки: рамка цветочная (с прокруткой)

Комментарии (0)

Рамка "Розовый текстиль" (с прокруткой)

Понедельник, 06 Марта 2017 г. 07:53 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамка "Розовый текстиль" (с прокруткой)

В это поле пишем всё, что подскажет фантазия. Для начала копируем код рамки и вставляем его в режиме «HTML» в «Новую запись». Затем набираем свой текст, не забывая стереть мои слова и пунктир. (а так же самовольно появившиеся в тексте теги < br />)
.................
.................
.................
.................
.................
Когда рамка будет заполнена текстом, справа появится полоса прокрутки.

<center><table border="0" width="718" height="560" background="//img-fotki.yandex.ru/get/9651/163781271.bd/0_d645e_c1cb5efe_orig.png"><tbody><tr><td><div style="background-image: url(); border-style: r; padding: 22px 50px 0px 70px; background-repeat: no-repeat;"><center><div style="width: 405px; height: 350px; font-size: 21px; font-family: Georgia; color: #fff; text-shadow: 0px 0px #; text-shadow: 1px 1px 3px #fff, -1px -1px 3px #FFCCFF, 1px 1px #fff, -1px 0px #330033; color:#000; padding: 0px; overflow: auto;"><center><i>В это поле пишем всё, что подскажет фантазия. Для начала копируем код рамки и вставляем его в режиме «HTML» в «Новую запись». Затем набираем  свой текст, не забывая стереть мои слова и пунктир. (а так же самовольно появившиеся в тексте теги < br />)<br />
.................<br />
.................<br />
.................<br />
.................<br />
.................<br />
Когда рамка будет заполнена текстом, справа появится полоса прокрутки.</i></center></div><center><a title="Ю Гурбер" href="//www.liveinternet.ru/users/5550538/profile" target="_blank"><img src="//img-fotki.yandex.ru/get/6724/163781271.9b/0_c2448_76dd04e5_orig.gif" alt="" align="center" /></a></center></center></div></td></tr></tbody></table></center>

Метки: рамка "Розовый текстиль" (с прокруткой)

Комментарии (0)

Рамки для текста

Понедельник, 06 Марта 2017 г. 07:55 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамки для текста

*****ВАШ ТЕКСТ*****
Код рамочки вставляем в режиме «HTML», после чего аккуратно стираем этот текст и пишем свой.

<center><table background="https://img-fotki.yandex.ru/get/4712/163781271.f9/0_f3aae_505fec39_orig.jpg" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding:3px; box-shadow: -1px 23px 41px -25px #000000;"><table background="https://img-fotki.yandex.ru/get/9264/163781271.a5/0_c7605_1e019d98_orig.jpg" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding:2px"><table background="https://img-fotki.yandex.ru/get/4712/163781271.f9/0_f3aae_505fec39_orig.jpg" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding:3px;"><table background="https://img-fotki.yandex.ru/get/6811/163781271.c0/0_dcc61_7bbbb8ca_S.jpg" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding:30px; box-shadow:inset rgba(0,0,0,.6) 0 -6px 8px,inset rgba(252,255,255,.6) 0 8px 7px;"><table background="https://img-fotki.yandex.ru/get/4712/163781271.f9/0_f3aae_505fec39_orig.jpg" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding:3px;"><table background="https://img-fotki.yandex.ru/get/9264/163781271.a5/0_c7605_1e019d98_orig.jpg" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding:2px"><table background="https://img-fotki.yandex.ru/get/4712/163781271.f9/0_f3aae_505fec39_orig.jpg" cellpadding="0" cellspacing="0"><tbody><tr><td style="padding:3px"><table background="https://img-fotki.yandex.ru/get/4712/163781271.f9/0_f3aae_505fec39_orig.jpg" cellpadding="0" cellspacing="0" height="100" style="border:0px; box-shadow: inset 0px 0px 18px #000000;" width="614"><tbody><tr><td align="center" style="padding:1px" zzz="zzz"><span style="font-family:Georgia; font-size:20px; text-shadow: 1px 1px 2px #663333, 1px 1px #663333, -1px 0px #660000; color:#fff;"><br />
*****ВАШ ТЕКСТ*****<br />
Код рамочки вставляем в режиме «HTML», после чего аккуратно стираем этот текст и пишем свой.<center><tr><td style="padding:10px" height="1%" align="center"><a href="//www.liveinternet.ru/users/5550538/profile" target="_blank"><img src="https://img-fotki.yandex.ru/get/9092/163781271.9b/0_c2442_24183b9d_orig.gif" title="Ю Гурбер" alt="" /></a></td></tr></center></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></center>

Ещё текстовая рамка

Метки: рамки для текста

Комментарии (0)

Рамка "Зима"

Понедельник, 06 Марта 2017 г. 07:56 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамка "Зима"

Код рамочки вставляем в режиме «HTML», после чего аккуратно стираем этот текст и пишем свой.

<center><table style="width: 635px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 5px, -1px 18px 36px -20px #000000;" background="https://img-fotki.yandex.ru/get/5644/163781271.103/0_10b4d1_9f4f16c7_S.gif" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px"><table style="width: 635px; box-shadow: 0px 0px 7px #000000, 0 0 5px #000000 inset;" background="https://img-fotki.yandex.ru/get/5644/163781271.103/0_10b4d1_9f4f16c7_S.gif" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px"><table style="width: 635px;" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px"><table style="width: 635px; box-shadow: 0px 0px 7px #000000, 0 0 5px #000000 inset;" background="https://img-fotki.yandex.ru/get/15504/163781271.103/0_10b4ce_b99129cd_S.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px" zzz="zzz" align="center"><img src="https://img-fotki.yandex.ru/get/5707/163781271.103/0_10b494_66472e60_XL.png" width="600" height="404" border="0" style="float: center; margin: -15px 0px 0px 0px" /><span style="font-family: Georgia; font-size: 20px; text-shadow: 1px 1px 2px #663399, 1px 1px #663399, -1px 0px #330066; color:#fff;">Код рамочки вставляем в режиме «HTML», после чего аккуратно стираем этот текст и пишем свой.<tr><td style="padding: 7px" zzz="zzz" align="center"><a href="//www.liveinternet.ru/users/5550538/profile" target="_blank"><img src="https://img-fotki.yandex.ru/get/9508/163781271.9b/0_c243b_5afb1b7e_orig.gif" width="15" height="15" border="0" title="Ю Гурбер" alt="" /></a></td></tr></span></td></tr></table></td></tr></table></td></tr></table></td></tr></table></center>

Метки: рамки для текста

Комментарии (0)

Рамка "Зимний пейзаж"

Понедельник, 06 Марта 2017 г. 07:57 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамка "Зимний пейзаж"

Код рамочки вставляем в режиме «HTML», после чего аккуратно стираем этот текст и пишем свой.

<center><table style="width: 635px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 5px, -1px 18px 36px -20px #000000;" background="https://img-fotki.yandex.ru/get/26292/163781271.104/0_10b4d6_6e03bb1c_S.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px"><table style="width: 635px; box-shadow: 0px 0px 7px #000000, 0 0 5px #000000 inset;" background="https://img-fotki.yandex.ru/get/26292/163781271.104/0_10b4d6_6e03bb1c_S.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px"><table style="width: 635px;" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px"><table style="width: 635px; box-shadow: 0px 0px 7px #000000, 0 0 5px #000000 inset;" background="https://img-fotki.yandex.ru/get/3711/163781271.103/0_10b4d3_ea2579e1_orig.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px" zzz="zzz" align="center"><img src="https://img-fotki.yandex.ru/get/45190/163781271.103/0_10b49c_28e044af_XL.png" width="600" height="287" border="0" style="float: center; margin: -15px 0px 0px 0px" /><span style="font-family:Georgia; font-size: 20px; text-shadow: 1px 1px 2px #336633, 1px 1px #336633, -1px 0px #003300; color:#fff;">Код рамочки вставляем в режиме «HTML», после чего аккуратно стираем этот текст и пишем свой.<tr><td style="padding: 8px" zzz="zzz" align="center"><a href="//www.liveinternet.ru/users/5550538/profile" target="_blank"><img src="https://img-fotki.yandex.ru/get/9508/163781271.9b/0_c243b_5afb1b7e_orig.gif" width="15" height="15" border="0" title="Ю Гурбер" alt="" /></a></td></tr></span></td></tr></table></td></tr></table></td></tr></table></td></tr></table></center>

Метки: рамки для текста

Комментарии (0)

Рамка цветочная (сиреневая)

Понедельник, 06 Марта 2017 г. 07:59 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Рамка цветочная (сиреневая)

Код рамочки вставляем в режиме «HTML», после чего аккуратно стираем этот текст и пишем свой.

<center><table style="width: 635px; box-shadow: inset rgba(0,0,0,.5) 0 -4px 5px, inset rgba(252,255,255,.5) 0 4px 5px, -1px 18px 36px -20px #000000;" background="https://img-fotki.yandex.ru/get/15516/163781271.f4/0_f0621_c100c8a0_orig.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px"><table style="width: 635px; box-shadow: 0px 0px 7px #000000, 0 0 5px #000000 inset;" background="https://img-fotki.yandex.ru/get/15516/163781271.f4/0_f0621_c100c8a0_orig.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding: 15px"><table style="width: 635px;" cellspacing="0" cellpadding="0"><tr><td style="padding: 0px"><table style="width: 635px; box-shadow: 0px 0px 7px #000000, 0 0 5px #000000 inset;" background="https://img-fotki.yandex.ru/get/6821/163781271.c3/0_dcd1b_5a8e1682_S.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding-top: 15px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px;"><img src="https://img-fotki.yandex.ru/get/5300/163781271.b1/0_d1a56_e7fbd8bf_L.png" width="238" height="350" border="0" style="float: left; margin: 0px 15px 10px 0px" /><span style="font-family:Georgia; font-size:20px; text-shadow: 1px 1px 2px #660066, -1px -1px 2px #330033, 1px 1px #660066, -1px 0px #330033; color:#fff;">Код рамочки вставляем в режиме «HTML», после чего аккуратно стираем этот текст и пишем свой.<tr><td style="padding:10px" zzz="zzz" align="center"><a href="//www.liveinternet.ru/users/5550538/profile" target="_blank"><img src="https://img-fotki.yandex.ru/get/6730/163781271.9b/0_c244c_80591f15_orig.gif" width="10" height="10" border="0" title="Ю Гурбер" alt="" /></a></td></tr></span></td></tr></table></td></tr></table></td></tr></table></td></tr></table></center>

Метки: рамки для текста

Комментарии (0)

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

Среда, 15 Марта 2017 г. 17:21 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

Хочу представить вам вот такую симпатичную рамку с пунктирной обводкой внутри.
Не правда ли, похоже на прошивку? Этим можно играть, подбирая тканевые цвета. Например, голубой (чем не джинс?)

Текст
Ваша подпись

<center><div style="padding: 10px 10px; background: #FE9980; width: 610px; font-size: 27px; font-family: Monotype Corsiva; color: #fff; border: 2px dashed #fff; border-radius: 3px; box-shadow: 0 0 0 5px #FE9980, 3px 2px 7px 4px rgba(10,10,0,.5); text-shadow: -1px -1px #aa3030;">Текст<br /> <center><a href="ССЫЛКА НА ВАШ БЛОГ" target="_blank"><font face="Georgia" color="#ffffff" style="font-size:18px">Ваша подпись</font></a></center></div></center>

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

Метки: рамки

Страницы:

[1]

LiveInternetLiveInternet

-Рубрики

-Поиск по дневнику

-Подписка по e-mail

-Статистика

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

Набор цветных окошек для кодов

Интервалы в тексте

Как взять код изображения с ЯФ

Цветное окошко для кода

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

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

Рамочки с закруглёнными углами

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

Таблица "безопасных" цветов

Рамка "В ожидании чуда" (с прокруткой)

Рамка сиреневая (с прокруткой)

Рамка коричневая (с прокруткой)

Рамка цветочная (с прокруткой)

Рамка цветочная (с прокруткой)

Рамка "Розовый текстиль" (с прокруткой)

Рамки для текста

Рамка "Зима"

Рамка "Зимний пейзаж"

Рамка цветочная (сиреневая)

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