CSS3 background-origin Özelliği Uygulama

CSS3 background-origin
#penguen {<br>    padding:40px;<br>    border:8px dashed pink;<br>    background-image:url('penguen.gif');<br>    background-origin:<span id='rfrnscsscde'>border-box</span>;<br>    background-repeat:no-repeat;<br>}<br>
CSS3 background-origin değerleri
Sonuç Ekranı
Border box değeri ile resim kenar çizgisine yaslanabilir..
Padding box değeri ile resim içerikle kenar çizgisi arasına konumlanır..
Content box değeri ile resim içeriğin içerisine yerleştirilir..
Sonuçları görmek için değerlerin üzerine geliniz.
HtmlveCSSEğitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML link Etiketi

<link> Etiketi Örnek Harici bir stil dosyasına bağlanma: < head > < link   rel= "stylesheet" type= "text/css" href= "googledrive.css"/> < /head > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI Bu başlık link verilmiş bir stil dosyasıyla biçimlendirildi. Bu paragraf ve sayfa arka planı da aynı şekilde biçimlendirildi. HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <link> Tanımı ve Kullanımı <link> etiketi bir belge ile harici kaynak arasındaki bağlantıyı belirtir. <link> etiketi harici kaynaklı stil dosyala...
Devamı Oku »

HTML html Etiketi

<html> Etiketi Örnek Basit bir HTML5 belgesi: < !DOCTYPE   html > < html > < head > < title > Belgenin başlığı < /title > < /head > < body > Belgenin içeriği.............. < /body > < /html > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI Belgenin başlığı Belgenin içeriği.............. HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <html> Tanımı ve Kullanımı <html> etiketi tarayıcıya kendisinin bir HTML belgesi olduğunu söyler. <html> etiketi HTML belgesinin kaynağını temsil eder. <html> etiketi,...
Devamı Oku »

JavaScript CSS3 border-right Örnek

javascript css3 border-right örnek uygulama bu div kutusunun sağ kenarına stil atayacağız.Şimdi tuşa basınız. Javascript ile border-right özelliğine "3px dotted blue" değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! function fonk() { document.getElementById("anakutu").borderRight ="3px dotted blue"; } Çalıştır JavaScript css border-right © htmlvecssegitimi.blogspot.com
Devamı Oku »

HTML CSS margin Örnek

<!DOCTYPE html> <html> <head> <style> p { border: 2px solid red; padding: 15px; margin: 40px; } </style> </head> <body> <h1>Bu bir başlık</h1> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> <p>Bu bir paragraf....</p> </body> </html>
Devamı Oku »

HTML label Etiketi

<label> Etiketi Örnek Etiketleriyle birlikte üç radio butonu: < input type= "radio" name= "diller" id= "dil1"/> < label for= "dil1"> İngilizce < /label >< br/ > < input   type= "radio"   name= "diller"   id= "dil2"/> < label   for= "dil2"> Almanca < /label >< br/ > < input   type= "radio"   name= "diller"   id= "dil3"/> < label   for= "dil3"> Türkçe < /label >< br/ > < br/ > < input type= "submit" value= "Onayla"/> Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI ...
Devamı Oku »

JavaScript CSS counter-reset Örnek

javascript css counter-reset özelliği örnek uygulama HTML CSS Javascript Javascript ile counter-reset özelliğine "section"; değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! function fonk() { document.getElementById("anakutu").counterReset = "section"; } Çalıştır JavaScript css counter-reset © htmlvecssegitimi.blogspot.com
Devamı Oku »

Html dersleri

Resim
Html dersleri ne  kaldığımız yerden devam ediyoruz ve artık bir webmaster ya da kodyazarı olma yolunda adım adım ilerleyeceğiz.Bir önceki derste html konusunda basit bir başlangıç yapmıştık.Şimdi ise bir kaç hatırlatmayla kod editörlerini kullanarak ders anlatımına devam edeceğiz.Kodlama öğrenmek istiyorum mu demiştiniz? HTML' in açılımı H yper T ext M arkup L anguage yani Güçlü metin işaretleme dili de denebilir.Bu kelimeyi sıkça duyacağınız için açılımını bilmekte  yarar var.İnternet sayfaları yapamamızı sağlayan bu dil ile en basit haliyle bir web siteyi aşağıdaki kodlamıştık. <html> <head> <title> Belge başlığı </title> </head> <body> <h1> İçerik Başlığı </h1> <p> Bir paragraf........ </p> <p> Bir başka paragraf........ </p> </body> </html> Şimdi ise yukarıda gördüğünüz kodları editörde çalıştırarak test edin.Eğer kendi kullana...
Devamı Oku »

HTML q Etiketi

<q> Etiketi Örnek Alıntı yapma: < p > Atatürk < q > Biz kimsenin düşmanı değiliz, yalnız insanlığın düşmanı olanların düşmanıyız < /q > sözüyle eşsiz bir insan sevgisinden, insan saygısından bahsetmiştir. < /p > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI Atatürk Biz kimsenin düşmanı değiliz, yalnız insanlığın düşmanı olanların düşmanıyız sözüyle eşsiz bir insan sevgisinden, insan saygısından bahsetmiştir. HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <q> Tanımı ve Kullanımı <q> etiketi alıntıyı ifade eder. Normalde tarayıcılar alıntının ba...
Devamı Oku »

HTML cite Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>HTML blockquote öğesi bir eserin, çalışmanın adını tanımlar.</p> <p>Tarayıcılar blockquote öğelerini genellikle italik yazı stilinde gösterir.</p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJOGtDKN102pM-mLGnXMq4iPqxc6Ef5bz6lh2NyIfBemgT4F0lY5xSS_1p-1euZ5kbYgvT1g7j01-vj34XFVBize6Y6qkAq8rx9F7eFdWKGcEVyze3CKCCwayh2rmm9FaOd2zM322Ig/s320/aynanin-onundeki-kiz.jpg" /> <p><cite>Aynanın Önündeki Kız</cite> Pablo Picasso'nun 1932'de tamamladığı eseri.</p> </body> </html>
Devamı Oku »