Форум Сайтостроение Веб-строительство

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

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

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

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

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

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

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

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

Продается СДЛ на тему инвестирования (http://www.telderi.ru/ru/viewsite/903457)
dkameleon
На сайте с 09.12.2005
Offline
386
dkameleon
#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
Sentoro
#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>

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

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