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 rp Etiketi

<rp> Etiketi Örnek Bir ruby belirtimi: < ruby > 漢 < rt > < rp > ( < /rp > ㄏㄢˋ < rp > ) < /rp >< /rt > < /ruby > 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 漢 ( ㄏㄢˋ ) HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <rp> Tanımı ve Kullanımı <rp> etiketi ruby belirtimi desteklemeyen tarayıcıların, ruby metnini parantez içerisinde göstermesini sağlamak için kullanılır. <rp> etiketini <ruby> ve <rt> etiketleriyle birlikte kullanın: <ruby> elementi açıklama veya telaffuz gerektiren bir veya daha fa...
Devamı Oku »

CSS padding-top Örnek

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 css padding-top özelliği ve örnek uygulama padding değeri vermediğimiz normal bir paragraf.. Bu paragrafın css kodu padding-top:100px; olarak uygulandı ve içerik kısmı üst kenar çizgisinden (border) 100px değerinde uzaklaştı.. padding değeri vermediğimiz normal bir paragraf daha.. HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com
Devamı Oku »

CSS3 animation-iteration-count Örnek

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 animation-iteration-count örnek uygulama HTML Hatırlatma: css animation-iteration-count özelliği internet explorer 9 ve önceki versiyonlarında desteklenmiyor.. HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com
Devamı Oku »

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 »

CSS top Özelliği

CSS top Css top özelliği ile durağan halde bulunmayan html elementlerinin konumları düzenlenebilir. Örnek: Bu örnekte kapsayıcısı içinde bulunan küçük kutu büyük kutuya göre 150px uzaklıktadır. div.relative { position: relative; width: 250px; height: 280px; border: 2px solid yellow; } div.absolute { position: absolute; top: 150px; width: 100px; height: 100px; border: 2px solid blue; } Kendiniz deneyin » CSS top nedir nasıl kullanılır Css top özelliğini kullanırken dikkat edilmesi gereken elementin position değeridir.Bu değer varsayılan olarak relative dir.Yani eleman durağan haldedir.Top değeri girilse bile eleman konum değiştirmez. CSS top CSS top özellikleri &nbsp Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: var Oynat V...
Devamı Oku »

HTML dt Etiketi

<dt> Etiketi Örnek İfade ve tanımlarıyla bir tanımlama listesi: < dl >    < dt > Proton < /dt >    < dd > Atom çekirdeğinin yapısında bulunan pozitif (+) yüklü parçacıklar. < /dd >    < dt > Elektron < /dt >    < dd > Atom çekirdeğinin yapısında bulunan negatif (-) yüklü parçacıklar. < /dd >    < dt > Nötron < /dt >    < dd > Atom çekirdeğinin yapısında bulunan yüksüz partiküller. < /dd > < /dl > 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 Proton Atom çekirdeğinin yapısında bulunan pozitif (+) yüklü parçacıklar. Elektro...
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 »

HTML5 ile SEO Uyumlu İçerik Üret

Resim
 Merhaba arkadaşlar , HTML5 ile SEO uyumlu içerik üretmek için   yapabileceğiniz çok basit ama bir blog ve web site için çok önemli olan bir kaç şeyi size paylaşıyorum. HTML5 ile SEO Uyumlu İçerik Üret Başlık Etiketlerini Etkili  Kullanın İçeriğinizi önemli anahtar kelimelerle vurgulamak için başlık etiketlerini (H1, H2, H3 vb.) kullanın. Anahtar kelimeleri bu başlık etiketlerinde yerleştirerek sayfanın yapısını anlamlı bir şekilde düzenleyin.  İçeriğinizde başlık etiketlerini (H1, H2, H3 vb.) kullanarak sayfada hiyerarşi oluşturun. Ana başlık (H1) sadece bir kez kullanılmalı ve diğer başlık etiketleri (H2, H3 vb.) alt başlıklar için kullanılmalıdır. Meta Etiketlerini Kullanmayı Unutmayın  Meta açıklama etiketini kullanarak sayfanın içeriğini özetleyin vemümkünse  anahtar kelimelerinizin en azından bir tanesi meta açıklamada bulunsun. Anahtar kelimeleri de bu açıklamada kullanarak arama motorlarının içeriğinizi daha iyi anlamasını sağlayın. Ayrıca, her...
Devamı Oku »

HTML Bilgisayar Kodları

« Önceki Ders Sonraki Ders » Bir bilgisayar kodu öğesi <code> var x = 4; var y = 7; document.getElementById("demo").innerHTML = x + y; </code> HTML Bilgisayar Kodlarını Biçimlendirme HTML belgeleri normalde değişken harf boyutu ve aralığı kullanır. Fakat bilgisayar kodu örnekleri gibi öğelerin görüntülenmesinde bu tercih edilmez. Görsel olarak farkedilebilmeleri ve arama motorlarına bu örneklerin ne olduğunun bildirilebilmeleri için, varsayılan metin boyutu, stili ve karakter aralığından farklı olmaları gerekir. Bu yüzden <kbd> , <samp> ve <code> gibi bilgisayar kodu örnekleri sabit karakter boyutu ve aralığındadır. Klavye Girişi için HTML <kbd> Etiketi HTML <kbd> etiketi klavye girişini tanımlar. Örnek <p><kbd>Dosya | Aç...</kbd></p> Sonuç: Dosya | Aç... Kendiniz deneyin » Bilgisayar Çıktısı için HTML <samp> Etiketi H...
Devamı Oku »