Делаем изображения на сайте с любым отступом от рамки

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

Делается это при помощи стилей CSS, т.е. не нужно будет изменять фотографии и снова загружать на хостинг, или что-то рисовать в Photoshop. Все намного проще.

Для начала посмотрим, о чем идет речь. Вот наглядный пример:

wpnew.ru

Что мы здесь видим:

  • Само изображение (черный текст на сером фоне). Оригинальное изображение, без CSS вокруг, можно посмотреть по этой ссылке http://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg.

  • Желтая рамка вокруг изображения. Она имеет неравномерные отступы сверху, снизу и по краям (аля Polaroid).

  • Тоненькая рамка в 1px темно-серого цвета вокруг желтой рамки.

Если заинтересовались конкурсом, который анонсирован на картинке, сельву пле http://wpnew.ru (срок: с 30 января 2013 по 28 февраля 2013).

Как такое сделать

Итак, теперь вы поняли о чем будет вестись дальше речь. Скажу сразу: вы можете выбирать любые цвета для рамок. Я постарался подобрать такие, которые бы отличались и были заметны на любом мониторе. Для этого даже пришлось немного изменить стили сайта Wpnew.ru (как всегда помогает FireBug): сделать фон более серым, текст черным, убрать рекламу. Поэтому не удивляйтесь, кто читает Петра Александрова.

Делаем (условно) желтую рамку

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

Вот так выглядит код картинки, когда я только ее загрузил в статью обычным способом на WordPress (встроенным загрузчиком, которым пользуетесь и вы):

<img class="aligncenter size-full wp-image-2437" title="картинка" src="http://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt="картинка" width="512" height="210" />

А вот так будет выглядеть код картинки, если добавить задний фон желтого цвета с отступом:

<img style="background:#FFE296;padding:15px 8px 25px 8px;" class="aligncenter size-full wp-image-2437" title="картинка" src="http://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt="картинка" width="512" height="210" />

И наглядный результат:

картинка

Самые внимательные из вас заметили, что добавилось style="background:#FFE296;padding:15px 8px 25px 8px;", которое и задало необходимые нам параметры:

  • style=" " - конструкция, в которой мы описываем необходимые нам свойства CSS.

  • background:#FFE296; - задаем задний фон. Здесь #FFE296 обозначает желтый оттенок. Вы можете выбрать любой другой (воспользуйтесь пипеткой FastStone Capture или такой же пипеткой в Photoshop).

  • padding:15px 8px 25px 8px; - внутренний отступ, где отступы задаются так padding: сверху справа снизу слева;

Делаем наружную рамку серого цвета

В данном случае это будет действительно рамкой. Задается она так:

border:1px solid #CCCCCC;

Здесь у нас параметр border (рамка): 1px (толщина) solid (непрерывная) #cccccc (цвет).

Теперь осталось совместить рамку и задний фон, чтобы получить эффект, как показано на первой картинке к статье:

<img style="background:#fff;padding:15px 8px 25px 8px;border:1px solid #CCCCCC;" class="aligncenter size-full wp-image-2437" title="картинка" src="http://mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt="картинка" width="512" height="210" />

Как сделать это у себя на сайте

Есть два способа как такое сделать для фотографий/изображений на ваших сайтах:

  • Вставлять определенный код в каждую фотографию/картинку в статье (режим HTML в админке сайта, во время написания статьи).
  • Прописать этот код один раз в файле стилей шаблона (style.css или аналог) и забыть навсегда о рутине.

Как у первого, так и второго способа есть свои плюсы и минусы. Давайте по-порядку.

Вставляем код вручную в каждую картинку

Как уже говорилось выше, необходимо загрузить картинку на сайт как вы это обычно делаете и перейти на вкладку HTML в админке, чтобы вставить код в изображение, как я это показывал на примере.

Преимущество подобного способа: можно менять расцветки фона и рамки для каждого изображения, исходя из цветовой гаммы самого изображения. Так же плюсом данного способа будет относительная легкость выполнения, т.к. не нужно лезть в файл стилей шаблона и что-то там искать, а затем править.

Недостаток: это рутина, которая может не понравится большинству. Так же придется вручную пройтись по старым записям и добавить нужный код (чтобы весь сайт смотрелся гармонично).

Автоматическая подстановка стилей для изображения

При данном способе достаточно один раз прописать необходимые стили для изображения, чтобы они автоматически добавлялись в каждой статье. Для этого нам понадобится файл стилей шаблона (style.css, css.css или еще как-то будет называться).

При помощи бесплатного дополнения для браузеров FireBug (посмотрите видео с моего канала YouTube, где наглядно показаны принципы работы) находим класс элемента, отвечающего за отображения контента на странице, а затем прописываем для него указанные выше в статье стили.

К примеру: у меня на сайте за внешний вид тела статьи (фон, рамка, шрифт, цвет шрифта и прочее) отвечает класс post. По этой причине, в файле style.css я у себя сделаю с новой строки вот такую запись:

.post img {background:#fff;padding:15px 8px 25px 8px;}

В результате все картинки внутри статьи автоматически получат рамку серого цвета и задний белый фон с отступом. Обратите внимание, что я добавил img в код: это для того, чтобы указанные стили применялись только для изображений.

Вы так же внимательно пройдитесь по файлу стилей, прежде чем создавать новое правило. Быть может уже есть .post img (условно говоря) и вам останется лишь подправить в нем параметры.

Плюс данного способа: сделали один раз и забыли.

Минус: часть из вас сейчас сидит и моргает в недоумении глазами - "ничего не понял(а)".

Послесловие

Надеюсь, доступно объяснил принцип оформления изображений. Если что-то не поняли, то еще раз перечитайте статью и только затем пишите в комментарии с вопросами реализации.

Помните: "Кто захочет, тот поймет!". Удачи в блогерстве и конкурсах.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 6 комментариев
  1. Полина (3 комм.):
    http://novtrail.ru

    Спасибо, все ясно написано. Минус: часть из вас сейчас сидит и моргает в недоумении глазами - "ничего не понял(а)".!!!((( Я пытаюсь, но дремучий лес сайтостроения с огромным трудом поддается. Буду разбираться.Так же как и у вас, учусь у http://wpnew.ru.

  2. Rimskij (2 комм.):
    http://mixyblog.ru/

    Классный блог) Буду чаще заходить к тебе)

  3. Alex Fly (3 комм.):
    http://alexfly.nnov.ru

    Привет! Часто читаю блог, забываю спасибо сказать. Спасибо!

  4. Alex Fly (3 комм.):
    http://alexfly.nnov.ru

    Привет!
    А как сделать постоянную рамку для определённого типа файлов, например только для .jpg?

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Написать свою функцию, которая будет определять формат изображения и задавать ему свой class. После этого останется задать стили оформления

      • Alex Fly (3 комм.):
        http://alexfly.nnov.ru

        К сожалению не знаю как это сделать...

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.78MB | MySQL:68 | 1,431sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html