• 15-08-2014, 17:16:02
    #1
    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
    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
    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
    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
    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);
    
    }