Kayıtlar

css-dersleri etiketine sahip yayınlar gösteriliyor

En çok okunan

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

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 her bitcoinle ücretsiz  çekiliş bileti alabilirsiniz. Dikkatle oku

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ır Css ile oluşturulan animasyonların gecikme süresi bu özellik ile tanımlanabilir. CSS transition-delay CSS transition-delay özellikleri &nbsp Varsayılan Değer: 0s   Kalıtsallık: yok   Animasyon

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: object.style.transition="all 5s" Oyn

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ıtsallık: yok   An

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ı Desteği CSS Kodu:

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 Versiyon: CSS2   JavaScript t

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 JavaScript text-shadow:

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   JavaScript text-justify: object.style.te

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: text-justify Desteklenmiyor 5.5 Desteklenmiy

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-indent 1.0 3.0 1.0 1.0 3.5 CSS text

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 Tablodaki sayılar özelliği destekleyen ilk tarayıcı vers

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 tarayıcı versiyonlarını gösterir. CSS Kod

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.textDecorationColor="red" Oynat CSS tex

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   JavaScript text-decoration: object.style.textDecoratio

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 destekleyen taracı versiyonlarını göstermektedir.

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: CSS1   JavaScript text-align:

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 destekleyen ilk tarayıcı versiyonlarını göstermektedir.

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:

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 CSS right özellikleri

CSS resize Özelliği

CSS resize Örnek: Bu örnekteki div elementinin sağ alt köşesindeki simgeye mouse ile basılı tutarak hareket ettiriniz.Kutunun boyutunu istediğiniz gibi hem yatayda hemde düşey eksende değiştirebilirsiniz. div { border: 1px solid black; width: 250px; resize: both; overflow: auto; } Kendiniz deneyin » CSS resize nedir nasıl kullanılır Css resize özelliği ile kullanıcılar için html elementlerinin boyutları değiştirilebilir hale getirilebilir. CSS resize CSS resize özellikleri   Varsayılan Değer: none   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript resize: object.style.resize="horizantal" Oynat CSS resize Tarayıcı Desteği Tablodaki sayılar özelliği ilk destekleyen tarayıcı versiyonlarını göstermektedir. CSS Kodu: