Aşağıdaki kodları düzenle ve ardından sonucu gör butonuna tıkla...
​x
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.btDersleri.com</title>
​
<style> 
#kutu {
    position: relative;  max-width:300px;
    -moz-box-shadow: 1px 2px 4px gray;
    -webkit-box-shadow: 1px 2px 4px gray;
    box-shadow: 1px 2px 4px gray;
    padding: 10px;
    background: white;
}
​
#kutu img {width:50%;
    border: 1px solid #8a4419;
    border-style: inset;
}
​
#kutu::after {
    content: '';
    position: absolute;
    z-index: -1; 
    -webkit-box-shadow: 0 15px 20px gray;
    -moz-box-shadow: 0 15px 20px gray;
    box-shadow: 0 15px 20px gray;                
    width: 70%; 
    left: 15%; 
    height: 100px;
    bottom: 0;
}
</style>
</head>
<body>
​
<div id="kutu">
  <img src="../ornek_resimleri/img-link-verme.jpg" alt="www.btdersleri.com" align="left"><p>Bu örnekte bir div kullandık ve içerisine resim ile metin yerleştirdik. </p><p>Css özelliklerini inceleyiniz. Kodları değiştirerek kendiniz deneyiniz.</p>
</div>

Kodlarını Dene

Sitemizdeki örnekler üzerinde değişiklikler yaparak sonucu görebilir, bu sayede daha iyi anlayabilirsin.

Her geçen gün sitemizdeki konulara yeni örnekler eklenmektedir. Mümkün olduğunca fazla örnek yayınlamak öncelikli hedefimiz olup, bu konuda durmadan çalışmaktayız..

Facebook sayfamızı beğenerek ve sitemizi sık sık ziyaret ederek bize destek olabilirsiniz.


Html Kodunu Test Etme (Test your Html code) Css Kodunu Test Etme (Test your Css code) JavaScript Kodunu Test Etme (Test your JavaScript code) JQuery Kodunu Test Etme (Test your Jquery code)

Bu Sayfada Şunları Yapabilirsin

  1. Html Kodunu Test Etme (Test your Html code)
  2. Css Kodunu Test Etme (Test your Css code)
  3. JavaScript Kodunu Test Etme (Test your JavaScript code)
  4. JQuery Kodunu Test Etme (Test your Jquery code)
  5. BootStrap Kodunu Test Etme (Test your BootStrap page)

Son Eklenen Konular