Привет, друзья. Сегодня самая простая шпаргалка для начинающих блогеров о том, как можно разместить несколько изображений в блоге горизонтально и красиво их оформить. Я немного затрагивала эту тему здесь, а вопросы появляются и поэтому решила показать более подробно о вариантах размещения и оформления картинок в сообщении.
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. Сейчас, чтобы картинки не казались совсем скучными, добавим к ним немного стилевого оформления . Пока добавим просто рамку и сделаем контур вокруг картинки в цвете.
3. Эффект Паспарту. Он делает картинку намного привлекательнее для посетителей. Если обратиться к Википедии, читаем -
4. И решила , чтобы не писать отдельный пост показать ещё интересный вариант при работе с изображениями. Не нужно прибегать к сторонним редакторам, чтобы отобразить картинку вверх ногами или повернуть на 180%.
В примере добавляется обычное изображение, а затем оно же, но отражённое по вертикали. Для этого к <img> добавляется класс с именем mirrorY. И применим свойство transform и функция scale() с отрицательным значением.
Обычно они такие -
transform: scale(-1, 1) — отражение по горизонтали;
transform: scale(1, -1) — отражение по вертикали;
transform: scale(-1, -1) — одновременное отражение по горизонтали и вертикали.
Это можно применять и к текстовым элементам.
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">
В блогере всё это вставляем прямо в редакторе сообщения, перейдя в режим 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>
Результат..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. Эффект Паспарту. Он делает картинку намного привлекательнее для посетителей. Если обратиться к Википедии, читаем -
Попробуем сделать такую фишку в блоге. Опять же, используя стили CSS. С помощью свойства padding зададим ширину всего пространства вокруг изображения и с помощью background - его цвет.
Паспарту́ (фр. passe partout) — кусок картона или бумаги с вырезанным в его середине четырёхугольным, овальным или круглым отверстием под рамку, в которую вставляют фотографию, рисунок или гравюру. Это позволяет свободнее подбирать размер рамки под размер изображения.
<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>
Результат..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">
Результат..mirrorY { transform: scale(1, -1); }
</style>
<img src=" адрес картинки" alt="На метле">
<img src="адрес картинки" alt="На метле" class="mirrorY">


Таким образом, используя свойства CSS можно легко и со вкусом оформить изображения в блоге не прибегая к сторонним редактором.
Статьи по теме.
Как работать с изображениями в блоге.
Наложение картинки на картинку.
И у меня сегодня всё. Спасибо за ваш визит и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Здорово! Пригодится!
ОтветитьУдалитьДа, Ирина. Вот так просто всё можно сделать.
ОтветитьУдалитьВиктория, целый год прошел, как ты сделала этот пост. И вот он мне пригодился. Вроде получилось. БОЛЬШОЕ СПАСИБО!!! Посмотри мой Волшебный фонарик!
ОтветитьУдалитьИрина, хорошо что пригодилось. Посмотрела и немного бы подкорректировала. Дело в том, что у тебя картинки и так в рамке по Блоггеровским настройкам. Пост об этом http://www.shpargalochki.ru/2014/04/ubrat-ramku-vokrug-izobrazhenija.html Комментарии тоже прочитай. Ну это дело личное.
ОтветитьУдалитьА в коде ещё добавлена рамка border: 3px solid #003399 ; Как - то глаз режет.
А то что получилось очень радует.
Доброго времени суток Вика, подскажите, а как под картинками сделать надпись в 2 строки и чтоб они были кликабельны (надпись).
ОтветитьУдалитьТата, вы имеете в виду, как здесь. Посмотрите https://bvd-2.blogspot.com/2018/12/blog-post.html
ОтветитьУдалитьВика, вот на примере показала https://vk.cc/8Pdnn3 под каждой картинкой текст и если можно чтоб они были кликабельны.
ОтветитьУдалитьTata, можно. но это совсем другой код будет. чуть позже напишу.
УдалитьВика, спасибо, буду ждать!
ОтветитьУдалить