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ı sürümlerini gösterir. CSS Kodu:
<section> Etiketi Örnek Belgede section etiketini açıklayan bir bölüm: < section > < h1 > Section Etiketi < /h1 > < p > Section etiketi üstbilgi (header), altbilgi (footer), içerik bölümü, menü bölümü ve sayfanın diğer bölümleri gibi bir belge içindeki bölüm olarak tanımlanır. < /p > < /section > 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 <!DOCTYPE html><html> <body> <section> <h1>Section Etiketi</h1> <p>Section etiketi üstbilgi (header), altbilgi (footer), içerik bölümü, menü bölümü ve sayfanın diğer bölümleri gibi bir belge içindeki bölüm olarak tanımlanır.</p> </section> </body> </html>
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   Varsayılan Değer: 0s Kalıtsallık: yok Animasyon
CSS align-items özelliği Css align-content özelliği ile bir HTML elemanının içerisindeki alt elemanlarını hizalama ve konumlandırma işlemleri için kullanabiliriz Örnek: Align-items özelliğini kullanarak esnek kutu modülü ("flex") uygulanan bir kapsayıcı div içerisindeki elemanların konumlarına center değerini uygulayalım ! div { width: 220px; height: 350px; border: 2px solid black; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; } Kendiniz deneyin » CSS align-items nedir nasıl kullanılır Flex ile (esnek kutu modeli) ile yapılandırılmış bir div kutusundaki elemanları hizalamak için kullanılır. CSS align-items CSS align-items özellikleri   Varsayılan Değer: stretch Kalıtsallık: yok Animasyon Özelliği: yok Ver
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   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
Html5 canvas etiketi ve Javascript ile nasıl oyun yapılır ? Web oyunu geliştirme ve animasyon teknikleri nelerdir ? Javascript'te yılan oyunu nasıl yapılır ? Siz de kendi canvas oyununuzu geliştirmek istiyorsanız önce videoyu izleyelim . Html5 Canvas oyun yapımı ve Javascript Animasyon Dersleri Bir web geliştiricisi ya da yazılımla uğraşıyorsanız eminim oyun yapımı ya da oyun programlama ve geliştirme ile ilgili mutlaka bir deneyiminiz olmuştur.İşte oyun programlama ve Html5 canvas animasyon derslerimizden görüntüler.Bakalım beğenecek misiniz ? İyi seyirler. "Bu yılan başka yılan :)" Javascript ile kendi oyununu geliştirmeye hazır mısın ? 6 saatlik dolu dolu uygulamalı Canvas Oyun Yapımı kursuna sadece 24.99TL ye hemen kayıt yaptırabilirsiniz.Harika eğlenceli ve bilgi dolu kursu bitirip yılan oyunu ile kendinizi ödüllendirin. Kursu içeriğini incelemek için Udemy HTML5 Canvas Animasyon Dersleri ve Javascript Oyun Yapımı linkine tıklayın. Html5 canvas
CSS overflow Boyutları belirlenen bir html elemanın içeriği kutu boyutunu aştığı durumlarda css overflow özelliği ile gösterimler kontrol edilebilir.Kaydırma çubuklarının çıkıp çıkmayacağını veya çıkacaksada x yönünde mi y yönünde mi kaydırma çubuğu istiyoruz gibi sorularımızı cevaplayan ve çözen bir özelliktir. Örnek: Bu css örneğinde iki tane div elemanından bir tanesine scroll diğerine ise hidden değeri verilmiştir. div.scroll { background-color: yellow; width: 150px; height: 150px; overflow: scroll; } div.hidden { background-color: pink; width: 150px; height: 150px; overflow: hidden; } Kendiniz deneyin » CSS overflow nedir nasıl kullanılır Overflow özelliği ile birlikte içeriğin elementin boyutlarını aşması durumunda kaydırma çubuğunun gösterilip gösterilmeyeceğini kontrol edebiliriz. CSS overflow CSS overflow özellikleri Varsayılan Değer: visible
CSS border-collapse Css border-collapse özelliği tabloların kenarlarını birleştirerek tek çizgi halinde görünmesini sağlar. Örnek: Bu örnekte bir tablonun satır ve sütun kenarlarını tek çizgi olarak görünmesini sağlamak için border-collapse özelliğini uyguladık. table { border-collapse: collapse; } table, td, th { border: 1px solid black; } Kendiniz deneyin » CSS border-collapse nedir nasıl kullanılır Bir html tabloya border atadığımız zaman normalde her hücrenin kendi bir kenarlığı olur, eğer ki border-collapse özelliğini uygularsak artık hücreler ortak bir kenar kullanmış olur.Daha detaylı öğrenmek için örneklerimizi inceleyiniz. CSS border-collapse CSS border-collapse özellikleri   Varsayılan Değer: separate Kalıtsallık: var Animasyon Özelliği: yok Versiyon: CSS2 JavaScript bor
Yorumlar
Yorum Gönderme