CSS background-origin Örnek

Kasım 29, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css3 background-origin özelliği ve örnek uygulama</title> <style> #örnek1 { border: 9px dashed yellow; padding: 50px; background: url('http://upload.wikimedia.org/wikipedia/commons/7/78/Fairytale_html.png'); background-repeat: no-repeat; margin:15px; } #örnek2 { border: 9px dashed blue; padding: 50px; background: url('http://upload.wikimedia.org/wikipedia/commons/7/78/Fairytale_html.png'); background-repeat: no-repeat; background-origin: border-box; margin:15px; } #örnek3 { border: 9px dashed blue; padding: 50px; background: url('http://upload.wikimedia.org/wikipedia/commons/7/78/Fairytale_html.png'); background-repeat: no-repeat; background-origin: content-box; margin:15px; } h1{text-align:center;} </style> </head> <body> <p>background-origin özelliği bu kutuda kullanılmamıştır ve padding-box değeri varsayılan ayardadır.</p> <div id="örnek1"> <h1>KUTU1</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy,Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p> </div> <p>background-origin özelliğine border-box değeri atandığında resim aşağıdaki konumu alacaktır .</p> <div id="örnek2"> <h1>KUTU2</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> <p>background-origin özelliğine content-box değeri atandığında resim içeriğin çevresini kapsayacak şekilde konumlanmaya çalışır..</p> <div id="örnek3"> <h1>KUTU3</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p> </div> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>css3 background-origin özelliği ve örnek uygulama</title>
  <style>
    #örnek1 {
        border: 9px dashed yellow;
        padding: 50px;
        background: url('http://upload.wikimedia.org/wikipedia/commons/7/78/Fairytale_html.png');
        background-repeat: no-repeat;
     margin:15px;
    }
    
    #örnek2 {
        border: 9px dashed blue;
        padding: 50px;
        background: url('http://upload.wikimedia.org/wikipedia/commons/7/78/Fairytale_html.png');
        background-repeat: no-repeat;
        background-origin: border-box;
     margin:15px;
    }
    
    #örnek3 {
        border: 9px dashed blue;
        padding: 50px;
        background: url('http://upload.wikimedia.org/wikipedia/commons/7/78/Fairytale_html.png');
        background-repeat: no-repeat;
        background-origin: content-box;
        margin:15px;
    }
    
    h1{text-align:center;}
  </style>
</head>

<body>
  <p>background-origin özelliği bu kutuda kullanılmamıştır ve padding-box değeri varsayılan ayardadır.</p>
  <div id="örnek1">
    <h1>KUTU1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy,Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
  </div>

<p>background-origin özelliğine border-box değeri atandığında resim aşağıdaki konumu alacaktır .</p>
  <div id="örnek2">
    <h1>KUTU2</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

<p>background-origin özelliğine content-box değeri atandığında resim içeriğin çevresini kapsayacak şekilde konumlanmaya çalışır..</p>
  <div id="örnek3">
    <h1>KUTU3</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy</p>
  </div>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS background-origin Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML DOCTYPE Bildirimi

Uyurken Bile Para Kazanmak İster misin

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

javascript yazım kuralları

Javascript yapısı ve DOM nedir

Javascript Oyun Yapma Dersleri HTML5+CSS3

Javascript kodları nereye yazılır

Web Sitenizden Çok Para Kazanin

HTML5 Canvas Oyun Yapımı Dersleri

html nedir