В этой статье пойдет речь о том, как сделать красивую, декоративную рамку для изображений в сообщениях блога, постов или блоков гаджетов в своем Blogger, и тем самым придать его оформлению еще большей уникальности. Сделать это довольно просто, достаточно изготовить или выбрать подходящую картинку и добавить в нужное место 5 строк свойств CSS и ваша декоративная рамка готова. А вот каких и куда, об этом сейчас и узнаем.
Все мы знаем что за рамки вокруг блоков отвечает такое стилевое свойство как border - оно универсальное, и с помощью него можно указать ширину и цвет этой самой рамки. А вот чтобы сделать ракой изображение существует такое стилевое свойство как border-image , вот оно-то нам и нужно. Для затравки покажу как все это выглядит.
Браузер Internet Explorer, всех версий, не поддерживает данную запись стиля и не отображает её. По-этому в универсальном свойстве border вы можете указать специально для него определенный цвет.
Я долго не усердствовал - выбрал картинку рамки и уменьшил в графическом редакторе, но не это главное, вы сделаете уже сами такую какую захотите по качеству и дизайну. А я использовал изображение, которое вы видите ниже слева:Причем, это реальный размер используемого изображения, ни разрезать, ни делить его не нужно. При использовании в качестве рамки оно делится стилем на фрагменты автоматически (как показано на рисунке справа) ,при этом нужно только указать размеры фрагментов (в процентах или в пикселях), предварительно их вычислив и загрузив изображение на хостинг, для получения ссылки.
А код будет таким:
border: 40px; /*задает общую ширину рамки*/
-moz-border-image: url("http://ramka.png") 40 35 40 35 repeat; /*стилевое св-во для Firefox*/
-webkit-border-image: url("http://ramka.png") 40 35 40 35 repeat; /*стилевое св-во для Chrome*/
-o-border-image: url("http://ramka.png") 40 35 40 35 repeat; /*стилевое св-во для Opera*/
border-image: url("http://ramka.png") 40 35 40 35 repeat;
Теперь разберем запись url("http://ramka.png") 40 35 40 35 repeat.-moz-border-image: url("http://ramka.png") 40 35 40 35 repeat; /*стилевое св-во для Firefox*/
-webkit-border-image: url("http://ramka.png") 40 35 40 35 repeat; /*стилевое св-во для Chrome*/
-o-border-image: url("http://ramka.png") 40 35 40 35 repeat; /*стилевое св-во для Opera*/
border-image: url("http://ramka.png") 40 35 40 35 repeat;
- url("http://ramka.png") - это ссылка на изображение;
- 40 35 40 35 - это размеры фрагментов, на которые будет резаться это изображение, записываются в таком порядке: вверх, право, низ, лево;
- repeat - значение для фрагментов.
Также есть значения round (не поддерживается в Safari и Chrome и заменяется на repeat) и stretch - оно обычно по умолчанию.
Для того чтобы не мучатся, вычисляя необходимые значения, есть вот такой сервис - border-image.com , которой помогает разделить изображение, с показом готового результата, вам останется только взять готовый код, вставить ссылку на загруженную картинку и разместить его в нужном месте вашего шаблона.
Как применять декоративную рамку в блоге на Blogger
Тут все просто. В коде шаблона находите нужный идентификатор и добавляете к нему строки этого стиля. Где что есть можно посмотреть в разделе CSS и Blogger.Например, если рамку нужно придать всем изображениям в сообщениях, то идем "Шаблон" -> "Изменить HTML" и находим там такую строчку:
/* Posts
----------------------------------------------- */
А ниже селектор .post-body img, для которого и добавляем стиль рамки. ----------------------------------------------- */
Запись может выглядеть как:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img,
В таком случаи, все что после .post-body img вместе со стилями спускаем ниже и записываем стиль только для .post-body img.
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img,
В таком случаи, все что после .post-body img вместе со стилями спускаем ниже и записываем стиль только для .post-body img.
Окончательный вариант будет, примерно таким:
.post-body img {
border: 40px;
-moz-border-image: url("http://ramka.png") 40 35 40 35 repeat;
-webkit-border-image: url("http://ramka.png") 40 35 40 35 repeat;
-o-border-image: url("http://ramka.png") 40 35 40 35 repeat;
border-image: url("http://ramka.png") 40 35 40 35 repeat;
}
border: 40px;
-moz-border-image: url("http://ramka.png") 40 35 40 35 repeat;
-webkit-border-image: url("http://ramka.png") 40 35 40 35 repeat;
-o-border-image: url("http://ramka.png") 40 35 40 35 repeat;
border-image: url("http://ramka.png") 40 35 40 35 repeat;
}
Так что пробуйте и экспериментируйте.
Спасибо, хороший у тебя блог! Для цмсс-хтмл чайника, причем ленивого и не желающего особо вникать "вглубь материи" - самое оно!)))
ОтветитьУдалитьСпасибо за приятный комментарий :). Значит не зря стараюсь ;)
УдалитьОчень не зря. Спасибо тебе.
УдалитьИ вам спасибо что заглянули :)
УдалитьСпасибо! Очень полезная статья!
ОтветитьУдалитьРад что помог, заходите еще :)
УдалитьОгромное спасибо, очень ценный для материал. Можете еще подсказать, если хочу в рамку взять видео, то куда вставлять этот скрипт?
ОтветитьУдалитьВозьмите HTML код с видео-вставкой в дополнительный контейнер и присвойте ему какой-нибудь селектор (идентификатор) - <div id='my-video'>ТУТ КОД ВИДЕО ВСТАВКИ</div> - и уже для этого контейнера добавьте CSS рамки
Удалить#my-video {
стили декоративной рамки
}
CSS добавляете туда же где все остальные стили у вас записаны
нихао, подскажи как этот код подтянуть http://yandex-tester.blogspot.ru/
УдалитьP.S. если не трудно подскажите еще и про гаджеты, как их взять в рмаку, ПЛиззз
ОтветитьУдалитьПро гаджеты тут воял - http://www.magentawave.com/2012/02/change-widget-style.html и тут http://www.magentawave.com/2012/03/how-chenge-gadget-in-template-blogger.html
УдалитьВсе также - указываете селектор нужного гаджета и прописываете для него CSS рамки.
Круто!!!!!!!!!!! )))
ОтветитьУдалитьЭтот комментарий был удален администратором блога.
ОтветитьУдалитьСодержимое удалено по причинам - http://www.magentawave.com/p/comments.html
УдалитьТеперь дальше, в вашем коде огромное множество ошибок сравните и старайтесь быть внимательнее если пишите код сами. Вот то что вам нужно:
http://cssdeck.com/labs/ivouvggp
Спасибо большое за ответ! Поняла свои нелепые ошибки. Теперь всё получилось (пока на тестовом блоге).
Удалить(Счастливая :) )