JavaScript CSS3 border-image-source Örnek

javascript css3 border-image-source örnek uygulama

Bu kutunun kenarına kareli resimi uyguladık ,tuşa bastığığınızda başka bir resim uyguladığımızı göreceksiniz.

Javascript ile border-image-source özelliğine url(penguen.png) 19 repeat 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").style.borderImageSource = "url(penguen.png) 19 repeat";
}

Örneklerimiz için kullandığımız iki resim

css-border-image-source-example css-border-image-source-example2

JavaScript css border-image-source © htmlvecssegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

JavaScript CSS background-position Örnek

javascript css bakcground-position örnek uygulama Javascript ile bakcground-position özelliğine center değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! Çalıştır Javascript ile bakcground-position özelliğine left top değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! Çalıştır Javascript ile bakcground-position özelliğine left center değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! Çalıştır Javascript ile bakcground-position özelliğine left bottom değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! Çalıştır Javascript ile bakcground-position özelliğine right top değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! Çalıştır Javascript ile bakcground-position özelliğine right center değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! Çalıştır Javascript ile bakcgrou...
Devamı Oku »

HTML style Etiketi

<style> Etiketi Örnek <style> elementinin bir HTML belgesinde kullanımı: < html > < head > < style > h1 { color: green; } p { color: red; } < /style > < /head > < body > < h1 > Bu bir başlık < /h1 > < p > Bu bir paragraf... < /p > < /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 Bu bir başlık Bu bir paragraf... HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <style> Tanımı ve Kullanımı <style> etiketi HTML belgesi için stil bilgisi olarak tanımlanır. ...
Devamı Oku »

CSS padding-right Ö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-right özelliği ve örnek uygulama padding değeri vermediğimiz normal bir paragraf.. Bu paragrafın css kodu padding-right:100px; olarak uygulandı ve içerik kısmı sağ kenar çizgisinden (border) 100px değerinde uzaklaştı.Bu paragrafın içeriği sağ kenarından 100px uzaklığındadır.Bu paragrafın içeriği sağ kenarından 100px uzaklığındadır.Bu paragrafın içeriği sağ kenarından 100px uzaklığındadır.Bu paragrafın içeriği sağ kenarından 100px uzaklığındadır.Bu paragrafın içeriği sağ kenarından 100px uzaklığındadır.Bu paragrafın içeriği sağ kenarından 100px uzaklığındadır....
Devamı Oku »

CSS tab-size Ö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 Aşağıdaki paragrafa tab-size:5 değeri girilmiştir. Bu bir paragraftır. Aşağıdaki paragrafa tab-size:20 değeri girilmiştir. Bu bir paragraftır. Hatırlatma: Safari 6.1 Opera 15.0 tab-size özelliğini destekliyor. Hatırlatma: Firefox için -moz-tab-size ön takısı kullanmak gerekir. Hatırlatma: Opera 10.6 ve 12.1 versiyonları için -o-tab-size ön takısı kullanmak gerekir. HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com
Devamı Oku »

HTML track Etiketi

<track> Etiketi Örnek İki altyazı yolu olan bir video: < video width= "320" height= "240" controls >    < source   src= "maskeli_besler.mp4"   type= "video/mp4">   < source src= "maskeli_besler.ogg" type= "video/ogg">    < track   src= "altyazi_eng.vtt"   kind= "subtitles"   srclang= "en"   label= "İngilizce">   < track src= "altyazi_tur.vtt" kind= "subtitles" srclang= "tr" label= "Türkçe"> < /video > <track> Tanımı ve Kullanımı <track> etiketi medya elementleri <audio> ve <video> için metin yolunu tanımlar. Bu element medya çalarken görünür olması gereken altyazıları, metin içeren başlık dosyalarını veya diğer dosyaları tanımlamak için kullanılır. Tarayıcı Desteği Tablodaki sayılar elementi tamamen destekleyen ilk tarayıcı versiyonunu ifade ediyor...
Devamı Oku »

CSS text-transform uygulama

CSS text-transform div {     text-transform:<span id='rfrnscsscde'>uppercase</span>;<br>} CSS text-transform değerleri none capitalize uppercase lowercase initial Sonuç Ekranı CSS Text Transform Özelliği uygulaması Bu yazının büyük harf /küçük harflerle yazılmasını veya her kelimenin ilk harfinin büyük olmasını sağlayabilirsiniz. Sonuçları görmek için değerlerin üzerine geliniz. HtmlveCSSEğitimi.blogspot.com
Devamı Oku »

HTML acronym Etiketi

<acronym> Etiketi Örnek <acronym> etiketi ile kelimeleşmiş kısaltma işaretleme: < acronym title= "National Aeronautics and Space Administration"> NASA < /acronym > yaşam barındırma olasılığı bulunan bir gezegenin daha keşfedildiğini duyurdu. 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 NASA yaşam barındırma olasılığı bulunan bir gezegenin daha keşfedildiğini duyurdu. Not: elementi HTML5'te desteklenmiyor. HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <acronym> Tanımı ve Kullanımı <acronym> etiketi HTML 5'te desteklenmiyor. Bunun yerin...
Devamı Oku »

Html belgesi yapısını anlama uygulaması

Resim
Html  dersi uygulama örneğimizde  html belgesinde temel etiketler ve kullanımını öğreneceğiz.Bu uygulama çok basit bir web sayfasının kodlarıdır.Sizlerde başlığı değiştirerek ya da paragraf etiketlerini değiştirerek kod yazmaya başlayabilirsiniz.Bir web sitesi yapmak için temel kurgu iyi bilinmelidir. <!DOCTYPE HTML> <html> <head> <title>Belge Başlığı</title> </head> <body> <h1>İçerik Başlığım</h1> <p>İlk paragrafım.....</p> </body> </html> Html belgesi uygulama videosu Bir html dökümanının uzantısı html'dir.Aşağıda izleyeceğiniz videoda sıfırdan html derslerine uygulamalarla başlamış olacağız.Videoyu izlemeden önce son hatırlatmaları yapalım. Doctype bildirimi ile tarayıcıya sitemizin html5 ile yapıldığını bildiriyoruz. Sitemiz html kodları içerisinde her elemanı kapsayan en önemli etikettir. Bizler kullanıcı olarak web sitelerinde sadece body kodları arası...
Devamı Oku »