Информация о материале

Категория: Разделы

Просмотров: 39860

Генератор для просмотра изображений и создания несложных открыток.

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

Как работать с генератором.

Если Вы только хотите посмотреть как будет смотрится фоновый рисунок (паттерн), который заполнит весь блок - то это просто.
В форме находим синюю кнопку При нажатии выпадает блок с формой для вставки URL адреса интересующего Вас изображения.

Взять ссылку : наведите курсор мышки на желаемую картинку , кликните правой кнопкой мышки и в выпавшем окне выберите пункт
«Копировать адрес изображения» . Далее клик в нужном поле правой кнопкой и выбираем в выпавшем окне пункт «Вставить»>>> «Продолжить» .

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

После нажимаем зелёную кнопку Смотреть результат - откроется новое окно с картинкой, которую Вы хотите увидеть.

---

Ну , а если Вы желаете увидеть как будет смотреться та или иная надпись вместе с цветком и на каком-то интересном фоне - тогда делаем следующее:

Для начала выбираем изображения те , которые вы хотите увидеть - четыре картинки.
Далее:

1) Вставляем 1-й рисунок , как делали ранее (можно вставить и гиф) - жмём кнопку >>> в появившейся форме вставляем адрес картинки >>> продолжить. Кстати , ссылки на картинки Вы можете брать и с других ресурсов.Первый рисунок может быть в любом формате (PNG , GIF или JPG ...) с фоном или без - в отличии от следующих картинок.
2) Добавляем 2-й фоновый рисунок > нажимаем на кнопку добавить 2-й рисунок в форме вставляем адрес.

3) Добавляем 3-й фоновый рисунок (аналогично предыдущим).

4) Обязательная картинка - это то изображение, которое будет находиться поверх всех предыдущих фонов.Его вставляем обязательно - это поле закрывает код.

5) Далее делаем всё то что и при простом просмотре - нажимаем создать >>> смотреть результат.

Разница между добавляемыми изображениями в размерах , показываемых в процентах относительно блока в котором они будут загружены.

Если Вы желаете изменить расположение одного из рисунков то, атрибуты , которые помогают разместить картинки в необходимых местах блока выглядят так:
no-repeat - фон не повторяется (показывается одна картинка - удалив этот тег рисунок будет повторяться , пока не заполнит весь блок )

center/100% - фоновый рисунок располагается по центру и занимать весь блок на 100%.

left bottom/30% - изображение показывается в левом(left) , нижнем(bottom) углу , и имеет размер всего 30% от размера блока .

right top/50% - изображение показывается в правом(right) , верхнем(top) углу , и имеет размер всего 50% от размера блока.
Менять размеры в коде можно прямо в нижней форме, но лучше создайте текстовый документ , скопируйте код и меняйте данные в блокноте, после вставляем в самую нижнюю форму и жмём смотреть результат.

Здесь показаны несколько ссылок для пробы. Вставляем их по порядку дабы понять работу формы.

Клик по ссылке в зелёном и строка скопирована.

1-й Рисунок - https://effects1.ru/gallery/fon/pattern/1-Cvety/cvety-27-0.jpg

2-й фоновый рисунок - https://effects1.ru/gallery/Klipart/Arhitektura/Cerkov/kupol-28-0.png

3-й фоновый рисунок - https://effects1.ru/gallery/GIF/salyut-PNG/iskra-17-0.gif

4-й Обязательный рисунок - https://effects1.ru/gallery/Pozhelaniya/3-vecher/vecher-9-0.png

Картинки лучше брать большой размер «https://effects1.ru/gallery/Pozhelaniya/3-vecher/vecher-9-0.png» (ноль в конце ссылки указывает на оригинальный размер ,примерно 800 x 600, загруженный на сайт) потому как маленькие размеры vecher-9.png (без нолика перед расширением 250 x 210px) при увеличении сильно теряют в качестве.

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

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

Сочетание клавиш в разных браузерах могут отличаться но в Яндекс браузере так:
Ctrl+Alt+1 - Выделенная область
Ctrl+Alt+2 - Весь экран
Ctrl+Alt+3 - Вся веб страница
На клавиатуре :
PrtSc.. - клавиша на клавиатуре начинается с таких символов

Если Вы хотите поэкспериментировать с кодом и мгновенным результатом(без размещения кода на сайте) — выполняем следующие действия:
1)Скопируйте код или сделайте с помощью формы
2)В нижней части генератора перед кнопкой СМОТРЕТЬ РЕЗУЛЬТАТ вставляем скопированный код в фому.
3)Жмём - СМОТРЕТЬ РЕЗУЛЬТАТ - в новом окне откроется изображение.
4)Меняем данные кода (форма это позволяет) - заново жмём результат - и так до нужного показателя.

После каждого нажатия просмотра результата , в открытом окне , будет показано то количество результатов , которое вы просмотрели.