Yayınlar

css-dersleri etiketine sahip yayınlar gösteriliyor

Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

CSS transition-delay Özelliği

CSS transition-delay Css transition-delay özelliği ile css animasyonlarının gecikme süresi belirlenebilir.Örnek:Bu örnekte genişliği 90px olan bir div elemanının genişliği6 saniyede 360px olacaktır. Fakat transition-delay: 3s; değeri verildiği için 3 saniye gecikmeli başlayacaktır.

div {
width: 90px;
height: 90px;
background: yellow;
border: 1px solid black;
-webkit-transition-property: width;
-webkit-transition-duration: 6s;
-webkit-transition-delay: 3s;
transition-property: width;
transition-duration: 6s;
transition-delay: 3s;
overflow;
auto;
}

div:hover {
width: 360px;
} Kendiniz deneyin » CSS transition-delay nedir nasıl kullanılırCss ile oluşturulan animasyonların gecikme süresi bu özellik ile tanımlanabilir.CSS transition-delayCSS transition-delay özellikleri &nbsp Varsayılan Değer:0s Kalıtsallık:yok Animasyon Özelliği:yokVersiyon:CSS3 JavaScript transition-delay:oobject.style.transitionDelay="3s"Oynat CSS transition-delay Tarayıcı DesteğiCSS Kod…

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ırCss transition özelliği ile html elemanlarına uygulanacak olan css etkilerinin geçiş süresi tanımlanabilir.CSS transitionCSS transition özellikleri &nbsp Varsayılan Değer:all 0s ease 0s Kalıtsallık:yok Animasyon Özelliği:yokVersiyon:CSS3 JavaScript transition:object.style.transition="all 5s"Oynat CSS transition Tarayıcı DesteğiAşağıdaki tablodaki sayılar özelliği destekleyen ilk tarayıcı versiyonlarını göstermektedir.CSS Kodu:transition26.0
4.0 -webkit-10.016.0
4.0 -moz-6.1
3.1 -webkit-12.1
10.5 -o-CSS…

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-originCSS transform-origin özellikleri &nbsp Varsayılan Değer:50% 50% 0 Kalıtsallık:yok Animasyon Özelliği:varVersiyon:CSS3 JavaScript transform-origin:object.style.transformOrigin="0 0"Oynat CSS transform-origin Tarayıcı Desteğ…

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ırCss transform özelliği ile html elemanlarını döndürülebilir 2 ve 3 boyutlu nesnelere haline çevirilebilir.CSS transformCSS transform özellikleri Varsayılan Değer:none Kalıtsallık:yok Animasyon Özelliği:varOynat Versiyon:CSS3 JavaScript transform:object.style.transform="rotate(45deg)"Oynat CSS transform Tarayıcı DesteğiCSS Kodu:transform (2D)36.0
4.0 -webkit-10.0
9.0 -ms-16.0
3.5 -moz-9.0
3.2 -webkit-23.0
15.0 -webkit-
10.5 -o-transform (3D)36.0
12.0 -webkit-10.016.0
10.0 -moz-9.0
4.0 -webkit-23.0
15.0 -webkit-CSS transform Değerleritransform: none|transform-functions|initial|inherit; CSS…

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ırCss 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 topCSS top özellikleri &nbsp Varsayılan Değer:auto Kalıtsallık:yok Animasyon Özelliği:varOynat Versiyon:CSS2 JavaScript top:object.style.top="400px"Oynat CSS top Tarayıcı DesteğiTalodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarıdır.CSS Kodu:top1.05.01.01.06.0CSS top Değerleritop: auto|length|ini…

CSS text-shadow Özelliği

Resim
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-shadowCSS text-shadow özellikleri Varsayılan Değer:none Kalıtsallık:var Animasyon Özelliği:varOynat Versiyon:CSS3 JavaScript text-shadow:object.style.textShadow="3px 4px 5px orange"Oynat CSS text-shadow Tarayıcı Desteği Tablodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarıdır.
CSS Kodu:text-shadow4.010.03.54.09.6 CSS text-shadow Değerleritext-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; CSS text-shadow özelliği değerleriCSS text-shadow değerleriCSS text-shadow değerleri tanımlarıCSS …

CSS text-overflow Özelliği

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ırMetinlerin içinde bulundukları elemanın sınır boyutlarına ulaştığındaki gösterim şekli bu özellikle birlikte düzenlenebilir.CSS text-justifyCSS text-justify özellikleri Varsayılan Değer:clip Kalıtsallık:yok Animasyon Özelliği:yokVersiyon:CSS3 JavaScript text-justify:object.style.textOverflow="ellipsis"Oynat CSS text-justify Tarayıcı DesteğiTablodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarını göstermektedir.CSS Kodu:text-justify4.06.07.03.111.0
9.0 -o-CSS text-ju…

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ırBu özellik metnin hangi hizada ve hangi aralıklıolması gerektiğini düzenler.CSS text-justifyCSS text-justify özellikleri &nbsp Varsayılan Değer:auto Kalıtsallık:var Animasyon Özelliği:yokVersiyon:CSS3 JavaScript text-justify:object.style.textJustify="inter-word"Oynat CSS text-justify Tarayıcı DesteğiTablodaki sayılar özelliği destekleyen ilk tarayıcı versiyonlarını belirtir.CSS Kodu:text-justifyDesteklenmiyor5.5DesteklenmiyorDesteklenmiyorDesteklenmiyorCSS text-justify Değerleritext-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim|initial|inherit; CSS text-justify özelliği değerleriCSS text-justify değerleriCSS text-justify değerleri tanımlarıCSS örnek uygulamalarautoTarayıcı otamatik değer oluşturur.Oynat inter-…

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ırParagraf girintisi oluşturmak için kullanılır.CSS text-indentCSS text-indent özellikleri &nbsp Varsayılan Değer:0 Kalıtsallık:var Animasyon Özelliği:varOynat Versiyon:CSS1 JavaScript text-indent:object.style.textIndent="60px"Oynat CSS text-indent Tarayıcı DesteğiTablodaki sayılar özelliği destekleyen ilk tarayıcı versiyonlarıdır.CSS Kodu:text-indent1.03.01.01.03.5CSS text-indent Değerleritext-indent: length|initial|inherit; CSS text-indent özelliği değerleriCSS text-indent değerleriCSS text-indent değerleri tanımlarıCSS örnek uygulamalarlengthSayısal olarak px cm gibi değerler girilir.Oynat %Yüzde değeri verilir.Oynat initialÖzelliğin varsayılan değeridir.Oynat inheritÖzelliğin kalıtsal değeri geçerli olur.

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-styleCSS text-decoration-style özellikleri Varsayılan Değer:solid Kalıtsallık:yok Animasyon Özelliği:yokVersiyon:CSS3 JavaScript text-decoration-style:object.style.textDecorationStyle="double"Oynat CSS text-decoration-style Tarayıcı DesteğiTablodaki sayılar özelliği destekleyen ilk tarayıcı versiyonlarıdır.CSS Kodu:text-decoration-styleDesteklenmiyorDesteklenmiyor6.0 -moz-DesteklenmiyorDesteklenmiyorCSS text-decoration-style Değerleritext-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit; CS…

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ırBu özellik aynı zamanda text-decoration özelliği uygulanarakta kısa bir bildirimle yapılabilir.CSS text-decoration-lineCSS text-decoration-line özellikleri Varsayılan Değer:none Kalıtsallık:yok Animasyon Özelliği:yokVersiyon:CSS3 JavaScript text-decoration-line:object.style.textDecorationLine="underline"Oynat CSS text-decoration-line Tarayıcı DesteğiTablodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarını gösterir.CSS Kodu:text-decoration-lineDesteklenmiyorDesteklenmiyor6.0 -moz-DesteklenmiyorDesteklenmiyorCSS text-decoration-line Değerleritext-decoration-line: none|underline|overline|line-through|initial|inherit; CSS text-decoration-line özelliği değ…

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ırBu özelliğin uygulanabilmesi için text-decoration özelliğinin görünür olması gerekir.CSS text-decoration-colorCSS text-decoration-color özellikleri Varsayılan Değer:varsayılan rengidir Kalıtsallık:yok Animasyon Özelliği:varOynat Versiyon:CSS3 JavaScript text-decoration-color:object.style.textDecorationColor="red"Oynat CSS text-decoration-color Tarayıcı DesteğiCSS Kodu:text-decoration-colorDesteklenmiyorDesteklenmiyor6.0 -moz-DesteklenmiyorDesteklenmiyorCSS text-decoration-color Değerleritext-decoration-color: color|initial|inherit; CSS t…

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ırBu ö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-decorationCSS text-decoration özellikleri Varsayılan Değer:none Kalıtsallık:yok Animasyon Özelliği:yokVersiyon:CSS1, renewed in CSS3 JavaScript text-decoration:object.style.textDecoration="underline"Oynat CSS text-decoration Tarayıcı DesteğiCSS Kodu:text-decoration1.03.01.01.03.5CSS text-decoration Değerleritext-decoration: none|underline|overline|line-through|initial|inherit; CS…

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ırMetinlerinin son satırını verilen değere göre hizalamaya yarayan bu özellik sadece Internet Explorer ve Firefox tarafından desteklenir.CSS text-align-lastCSS text-align-last özellikleri Varsayılan Değer:auto Kalıtsallık:var Animasyon Özelliği:yokVersiyon:CSS3 JavaScript text-align-last:object.style.textAlignLast="right"Oynat CSS text-align-last Tarayıcı DesteğiTablodaki sayılar özelliği destekleyen taracı versiyonlarını göstermektedir.CSS Kodu:text-align-lastDesteklenmiyor5.512.0 -moz-DesteklenmiyorDesteklenmiyorCSS text-align-last Değerleritext-align-last: auto|left|right|center|justify|start|end|initial|inherit; CSS text-align-last özelliği değerleriCS…

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ırText ö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-alignCSS 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:yokVersiyon:CSS1 JavaScript text-align:object.style.textAlign="right"Oynat CSS text-align Tarayıcı DesteğiTablodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarını göstermektedir.CSS Kodu:text-align1.03.01.01.03.5CSS te…

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ırCss table-layout : Table-layout özelliği bir tablo için kullanılacak tablo yerleştirme algoritması belirler .CSS table-layoutCSS table-layout özellikleri &nbsp Varsayılan Değer:auto Kalıtsallık:yok Animasyon Özelliği:yokVersiyon:CSS2 JavaScript table-layout:object.style.tableLayout="fixed"Oynat CSS table-layout Tarayıcı DesteğiTablodaki sayılar özelliği ilk destekleyen ilk tarayıcı versiyonlarını göstermektedir.CSS Kodu:table-layout14.05.01.01.07.0CSS table-layout Değerleritable-layout: auto|fixed|initial|inherit; CSS table-layout özelliği değerleriCSS table-layout değerleriCSS table-layout değerleri tanımlarıCSS örnek uygulamalar

CSS tab-size Özelliği

CSS tab-size Css tab-sizesekme 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ırBu ö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:yokVersiyon:CSS3 JavaScript tab-size :object.style.tabSize="20"Oynat CSS tab-size Tarayıcı DesteğiTablodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarını göstermektedir.CSS Kodu:tab-size 21.0Desteklenmiyor4.0 -moz-6.115.0
10.6 -o-CSS tab-size Değerleritab-size : number|length|initial|inherit; CSS tab-size özelliği değerleriCSS tab-size değerleriCSS tab-size değerleri tanımlarıCSS örnek uygulamalarnumberVarsayılan değer 8. Her sekme karakteri için gösterilmesi gereken …

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ırDurağ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 rightCSS right özellikleri Varsayılan Değer:auto Kalıtsallık:yok Animasyon Özelliği:varOynat Versiyon:CSS2 JavaScript ri…