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

Воскресенье, 04 Ноября 2018 г. 23:30 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

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

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

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

Ваша подпись

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

Рубрики:

Фотошоп/Рамочки

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

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

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

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

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

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

<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="//www.liveinternet.ru/journal_proc.php?action=redirect&url=ССЫЛКА НА ВАШ БЛОГ" target="_blank"><font face="Georgia" color="#ffffff" style="font-size:18px">Ваша подпись</font></a></center></div></center>

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

Рубрики:

Фотошоп/Рамочки

Метки: рамочки

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

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

Воскресенье, 04 Ноября 2018 г. 23:25 + в цитатник
Это цитата сообщения Юлия_Гурбер [Прочитать целиком + В свой цитатник или сообщество!]

Фоновое изображение в рамке. Часть 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 href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=ССЫЛКА НА ВАШ БЛОГ" target="_blank"><span style="font-size: 0.9em">Ваша подпись</span></a></center></center></div></div></center>

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

Рубрики:

Фотошоп/Рамочки

Метки: рамочки

Страницы:

[1]

LiveInternetLiveInternet

-Рубрики

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

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

-Постоянные читатели

-Сообщества

-Статистика

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

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

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