Картинки две в одной,как вставить

Код CSS для фото-эффектов
Как с помощью CSS вставить одну картинку в другую и при этом не пользоваться программой фотошоп. Фото-эффекты онлайн бесплатно на CSS для установки изображений и картинок в статью на блог или сайт.Сделать фото с различными эффектами при создании веб-страниц в принципе не сложно. Всё что от вас потребуется это просто загрузить нужные вам фото и заключить в теги следующего вида.


Эффекты для фото и картинок на CSS


Даже элементарных знаний CSS хватит для того,чтобы самостоятельно отправить себя в путешествие в экзотические страны хотя бы на страницах своего личного блога.Подобрав соответствующую экспозицию и немного поколдовав со своими фото в онлайн фото-шопе,для того чтобы удалить лишнее и убрать мешающий задний фон ( Как и где это сделать можно узнать из следующей статьи), дальше элементарно следует вставить адрес своих изображений в места указанные в коде CSS и в результате Ваше фото приобретёт совершенно новый эксклюзивный вариант,которым можно будет удивить своих знакомых. Для начала посмотрите демо-страницу с примерами,а дальше уже решайте стоит это того или нет.Ну а для личного использования можно просто вырезать скрин и сохранить на диск.

эффекты для фото онлайн



Код CSS для фото-эффектов.


На демо странице присутствует три различных варианта оформления фото или картинок.Первый самый простой- Наложение фото поверх другого изображения.Здесь нам потребуется два изображения и небольшой CSS-код,который совместит наши картинки в одну. Данный код нужно будет добавить на странице публикации статьи в самом низу.Смысла устанавливать в шаблон я не вижу,так как фон у картинок будет различный.


<style>
.vgol {border: 1px solid #ddd;/*цвет и толщина рамки*/
  background: url(Урл картинки фона)no-repeat;
  width: 600px;/*ширина блока*/
  height: 320px;/*высота блока*/
}</style>

Далее идёт контейнер или блок куда следует вписать адрес вашего загруженного фото,после обработки в фотошопе. Свойство  margin: 10px 70px; позволяет позиционировать добавленное изображение и изменяя значения можно добиться корректного положения относительно фона.
<div class="vgol">
<div style="margin: 10px 70px;opacity: 1;">
<img border="0" src="Урл фото или другой картинки" /></div></div>
Второй вариант это тот же вариант,что и пред идущий просто изменено значение opacity: 1;  с единицы на 0.3. Наиболее оптимального отображения картинки можно добиться воспользовавшись визуальным онлайн редактором для проверки и настройки НТМЛ-кода и различных скриптов.

Третий вариант несколько иного вида.Фоновое изображение остаётся тем же,но вместо наложения другой картинки заставим летать бабочек по кругу.Для этих целей нужна любая гифка и небольшой CSS-код ,который и заставит перемещаться бабочек по кругу.

<style type="text/css">
@keyframes circle {
    from { transform:scale(0.1) rotate(0deg); }
    to { transform:scale(1.1)rotate(480deg); }
}

@keyframes inner-circle {
    from { transform:scale(0.1) rotate(0deg); }
    to { transform:scale(1.1) rotate(-480deg); }
}

.golru {
    width:1px;
    height:0px;
    margin: 20px auto 0;
 
    line-height:1;
    animation: circle 20s linear infinite;
    transform-origin:50% 180px;
}

.golru{
    animation: inner-circle 25s linear infinite;
}
</style>

Смотреть ещё

Оформление блоков для кодаСлайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Как добавить форум на блог

Установка происходит также,как и первом варианте на страницу,где планируется показ только теперь к блоку следует добавить ещё один контейнер следующего вида,который размещается на месте показа фото на странице согласно содержимого.Настройки внесены в CSS-код  и если потребуется можно изменять их по своему усмотрению.

<div class="vgol"><div class="golru">
<img  border="0"  src="https://1.bp.blogspot.com/-mAM6VQjRZt8/VvRDpNySKkI/AAAAAAAAE7k/PC6rsRHLgO0lMq5S9IsUG6TAXO1yBvi1A/s1600/v-gol.ru_baterf.gif"/>
</div></div>

Отправить комментарий