Несколько вариантов оформления картинок в блоге с использованием CSS.

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

1. Самый простой вариант это когда изображения выстраиваются в ряд без всякого оформления. Здесь просто подряд прописываем несколько тегов <img> в код. Мы можем создать целую галерею и если часть картинок не входят по ширине, то они просто переносятся на следующую строку.

Пишем так -
 
  <img src="адрес картинки. jpg" alt="Фото 1" width="130" height="130">
 <img src=" адрес картинки jpg" alt="Фото 2" width="130" height="130">
  <img src="адрес картинки jpg " alt="Фото 3" width="130" height="130">
 <img src="адрес картинки jpg " alt="Фото 4" width="130" height="130">
 <img src="адрес картинки jpg " alt="Фото 5" width="130" height="130">
Тут, думаю всё понятно. Адрес картинки, надпись, ширина и высота. Следует просто знать для понимания, что пробелы между картинками появляются из за того, что каждое фото в коде прописано с новой строки. Если нужно без пробелов, соответственно, все <img> нужно писать подряд.

В блогере всё это вставляем прямо в редакторе сообщения, перейдя в режим HTML.

В результате имеем.


2. Сейчас, чтобы картинки не казались совсем скучными, добавим к ним немного стилевого оформления . Пока добавим просто рамку и сделаем контур вокруг картинки в цвете.
<style>
   .thumb img  {
    border: 3px solid #003399 ; /* ширина и цвет рамки вокруг фото */
    padding: 20px; /* расстояние от картинки до рамки */
    background: #999999 ; /* Цвет фона */
    margin-right: 10px; /* отступ справа */
    margin-bottom: 10px; /* отступ снизу */
   }
  </style>

<div class="thumb">
<img alt="Фото 1" height="120" src=" адрес картинки 1" width="130" />
<img alt="Фото 2" src=" адрес картинки 2" height="130" width="130" />
<img alt="Фото 3"  src=" адрес картинки 3 " height="130" width="1330" />
<img alt="Фото 4" src=" адрес картинки 4 " height="130" width="130" />
</div>
Результат.


3. Эффект Паспарту. Он делает картинку намного привлекательнее для посетителей. Если обратиться к Википедии, читаем -

Паспарту́ (фр. passe partout) — кусок картона или бумаги с вырезанным в его середине четырёхугольным, овальным или круглым отверстием под рамку, в которую вставляют фотографию, рисунок или гравюру. Это позволяет свободнее подбирать размер рамки под размер изображения. 
Попробуем сделать такую фишку в блоге. Опять же, используя стили CSS. С помощью свойства  padding зададим ширину всего пространства вокруг изображения и с помощью background - его цвет.
<style>
   .passeparty {
    padding: 40px; /* Размер паспарту */
    background: #f0f0f0; /* Цвет фона */
    border: 2px solid #003399 ; /* Толщина и цвет рамки */
    display: inline-block;
margin: 0;
   }
   .passeparty img {
    border: 6px solid #006666 ; /* Толщина и цвет рамки вокруг изображения */
   }
  </style>

<figure class="passeparty">
   <img alt="Название" src="Адрес изображения" height="220" width="220" />
  </figure>
Результат.


4. И решила , чтобы не писать отдельный пост показать ещё интересный вариант при работе с изображениями. Не нужно прибегать к сторонним редакторам, чтобы отобразить картинку вверх ногами или повернуть на 180%.
В примере  добавляется обычное изображение, а затем оно же, но отражённое по вертикали. Для этого к <img> добавляется класс с именем mirrorY. И применим свойство transform и функция scale() с отрицательным значением.

Обычно они такие -
transform: scale(-1, 1) — отражение по горизонтали;
transform: scale(1, -1) — отражение по вертикали;
transform: scale(-1, -1) — одновременное отражение по горизонтали и вертикали.

Это можно применять и к текстовым элементам.
<style>
   .mirrorY { transform: scale(1, -1); }
  </style>

 <img src=" адрес картинки" alt="На метле">
  <img src="адрес картинки" alt="На метле" class="mirrorY">
Результат.


Спам Спам

Таким образом, используя свойства CSS можно легко и со вкусом оформить изображения в блоге не прибегая к сторонним редактором.

Статьи по теме.

Как работать с изображениями в блоге.
Наложение картинки на картинку.

И у меня сегодня всё. Спасибо за ваш визит и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Да, Ирина. Вот так просто всё можно сделать.

    ОтветитьУдалить
  2. Виктория, целый год прошел, как ты сделала этот пост. И вот он мне пригодился. Вроде получилось. БОЛЬШОЕ СПАСИБО!!! Посмотри мой Волшебный фонарик!

    ОтветитьУдалить
  3. Ирина, хорошо что пригодилось. Посмотрела и немного бы подкорректировала. Дело в том, что у тебя картинки и так в рамке по Блоггеровским настройкам. Пост об этом http://www.shpargalochki.ru/2014/04/ubrat-ramku-vokrug-izobrazhenija.html Комментарии тоже прочитай. Ну это дело личное.
    А в коде ещё добавлена рамка border: 3px solid #003399 ; Как - то глаз режет.
    А то что получилось очень радует.

    ОтветитьУдалить
  4. Доброго времени суток Вика, подскажите, а как под картинками сделать надпись в 2 строки и чтоб они были кликабельны (надпись).

    ОтветитьУдалить
  5. Тата, вы имеете в виду, как здесь. Посмотрите https://bvd-2.blogspot.com/2018/12/blog-post.html

    ОтветитьУдалить
  6. Вика, вот на примере показала https://vk.cc/8Pdnn3 под каждой картинкой текст и если можно чтоб они были кликабельны.

    ОтветитьУдалить
    Ответы
    1. Tata, можно. но это совсем другой код будет. чуть позже напишу.

      Удалить
  7. Вика, спасибо, буду ждать!

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск