Макса для картинок с помощью CSS и javascript

Sentoro
На сайте с 18.03.2007
Offline
149
587

Всем привет. Есть интеерсная задача, может кто подскажет. Имеем 2 картинки:

Как в итоге с помощью JS или CSS получить такое:

т.е. надо одну картинку вырезать, и наложить сверху другой (причем по точным координатам).

Есть идеи, как это сделать "на лету" или придется таки JS-ом вырезать вторую картинку как png с прозрачными краями и накладывать сверху первой?

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

p.s. Поиграться с clip-path?

Продается СДЛ на тему инвестирования (http://www.telderi.ru/ru/viewsite/903457)
dkameleon
На сайте с 09.12.2005
Offline
386
#1

идея такая, но с координатами прийдется повозиться:

<html>
<body>
<style type="text/css">
* {
transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}

.b1 {
background: url('http://i.imgur.com/JgzmiJv.png') no-repeat center center;
overflow: hidden;
width: 896px; height: 447px;
position: relative;
}
.b2 {
overflow: hidden;
width: 800px; height: 250px;
position: absolute; left: 50%; top: 50%; margin-left: -400px; margin-top: -125px;
transform: rotateZ(-30deg);
}
.b3 {
background: url('http://i.imgur.com/sdSfzWe.png') no-repeat left top;
background-attachment: fixed;
overflow: hidden;
width: 860px; height: 512px;
position: absolute; left: 50%; top: 50%; margin-left: -430px; margin-top: -256px;
transform: rotateZ(30deg);
}
.b1:hover .b2 {
transform: rotateZ(30deg);
}
.b1:hover .b3 {
transform: rotateZ(-30deg);
}
</style>

<div class="b1">
<div class="b2">
<div class="b3"></div>
</div>
</div>
</body>
</html>
Дизайн интерьера (http://balabukha.com/)
Sentoro
На сайте с 18.03.2007
Offline
149
#2
dkameleon:
идея такая, но с координатами прийдется повозиться:

<html>

<body>
<style type="text/css">
* {
transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}

.b1 {
background: url('http://i.imgur.com/JgzmiJv.png') no-repeat center center;
overflow: hidden;
width: 896px; height: 447px;
position: relative;
}
.b2 {
overflow: hidden;
width: 800px; height: 250px;
position: absolute; left: 50%; top: 50%; margin-left: -400px; margin-top: -125px;
transform: rotateZ(-30deg);
}
.b3 {
background: url('http://i.imgur.com/sdSfzWe.png') no-repeat left top;
background-attachment: fixed;
overflow: hidden;
width: 860px; height: 512px;
position: absolute; left: 50%; top: 50%; margin-left: -430px; margin-top: -256px;
transform: rotateZ(30deg);
}
.b1:hover .b2 {
transform: rotateZ(30deg);
}
.b1:hover .b3 {
transform: rotateZ(-30deg);
}
</style>

<div class="b1">
<div class="b2">
<div class="b3"></div>
</div>
</div>
</body>
</html>

Очень даже ничего :) Спасибо!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий