Делаем красивую рамку для блоков

Красивая (декоративная) рамка для элементов через CSS
В этой статье пойдет речь о том, как сделать красивую, декоративную рамку для изображений в сообщениях блога, постов или блоков гаджетов в своем 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.
- 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 { 
 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;
}

Так что пробуйте и экспериментируйте.

15 комментариев:

  1. Спасибо, хороший у тебя блог! Для цмсс-хтмл чайника, причем ленивого и не желающего особо вникать "вглубь материи" - самое оно!)))

    ОтветитьУдалить
    Ответы
    1. Спасибо за приятный комментарий :). Значит не зря стараюсь ;)

      Удалить
    2. Очень не зря. Спасибо тебе.

      Удалить
    3. И вам спасибо что заглянули :)

      Удалить
  2. Спасибо! Очень полезная статья!

    ОтветитьУдалить
  3. Огромное спасибо, очень ценный для материал. Можете еще подсказать, если хочу в рамку взять видео, то куда вставлять этот скрипт?

    ОтветитьУдалить
    Ответы
    1. Возьмите HTML код с видео-вставкой в дополнительный контейнер и присвойте ему какой-нибудь селектор (идентификатор) - <div id='my-video'>ТУТ КОД ВИДЕО ВСТАВКИ</div> - и уже для этого контейнера добавьте CSS рамки
      #my-video {
      стили декоративной рамки
      }
      CSS добавляете туда же где все остальные стили у вас записаны

      Удалить
    2. нихао, подскажи как этот код подтянуть http://yandex-tester.blogspot.ru/

      Удалить
  4. P.S. если не трудно подскажите еще и про гаджеты, как их взять в рмаку, ПЛиззз

    ОтветитьУдалить
    Ответы
    1. Про гаджеты тут воял - http://www.magentawave.com/2012/02/change-widget-style.html и тут http://www.magentawave.com/2012/03/how-chenge-gadget-in-template-blogger.html
      Все также - указываете селектор нужного гаджета и прописываете для него CSS рамки.

      Удалить
  5. Анонимный21.11.2013, 22:36

    Этот комментарий был удален администратором блога.

    ОтветитьУдалить
    Ответы
    1. Содержимое удалено по причинам - http://www.magentawave.com/p/comments.html

      Теперь дальше, в вашем коде огромное множество ошибок сравните и старайтесь быть внимательнее если пишите код сами. Вот то что вам нужно:
      http://cssdeck.com/labs/ivouvggp

      Удалить
    2. Анонимный23.11.2013, 12:23

      Спасибо большое за ответ! Поняла свои нелепые ошибки. Теперь всё получилось (пока на тестовом блоге).

      (Счастливая :) )

      Удалить

Следующее Предыдущее

BestProject