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


4 комментария:

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

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

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

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

Пользовательский поиск
Foto Saya
My Photo