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

May 29, 2019 19:57

Это цитата сообщения Юлия_Гурбер Прочитать целиком

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

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

Ваша подпись

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;">
Здесь будет ваш текст

Ваша подпись


Итак, первым в коде рамки стоит атрибут border:2px solid #EBE3D4; (тонкий бордюр-обводка), где 2 - его ширина в пикселях, а #EBE3D4 - его цвет.
Обозначение цвета: #EBE3D4 , просто оставляем решётку # , убираем EBE3D4 , и ставим свой цвет.

Далее стоит атрибут width:635px; (ширина рамки), вместо 635 указываем нужный размер.

Затем padding:18px; - это ширина верхнего слоя (расстояние от наружнего тонкого бордюра до внутреннего), при необходимости меняем 18 на другую цифру.

Дальше видим строку для вставки фона-изображения:
background-image: url(https://img-fotki.yandex.ru/get/6846/163781271.c8/0_dce0f_53e73c4b_XXS.jpg);.
Я специально не стала убирать код фона, чтоб было видно, какую часть кода нужно вставлять внутри скобок. Всё, что в скобках, удаляем ( не затрагивая одинарных кавычек ) и подставляем своё изображение (код).

Затем задаём цвет тонкому бордюрчику border:2px solid #EBE3D4;,
как и в самом начале.

Далее меняем значение цвета тут: background:#E2D6C1; , это фон для записи.

Осталось выделить строку стиля, размера и цвета шрифта:
font-family:Georgia; font-size:19px; font-style:italic; color:#663300; ,
где font-family:Georgia; - стиль. Можно поменять Georgia , например, на Monotype Corsiva .
font-size:19px; - размер. Вместо 19 любой другой.
color:#663300; - цвет.

Подготовила Юлия Гурбер

Р/S от rusalka5555: Чтобы фон рамочки появился на жж, в коде где адрес фона нужно убрать запятые в начале кода и в конце, а на лире с запятыми

шаблоны рамок, #ebe3d4, #e2d6c1, уроки, рамки

Previous post Next post
Up