В шпаргалке эффект анимации картинки CSS этот вариант был затронут. Там мы добавили ещё свойство webkit-transition, чем и заставили полетать бабочку. Сегодня всё будет проще - без полётов. Посмотрите здесь на то, что я предлагаю вам сделать. По моему, красиво.
Для реализации нам понадобится основная фоновая картинка и картинка которую будем накладывать на основную. В первом, где летают бабочки на полянке, картинка фон в формате JPEG, а наложенная (бабочки) - в формате GIF.
Код.
<style>
.izo1 {border: 3px solid #009933 ; /*цвет и толщина рамки*/
background: url( адрес фоновой картинки )no-repeat;
width: 512px; /*ширина блока*/
height: 300px; /*высота блока*/
}</style>
<br />
<div class="izo1">
<div style="margin: 40px 320px;">
<img border="0" src="адрес второй картинки " /></div>
</div>
Для корректного наложения второй картинки меняйте отступы margin: 40px 320px; как вам нужно. Естественно, вторая картинка должна быть меньших размеров, чем первая. Размеры фоновой картинки указаны в коде. Тут тоже всё на ваше усмотрение..izo1 {border: 3px solid #009933 ; /*цвет и толщина рамки*/
background: url( адрес фоновой картинки )no-repeat;
width: 512px; /*ширина блока*/
height: 300px; /*высота блока*/
}</style>
<br />
<div class="izo1">
<div style="margin: 40px 320px;">
<img border="0" src="адрес второй картинки " /></div>
</div>
Неплохо смотрится и такой эффект (второе изображение на тестовом блоге).
Можно вставить своё фото на фоне моря, гор, пустыни или другой красоты. В этом случае используем тот же код. Картинку, которая сверху в формате PNG. Подбирайте для такого варианта изображение одинакового размера или второе немного меньше.
Мне пришлось подогнать размеры ширины и высоты до width: 580px;/*ширина блока*/
height: 318px;/*высота блока*/ , а расположение второго изображения так "margin: 10px 70px;">. Потренируйтесь.
Готовый код вставляем в редакторе сообщений, перейдя в режим HTML, в нужном месте.
Красота, да и только. Вот так и справились с наложением картинки на картинку. Если возникнут затруднения пишите в комментариях. Или поделитесь готовым результатом, если применили у себя. Обязательно загляну посмотреть.
Сегодня у меня всё. Примите мои поздравления в канун Великой Пасхи!
p.s. поздравление сделано вышеописанным способом.
здесь можно оформить подписку на новые шпаргалки
Виктория! Поздравляю Вас с 1 Мая и со Светлым Христовым Воскресением!
ОтветитьУдалитьСпасибо, Ирина. И Вас тоже со всеми грядущими праздниками.
УдалитьИ я присоединяюсь к поздравлениям!
ОтветитьУдалитьОх, для меня все эти коды - лес дремучий :( А уж работа с картинками - вообще высший пилотаж :)
Олли, а тебе зачем этим заморачиваться, у тебя муж программист. Спасибо за пожелания.
УдалитьДумаю, пригодиться, интересные эффекты, я все никак не попробую текст или ссылки на фон добавлять, помню у тебя было такое. Вот сегодня мне бы пригодилась такая табличка с кликабельным текстом.;) Пока вырезала у тебя, как картинку, надеюсь руки дойдут, или ноги), переделать.
ОтветитьУдалитьС праздниками, хороших выходных!
Олеся, я не совсем поняла про какую табличку с кликабельным текстом ты говоришь. Тебя и семью тоже со всеми наступающими.
УдалитьВика. С праздником Вас и всех ваших близких. Всех благ!
ОтветитьУдалитьСпасибо, Любовь. И Вас с праздником.
ОтветитьУдалить