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

CSS flex-shrink Özelliği

CSS flex-shrink Css flex-shrink özelliği flex-grow özelliğinin tersine büzülme veya daralma da diyebileceğimiz bir etki yaratarak esnek kutu elemanlarına göre göreceli olarak genişlik azaltacaktır. Örnek: Bu örnekte esnek kutu içersinde 5 adet div elemanı yerleştirilmiştir.Bu elemanlardan mavi olan elemana flex-shrink özelliği ve değer olarakta 2 veriyoruz. Sonuç olarak mavi kutunun genişliği yarıya düşecektir. #main div { -webkit-flex-grow: 1; -webkit-flex-shrink: 1; -webkit-flex-basis: 100px; flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } #main div:nth-of-type(3) { -webkit-flex-shrink: 2; flex-shrink: 2; } Kendiniz deneyin » CSS flex-shrink nedir nasıl kullanılır Css flex shrink özelliğini kullanarak esnek kutu içerisindeki elemanların genişliklerini referans alarak istenilen bir elemana istenilen ölçüde genişlik tanımlandırılabilir.Özelliğin etkisini görmek iç...
Devamı Oku »

CSS3 border-top-left-radius uygulama

CSS3 border-top-left-radius div {     border-top-left-radius:<span id='rfrnscsscde'>100px</span>;<br>} CSS3 border-top-left-radius değerleri 150px 50px 60px 80px 30px 5px 40px 15% 70% 100% initial Sonuç Ekranı Sonuçları görmek için değerlerin üzerine geliniz. HtmlveCSSEğitimi.blogspot.com
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 »

CSS border-color Özelliği

CSS border-color Css border-color özelliği bir html elemanının kenarlarına renk vermek için kullanılır.. Örnek: Bu örneğimizde div elemanı ile oluşturulan 4 kutunun kenarlıklarına renk verilecektir. div { margin: 15px; padding: 15px; } div.bir { border-style: solid; border-color: green; } div.iki { border-style: solid; border-color: red black; } div.uc { border-style: solid; border-color: red gray yellow; } div.dort { border-style: solid; border-color: black green blue yellow; } Kendiniz deneyin » CSS border-color nedir nasıl kullanılır Css border-color ile html elemanlarının kenarlarına renk verilebilir. Burada dikkat edilmesi gereken nokta bu özelliği kullanmak için öncesinde border-style özelliğinin kullanılması gerekir. CSS border-color CSS border-color özellik...
Devamı Oku »

Web Sitenizden Çok Para Kazanin

Resim
  Web sitenizden daha fazla para kazanmanın yolları nı arıyorsanız, Adsterra gibi etkili bir reklam ağından faydalanabilirsiniz. Adsterra, bloglarınızda veya web sitelerinizde reklamlar yayınlayarak hızla para kazanmanızı sağlayan bir dizi avantaj sunmaktadır. Geçen yazımıda SEO içeriklerle web sitenizi arama motorlarınızda nasıl üst sıralara taşıyacağımızı anlatmıştık.Siz de web yayıncılık serüveninizde bloglarınızdan daha çok fazla trafik çekip takipçilerinizi ve trafiğinizi paraya dönüştürmek istiyorsanız bu yazı tam size göre. AdsTerra ile Bloğunuzdan Hemen para kazanmaya başlayın ! Adsterra'nın avantajlarından biri, anında reklam görüntülenme imkanıdır. Bir kez kayıt olduktan sonra, Adsterra'nın reklam ağına erişim sağlayarak bloglarınızda veya web sitelerinizde reklamların hemen yayınlanmasını sağlayabilirsiniz . Bu hızlı başlangıç, gelirinizi artırmanızı ve kazancınızı daha da büyütmenizi sağlar. Adsterra'nın sunduğu reklam çeşitliliği de dikkate değerdir. Kaps...
Devamı Oku »

Uyurken Bile Para Kazanmak İster misin

Resim
    İnternetten para kazanmanın yolları   ile ilgili yazılar paylaşmaya devam edeceğim. Sizler de internetten gelir elde etmek istiyorsanız yazılarımı takip ederek  internetten para kazandıran siteler  ve uygular ile  hızlı ve kolay para kazan abilirsiniz. Harika Bir pasif gelir elde et Uyurken Bile Para Kazan Ücretsiz bitcoin kazan dıran bu harika sitenin ayrıca referans sistemi var. Üye olduğunuzda Refer(sayfasına gidip kendi linkinizi heryerde paylaşın ve para kazanmaya hemen başlayın.) Arkadaşlarınızı da üye yaparak  pasif gelir elde edebilirsiniz . Genelde  uyurken bile para kazan   denildiğinde anlamanız gereken bu sistemdir. Haydi  Ücretsiz Bitcin kazanmaya başlayalım  ve paraya dönüştürelim. Siteye Hemen Üye ol:  FreeBitcoin  ( tıkla ) Ücretsiz Bitcoin Kazandıran siteye hemen üye ol (arkadaşlarınla paylaş) uyurken bile para kazan Her saat bitcoin kazanabilirsin ( Şanslı isen 200 Dolar değerinde Bitcoin ) Kazandığın...
Devamı Oku »

html nedir

Resim
Web tasarım ve kodlama derslerinde ilk öğreneceğimiz dil html teknolojisidir.Bir internet sitesinin iskeletide denen bu işaretleme diliyle web site yapmasını öğreneceğiz.Hiç bir kodlama bilginiz olmasa dahi bloğumu takip edin makalelerimi okuyun ve uygulamaya çalışın.Eminim siz de kendi web sitenizi kodlayarak sıfırdan kendi projelerinizi hayata geçirebileceksiniz. Öncelikle html nedir ,ne işe yarar nasıl kullanılır bunları öğreneceğiz.Html öğrenilmesi en kolay dildir ve ben size bildiğim herşeyi uygulamalı olarak anlatacağım.Sitede kullandığım kod editörüyle  anında ne işe yaradığını göreceksiniz. Html Dersleri başlıyor. Html5 Dersleri Başlangıç HTML Nedir   İnternet siteleri yapmamıza olanak sağlayan işaretleme dili olan html sayesinde Chrome,Firefox,İnternet Explorer,Safari ve Opera gibi tarayıcılar html etiketlerini (kodlarını) yorumlayarak kullanıcıya istenen formatta görüntülenmesini sağlatırlar.Örneğin Google'da bir arama yaptığımızda çıkan sonuç...
Devamı Oku »