Css Ratote Ile Resim Yerleştirme

15-08-2014, 17:16:02

Bir kaç imaj işlemleri yapıyorum. Aşağıda verdiğim linkte telefon ekranına css ile resim yerleştirmek istiyorum.
Uyguladığım yöntemde resmin büyük bölümünü yerleştirdim ama bir taraf açık kalmakta.
Bu konuda yardımcı olabilirsiniz.
Demo: http://artmuba.com/demo/demo.php

Kullandığım Css

body { margin: 100px; position: relative; }
 .edge { 
    width: 800px;
    height: 600px;
    background-size: 
    auto 100%; 
    position: absolute;   
 }
 .panel {  
    position: absolute; 
    left: 31px; 
    top: 0; 
 
 }
 .panel>img { 
  width:186px;
  height:207px;
  transform:  scale(1.1) translate(187px, 180px) skew(50deg, -31deg);
}

<div class="edge" style="background-image: url(yatay.jpg)"></div>
<div class="panel"><img src="tablet.jpg" alt=""  /></div>

15-08-2014, 17:46:54

#2

nilbek

Abm adlı üyeden alıntı: mesajı görüntüle

Bir kaç imaj işlemleri yapıyorum. Aşağıda verdiğim linkte telefon ekranına css ile resim yerleştirmek istiyorum.
Uyguladığım yöntemde resmin büyük bölümünü yerleştirdim ama bir taraf açık kalmakta.
Bu konuda yardımcı olabilirsiniz.
Demo: http://artmuba.com/demo/demo.php

Kullandığım Css

body { margin: 100px; position: relative; }
 .edge { 
    width: 800px;
    height: 600px;
    background-size: 
    auto 100%; 
    position: absolute;   
 }
 .panel {  
    position: absolute; 
    left: 31px; 
    top: 0; 
 
 }
 .panel>img { 
  width:186px;
  height:207px;
  transform:  scale(1.1) translate(187px, 180px) skew(50deg, -31deg);
}

<div class="edge" style="background-image: url(yatay.jpg)"></div>
<div class="panel"><img src="tablet.jpg" alt=""  /></div>

Ben de bayağı hareket ettirdim ama denk getiremedim bir türlü, ama uğraşmak eğlenceliydi cidden

15-08-2014, 18:19:20

#3

Abm

nilbek adlı üyeden alıntı: mesajı görüntüle

Ben de bayağı hareket ettirdim ama denk getiremedim bir türlü, ama uğraşmak eğlenceliydi cidden

Bende sabahtan beri eğleniyorum ama eğlence işkenceye dönüştü

23-08-2014, 12:35:51

#4

Troypc

Hocam teknik olarak o resme oturtmak imkansız, çünkü arkaplandaki resimdeki ekran birkere orantısız.

Yani resim perspektif olarak çekilmiş, bizim yerleştirmeye çalıştığımız resim gibi dikdörtgen değil. Belki arkaplan resminin perspektifitesini ortadan kaldırabiliriz ps ile.

Onun dışında css ile ek birşey yapılamaz sanıyorum buna.

24-08-2014, 23:45:11

#5

ArMoR

Abm adlı üyeden alıntı: mesajı görüntüle

Bir kaç imaj işlemleri yapıyorum. Aşağıda verdiğim linkte telefon ekranına css ile resim yerleştirmek istiyorum.
Uyguladığım yöntemde resmin büyük bölümünü yerleştirdim ama bir taraf açık kalmakta.
Bu konuda yardımcı olabilirsiniz.
Demo: http://artmuba.com/demo/demo.php

Kullandığım Css

body { margin: 100px; position: relative; }
 .edge { 
    width: 800px;
    height: 600px;
    background-size: 
    auto 100%; 
    position: absolute;   
 }
 .panel {  
    position: absolute; 
    left: 31px; 
    top: 0; 
 
 }
 .panel>img { 
  width:186px;
  height:207px;
  transform:  scale(1.1) translate(187px, 180px) skew(50deg, -31deg);
}

<div class="edge" style="background-image: url(yatay.jpg)"></div>
<div class="panel"><img src="tablet.jpg" alt=""  /></div>

Tamamen Oturmuyor ama denemeye değerdi

<div id="tablet">
	 <img id="ekran" src="tablet.jpg" alt="" />
	 
	<img id="zemin" src="yatay.jpg" alt="" />
	
	</div>

#ekran{
width:267px;
height:320px;
margin-left:180px;
position:absolute;

transform:  scale(0.8) translate(13px, 165px) skew(48deg, -27deg) rotate(-2deg);

}