Несколько вариантов оформления картинок в блоге с использованием 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