Объемная рамочка и объяснение к ней
01-02-2015 18:14
к комментариям - к полной версии
- понравилось!
вверх^
к полной версии
понравилось!
в evernote
На этот раз хочу поделиться более сложными шаблонами, в которых можно не только менять цвет фона, но и сделать фоном изображение.
В представленной рамке фон-изображение вставляется в верхний слой снаружи.
Итак, первым в коде рамки стоит атрибут border:2px solid #EBE3D4; (тонкий бордюр-обводка), где 2 — его ширина в пикселях, а #EBE3D4 — его цвет.
Обозначение цвета: #EBE3D4 , просто оставляем решётку # , убираем EBE3D4 , и ставим свой цвет.
Далее стоит атрибут width:635px; (ширина рамки), вместо 635 указываем нужный размер.
Затем padding:18px; — это ширина верхнего слоя (расстояние от наружнего тонкого бордюра до внутреннего), при необходимости меняем 18 на другую цифру.
Дальше видим строку для вставки фона-изображения:
background-image: url('http://img0.liveinternet.ru/images/attach/c/9/106/500/106500448_0_a1eec_245b045d_L.gif');.
Я специально не стала убирать код фона, чтоб было видно, какую часть кода нужно вставлять внутри скобок. Всё, что в скобках, удаляем ( не затрагивая одинарных кавычек ) и подставляем своё изображение (код).
Затем задаём цвет тонкому бордюрчику 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; — цвет.
В представленной рамке фон-изображение вставляется в верхний слой снаружи.
Итак, первым в коде рамки стоит атрибут border:2px solid #EBE3D4; (тонкий бордюр-обводка), где 2 — его ширина в пикселях, а #EBE3D4 — его цвет.
Обозначение цвета: #EBE3D4 , просто оставляем решётку # , убираем EBE3D4 , и ставим свой цвет.
Далее стоит атрибут width:635px; (ширина рамки), вместо 635 указываем нужный размер.
Затем padding:18px; — это ширина верхнего слоя (расстояние от наружнего тонкого бордюра до внутреннего), при необходимости меняем 18 на другую цифру.
Дальше видим строку для вставки фона-изображения:
background-image: url('http://img0.liveinternet.ru/images/attach/c/9/106/500/106500448_0_a1eec_245b045d_L.gif');.
Я специально не стала убирать код фона, чтоб было видно, какую часть кода нужно вставлять внутри скобок. Всё, что в скобках, удаляем ( не затрагивая одинарных кавычек ) и подставляем своё изображение (код).
Затем задаём цвет тонкому бордюрчику 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; — цвет.
Комментарии (3):
Vlada_Glinskaya
25-03-2017-10:15
удалить
E-Ledi, Пожалуйста!
Комментарии (3):
вверх^
Вы сейчас не можете прокомментировать это сообщение.
Дневник Объемная рамочка и объяснение к ней | Vlada_Glinskaya - Мой дневник |
Лента друзей Vlada_Glinskaya
/ Полная версия
Добавить в друзья
Страницы:
раньше»