JavaScript CSS3 box-sizing Örnek

javascript css3 box-sizing örnek uygulama

KUTU1
KUTU2
KUTU3

Bu örneğimizde 3 tane küçük kutu bir büyük kutu içindedir.Genişlikleri 100px olan küçük kutular genişliği 300px olan kutu içinde yan yana göstermek istediğimizde sorun olmaktadır.Çünkü küçük kutulara 15 px padding değeri atamıştım .Padding ayarlarımızı göz ardı ederek daha rahat tasarım yapmamızı sağlayan bu özelliği birlikte uygulayalım..

Javascript ile box-sizing özelliğine "border-box" 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.style.boxSizing = "border-box";

document.getElementById("anakutu").style.MozBoxSizing = "border-box"
}

JavaScript css box-sizing © htmlvecssegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

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

<a> Etiketi Örnek htmlvecssegitimi.blogspot.com adresine verilen bir link < a href= "http://htmlvecssegitimi.blogspot.com.tr/"> HTML ve CSS Dersleri < /a > 'ni ziyaret edin! Kendiniz deneyin » htmlvecssegitimi.blogspot.com KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI HTML ve CSS Dersleri 'ni ziyaret edin! HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <a>  Tanımı ve Kullanımı <a> etiketi bir hyperlink 'i yani link verme yi ifade eder, bir sayfadan bir diğerine bağlantı kurmak için kullanılır. <a>  elementinin en önemli özelliği href öz...
Devamı Oku »

HTML footer Etiketi

<footer> Etiketi Örnek Bir belgenin altbilgisi: < footer >    < p > Yazar: Admin < /p >    < p > İletişim Bilgisi: < a href= "mailto:admin@example.com"> admin@example.com < /a > . < /p > < /footer > 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 Yazar: Admin İletişim Bilgisi: admin@example.com . HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <footer> Tanımı ve Kullanımı <footer> etiketi bir belge veya bölme için altbilgiyi tanımlar. <footer> elementi taşıdığı elementle ilgili bilgi içeri...
Devamı Oku »

HTML q Etiketi Örnek

<!DOCTYPE html> <html> <body> <p>Tarayıcılar <q> etiketi içerisine girilen metni tırnak işareti içerisine alır.</p> <p>Harlan Coben'in Kapan adlı eserinden: <q>Gün geçmiş ve daha çok şey öğrenmiş olsak da, aynı hataları tekrarlamak insanların dna'larında var.</q></p> </body> </html>
Devamı Oku »

HTML Dersleri

Resim
Sıfırdan HTML5 Dersleri Başlıyor ! HTML ile kendi websitenizi kurabilirsiniz. Bu eğitim size HTML hakkında herşeyi öğretecektir. HTML öğrenmesi kolay bir dildir.Sakız çiğnemek kadar kolay inanın Html işaretleme dilini binlerce uygulamalı olarak öğrenmeye başlayın HTML Dersleri konuları yüzlerce örnek içerir. Örneklerin altında yer alan "Kendiniz Deneyin" kutucuğunu kullanarak açılan bölümde "Kodu Çalıştır" butonu ile sonuçları görüntüleyebilirsiniz. <!DOCTYPE html> <html> <head> <title>HTML Eğitimi</title> </head> <body> <h1>HTML(5) Dersleri</h1> <p>HTML ile kendi websitenizi kurabilirsiniz.</p> </body> Kodu Çalıştır "Kendiniz deneyin" butonunu kullanarak nasıl çalıştığını görün. HTML Derslerine başlayabilirsiniz. ...
Devamı Oku »

CSS content Özelliği

CSS content Css content özelliğini sayfaya seçilen elemandan önce veya sonrasında içerik eklemek için kullanılabilir. Örnek: Bu örnekte bir linkin title değerini linkten önce yazmak için content özelliği uygulanmıştır. a:before { content: " (" attr(title) ")"; color: red; font-size: 1.1em; } Kendiniz deneyin » CSS content nedir nasıl kullanılır Css content ile seçilen html elemanından önce veya sonrasında bir url ,resim, içerik, tırnak işareti gibi elemanlar eklenebilir. CSS content CSS content özellikleri   Varsayılan Değer: normal   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS2   JavaScript content: Açıklama Oynat CSS content Tarayıcı Desteği Tablodaki sayılar özelliği tam destekleyen ilk tarayıc...
Devamı Oku »

Yazıya Göre Resim Konumlandırma Örnek

<!DOCTYPE html> <html> <body> <p><strong>Resmi sola yaslama:</strong></p> <p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpYNtQhLn9CzHJAJ9h7_ozMtUoawlk3_gzVJfzSpANy9wwr67luU8ugSTk2IMBc_QC5Y4ByKAmymqKifisAGZaJBIki5MldGQeo4tLdS31tVlxQx3dcikCeaF6otMXZsVhw-kmrm3UQ/s200/smiley.gif" alt="Smiley" style="float:left; width:60px; height:60px;" /> Float özelliği ile sola yaslanmış resimli bir paragraf. Float özelliği ile sola yaslanmış resimli bir paragraf. </p> <p><strong>Resmi sağa yaslama:</strong></p> <p> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpYNtQhLn9CzHJAJ9h7_ozMtUoawlk3_gzVJfzSpANy9wwr67luU8ugSTk2IMBc_QC5Y4ByKAmymqKifisAGZaJBIki5MldGQeo4tLdS31tVlxQx3dcikCeaF6otMXZsVhw-kmrm3UQ/s200/smiley.gif" alt="Smiley" style="float:right; width:60px; height:60px;" /> Float özelliği il...
Devamı Oku »

HTML bdo Etiketi

<bdo> Etiketi Örnek Etiket örneği: < p >< bdo dir= "rtl"> Bu paragraf sağdan sola yazılacak </bdo >< /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 Bu paragraf soldan sağa doğru yazılacak Bu paragraf ise sağdan sola yazılacak HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <bdo> Tanımı ve Kullanımı bdo Bi-Directional Override (İki Yönlü Üstünlük) anlamına gelir <bdo> etiketi mevcut metin yönünü geçersiz kılmak için kullanılır. Tarayıcı Desteği Element ...
Devamı Oku »

JavaScript CSS3 column-rule-width Örnek

javascript css3 column-rule-width özelliği örnek uygulama column-rule-width özelliği ile sütunların arasına yerleştirilen çizgilerin çizgi kalınlığı değiştirilebilir. column-rule-width column-rule-width özelliği ile sütunların arasına yerleştirilen çizgilerin çizgi kalınlığı değiştirilebilir. column-rule-width column-rule-width özelliği ile sütunların arasına yerleştirilen çizgilerin çizgi kalınlığı değiştirilebilir. column-rule-width column-rule-width özelliği ile sütunların arasına yerleştirilen çizgilerin çizgi kalınlığı değiştirilebilir. Javascript ile column-rule-width özelliğine "8px" 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.columnRuleWidth = "8px"; document.getElementById("anakutu").style.MozColumnRuleWidth = "8px"; document.getElementById("anakutu").style.WebkitColumnRuleWidth = "8px...
Devamı Oku »