Kayıtlar

css-dersleri etiketine sahip yayınlar gösteriliyor

CSS transition Özelliği

CSS transition Css transition özelliği ile bir animasyonun veya bir css etkisinin gerçekleşme süresi ,gecikme süresi ne kadar süreceği düzenlenebilir. Örnek: Bu örnekte bir div elemanının genişliği 90px'ten 360px olması 3 saniyede gerçekleşmiştir. div { width: 90px; height: 90px; color: white; background: crimson; transition: width 3s; -webkit-transition: width 3s; /* Safari 3.1 to 6.0 */ } div:hover { width: 360px; } Kendiniz deneyin » CSS transition nedir nasıl kullanılır Css transition özelliği ile html elemanlarına uygulanacak olan css etkilerinin geçiş süresi tanımlanabilir. CSS transition CSS transition özellikleri &nbsp Varsayılan Değer: all 0s ease 0s   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript transition:

CSS transform-origin Özelliği

CSS transform-origin Css transform-origin özeliği ile dönüştürülecek html elemanın orijin noktaları düzenlenebilir. Örnek: Bu örnete kutu 60 derece döndürülmüştür. #kutu1 { position: relative; height: 180px; width: 180px; } #kutu2 { position: absolute; -ms-transform: rotate(60deg); /* IE 9 */ -ms-transform-origin: 30% 50%; /* IE 9 */ -webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */ -webkit-transform-origin: 30% 50%; /* Chrome, Safari, Opera */ transform: rotate(45deg); transform-origin: 30% 50%; } Kendiniz deneyin » CSS transform-origin nedir nasıl kullanılır 2D dönüşümler bir elemanın x- ve y-ekseni değiştirebilir. 3D dönüşümler de bir elemanın z - eksenini değiştirebilirsiniz. CSS transform-origin CSS transform-origin özellikleri &nbsp Varsayılan Değer: 50% 50% 0   Kalıts

CSS transform Özelliği

CSS transform Css transform Dönüşümü özelliği bir elemanın bir 2D veya 3D biçimlendirme işlemlerini düzenler. Örnek: Bu örnekte div elemanı 15 derece döndürülmüştür. div { width: 150px; height: 100px; background-color: pink; transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); margin: 50px; } Kendiniz deneyin » CSS transform nedir nasıl kullanılır Css transform özelliği ile html elemanlarını döndürülebilir 2 ve 3 boyutlu nesnelere haline çevirilebilir. CSS transform CSS transform özellikleri   Varsayılan Değer: none   Kalıtsallık: yok   Animasyon Özelliği: var Oynat Versiyon: CSS3   JavaScript transform: object.style.transform="rotate(45deg)" Oynat CSS transform Tarayıcı De

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 Versiy

CSS text-shadow Özelliği

Resim
Yazıya gölge efekti CSS text-shadow Css text-shadow özelliği metine gölge ekler . h1 { text-shadow: 2px 2px crimson; } h2 { text-shadow: 1px 1px pink; } h3 { text-shadow: 1px 1px blue; } Kendiniz deneyin » CSS text-shadow nedir nasıl kullanılır Bu özelliği uygularken sırasına göre yataydaki öteleme miktarı düşeydeki miktarı ve renk değeri girilerek özelliğin etkisini gösterebilirsiniz. CSS text-shadow CSS text-shadow özellikleri Varsayılan Değer: none Kalıtsallık: var Animasyon Özelliği: var Oynat Versiyon: CSS3

CSS text-overflow Özelliği

Resim
CSS text-justify Css text-justify özelliği ile taşan metinlerin nasıl sonlandırılacağı düzenlenir. Örnek: Bu örnekte iki farklı div elemanına farklı değerlerde text-overflow özelliği uygulanmıştır. .kutu1 { white-space: nowrap; width: 180px; overflow: hidden; text-overflow: clip; border: 1px solid blue; } .kutu2 { white-space: nowrap; width: 180px; overflow: hidden; text-overflow: ellipsis; border: 1px solid blue; } Kendiniz deneyin » CSS text-justify nedir nasıl kullanılır Metinlerin içinde bulundukları elemanın sınır boyutlarına ulaştığındaki gösterim şekli bu özellikle birlikte düzenlenebilir. CSS text-justify CSS text-justify özellikleri   Varsayılan Değer: clip   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS3  

CSS text-justify Özelliği

CSS text-justify Css text-justify ile paragrafların sayfanın sağ ve sol kenarına yaslanmasını sağlayabiliriz. Örnek: div { text-align: justify; text-justify: inter-word; } Kendiniz deneyin » CSS text-justify nedir nasıl kullanılır Bu özellik metnin hangi hizada ve hangi aralıklıolması gerektiğini düzenler. CSS text-justify CSS text-justify özellikleri &nbsp Varsayılan Değer: auto   Kalıtsallık: var   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript text-justify: object.style.textJustify="inter-word" Oynat CSS text-justify Tarayıcı Desteği Tablodaki sayılar özelliği destekleyen ilk tarayıcı versiyonlarını belirtir. CSS Kodu:

CSS text-indent Özelliği

CSS text-indent Css text-indent : metin bloğundaki ilk satırının girinti belirtir. Örnek: Bu örnekte bir paragraf elemanına text-indent değeri "60px" olarak uygulanmıştır. p { text-indent: 60px; } Kendiniz deneyin » CSS text-indent nedir nasıl kullanılır Paragraf girintisi oluşturmak için kullanılır. CSS text-indent CSS text-indent özellikleri &nbsp Varsayılan Değer: 0   Kalıtsallık: var   Animasyon Özelliği: var Oynat Versiyon: CSS1   JavaScript text-indent: object.style.textIndent="60px" Oynat CSS text-indent Tarayıcı Desteği Tablodaki sayılar özelliği destekleyen ilk tarayıcı versiyonlarıdır. CSS Kodu: text-inde

CSS text-decoration-style Özelliği

CSS text-decoration-style Css text-decoration-style özelliği ile text-decoratin için uygulanacak olan çigi çeşidi belirlenebilir. Örnek: Bu örnekte bir paragraf elemanına uygulanacak olan text-decoration çizgisinin çeşidi dotted olarak uygulanmıştır. p { text-decoration: underline; -moz-text-decoration-style: dotted; text-decoration-style: dotted; } Kendiniz deneyin » CSS text-decoration-style nedir nasıl kullanılır Özelliğin çizgi tipi belirlenir. CSS text-decoration-style CSS text-decoration-style özellikleri   Varsayılan Değer: solid   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript text-decoration-style: object.style.textDecorationStyle="double" Oynat CSS text-decoration-style Tarayıcı Desteği T

CSS text-decoration-line Özelliği

CSS text-decoration-line Css text-decoration-line özelliği ile metnin çizgi çizilmesi istenilen kısım belirlenir. Örnek: Bu örnekte bir p elementinin metninin üzeri çizilecektir. p { -moz-text-decoration-line: overline; text-decoration-line: overline; } Kendiniz deneyin » CSS text-decoration-line nedir nasıl kullanılır Bu özellik aynı zamanda text-decoration özelliği uygulanarakta kısa bir bildirimle yapılabilir. CSS text-decoration-line CSS text-decoration-line özellikleri   Varsayılan Değer: none   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript text-decoration-line: object.style.textDecorationLine="underline" Oynat CSS text-decoration-line Tarayıcı Desteği Tablodaki sayılar özelliği ilk destekleyen tar

CSS text-decoration-color Özelliği

CSS text-decoration-color Css text-decoration-color ile text-decoration uygulanan elemanın rengi tanımlanır. Örnek: Bu örnekte text-decoration özelliği uygulanan bir paragraf elemanına text-decoration-color özelliğini kullanılarak "kırmızı" renk değeri uygulanmıştır. p { text-decoration: underline; -moz-text-decoration-color: red; text-decoration-color: red; } Kendiniz deneyin » CSS text-decoration-color nedir nasıl kullanılır Bu özelliğin uygulanabilmesi için text-decoration özelliğinin görünür olması gerekir. CSS text-decoration-color CSS text-decoration-color özellikleri   Varsayılan Değer: varsayılan rengidir   Kalıtsallık: yok   Animasyon Özelliği: var Oynat Versiyon: CSS3   JavaScript text-decoration-color: object.style.textDec

CSS text-decoration Özelliği

CSS text-decoration Css text-decoration : metni üstünü , altını veya tam ordasından çizgi çekerek sitil tanımlar. Örnek: Bu örnekte farklı paragraf elemanlarına farklı değerlerde text-decoration özelliği uygulanmıştır. .p1 { text-decoration: overline; } .p2 { text-decoration: line-through; } .p3 { text-decoration: underline; } p { font-size: 25px; } Kendiniz deneyin » CSS text-decoration nedir nasıl kullanılır Bu özellik: text-decoration-line, text-decoration-color, text-decoration-style özelliklerinin kısa bildirim şeklidir. Ama bu özellik her tarayıcıda çalışmamaktadır. CSS text-decoration CSS text-decoration özellikleri   Varsayılan Değer: none   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS1, renewed in CSS3   JavaScrip

CSS text-align-last Özelliği

CSS text-align-last Css text-align-last : metnin son satırını hizalamak nasıl belirler . Örnek: Bu örnekte bir metnin son cümlesini sağa yaslanacaktır. div { text-align: justify; -moz-text-align-last: right; /* Code for Firefox */ text-align-last: right; } Kendiniz deneyin » CSS text-align-last nedir nasıl kullanılır Metinlerinin son satırını verilen değere göre hizalamaya yarayan bu özellik sadece Internet Explorer ve Firefox tarafından desteklenir. CSS text-align-last CSS text-align-last özellikleri   Varsayılan Değer: auto   Kalıtsallık: var   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript text-align-last: object.style.textAlignLast="right" Oynat CSS text-align-last Tarayıcı Desteği Tablodaki sayılar özelliği de

CSS text-align-last uygulama

CSS text-align-last #kutucuk {<br>    text-align: justify;<br>    text-align-last:<span id='rfrnscsscde'> auto</span>;<br>}<br> CSS text-align-last değerleri auto left right center justify start end initial Sonuç Ekranı text-align-last özelliğini paragrafın veya makalenin son cümlesini hizalamak için kulllanabiliriz.. Bu özelliği crome safari ve opera tarayıcıları desteklememektedir.Bu yüzden web tasarım ve css gibi konuları öğrenmeye çalışırken bilgisayarınızda 5 önemli tarayıcıyı mutlaka kurun! Bu son satırı cümlesidir. Sonuçları görmek için değerlerin üzerine geliniz.

CSS text-align Özelliği

CSS text-align Css text-align özelliği:bir elemanın metnin yatay hizalamasını belirtir. Örnek: Bu örnekte h1- ve h6 arasındaki başlıklara farklı text-align değerleri uygulanarak özelliğin etkisinin öğrenilmesi amaçlanmıştır. h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } h4 { text-align: center; } h5 { text-align: left; } h6 { text-align: right; } Kendiniz deneyin » CSS text-align nedir nasıl kullanılır Text özelliği gösteren bir html elemanının ortalanmasını sağlamak için veya sola , sağa yaslanmasını sağlamak için kullanılan css özelliğidir. CSS text-align CSS text-align özellikleri   Varsayılan Değer: left if direction is ltr, and right if direction is rtl   Kalıtsallık: var   Animasyon Özelliği: yok   Versiyon: C

CSS table-layout Özelliği

CSS table-layout Örnek: Bu örnekte iki tane tabloya farklı table-layout değeri uygulanmıştır. table { border-collapse: separate; width: 250px; border: 1px solid black; } td { border: 1px solid black; } table.tablo1 { table-layout: auto; } table.tablo2 { table-layout: fixed; } Kendiniz deneyin » CSS table-layout nedir nasıl kullanılır Css table-layout : Table-layout özelliği bir tablo için kullanılacak tablo yerleştirme algoritması belirler . CSS table-layout CSS table-layout özellikleri &nbsp Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS2   JavaScript table-layout: object.style.tableLayout="fixed" Oynat CSS table-layout Tarayıcı Desteği Tablodaki sayılar özelliği ilk destekleye

CSS tab-size Özelliği

CSS tab-size Css tab-size sekme karakteri için kullanılan alanın uzunluğunu belirtir . Örnek: Örnekteki paragrafa tab-size:5 değeri girilmiştir.Özelliğin etkisini öğrenmek için aşağıdaki kendiniz deneyin tuşuna basınız. #tab5 { -moz-tab-size: 5; -o-tab-size: 5; tab-size: 5; } Kendiniz deneyin » CSS tab-size nedir nasıl kullanılır Bu özelliğin aktif olması textarea ve pre etiketlerinin kullanılması gerekir. CSS tab-size CSS tab-size özellikleri   Varsayılan Değer: 8   Kalıtsallık: var   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript tab-size : object.style.tabSize="20" Oynat CSS tab-size Tarayıcı Desteği Tablodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarını göstermektedir. CSS Kodu:

JavaScript CSS tab-size Örnek

javascript css tab-size özelliği örnek uygulama Css derslerine hoşgeldiniz! Javascript ile tab-size özelliğine "20" değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! function fonk() { document.getElementById("tab5").style.tabSize = "20"; document.getElementById("preid").style.OTabSize = "20"; document.getElementById("preid").style.MozTabSize = "20"; } Çalıştır

CSS right Özelliği

CSS right Css right özelliği ile position değeri static olmayan elemanların konumlandırma işlemleri yapılabilir.Bir html elemanının pozisyonunu değiştirebilmek için öncelikle position:static olan varsayılan değerinden kurtulması gerekir. Örnek: Bu örnekte biri diğerini kapsayan bir iki div elementi bulunmaktadır. right özelliğini kullanılabilmesi için küçük kutunun position değeri "absolute"olarak uygulanmıştır. div.relative { position: relative; width: 300px; height: 250px; border: 2px solid black; } div.absolute { position: absolute; right: 100px; width: auto; height: auto; border: 1px solid black; background-color: yellow; } Kendiniz deneyin » CSS right nedir nasıl kullanılır Durağan konumda olmayan html elemanlarının içinde bulundukları kapsayıcının sağ kenarından olan uzaklığını tanımlamamızı sağlayan css özelliğidir. CSS right