Yorumlarınızı, eleştirilerinizi, isteklerinizi, karşılaştığınız hataları bize bildirip sitemizin gelişmesine katkıda bulunmak istermisiniz?

Video

CSS ile SVG animasyonları


CSSBu videomuzda CSS ile SVG dış çizgi animasyonlarının nasıl yapılacağına değineceğiz. İlk olarak kendi SVG dosyamızı oluşturacağız ve oluşturduğumuz SVG için CSS komutları yazmaya başlayacağız. Çizgi animasyonunun nasıl yapıldığını öğrendikten sonra SVGlerin HTML'e ekleme yöntemlerinden yani SVGlerin kontrollerinden bahsedeceğiz. İyi seyirler.






Video

Grafik Formatları ve SVG'ye giriş


CSSBu videomuzda internette kullanılan grafik formatları(jpg, png, gif, svg) hakkında konuşup SVG'lere giriş yapacağız. Hangi grafik formatını nerede kullanmak gerekir, grafik formatlarının avantaj ve dezavantajları nelerdir, grafik formatlarının kendine özgü özellikleri nelerdir, SVGler CSS için neden önemlidir, SVGlerin yapısı nasıldır, internette SVGler hangi amaçla kullanılmaktadır. Bu soruların cevaplarını konuşacağız. İyi seyirler.






Video

CSS ile form elemanlarının düzenlenmesi


CSSBu videomuzda CSS ile form elemanlarının düzenlenmesi konusuna değineceğiz. Form elemanlarının boyutlandırılması, konumlandırılması, genişliklerinin eşit hale getirilmesi ve diğer CSS işlemlerinin (efektler, renklendirmeler, gölgelendirmeler vs) nasıl yapıldığını anlatmaya çalışacağız.

Tasarlanan uygulamamızı bilgisayarınıza indirmek için burayı tıklayınız.






Örnek

CSS Zamanlama Fonksiyonları


CSSŞimdiye kadar gerek videolarımızda, gerek örneklerimizde transition (geçiş) komutundan epeyce yararlandık. Bildiğiniz gibi 'transition' komutu iki farklı durumu bir zamana bağlayarak, kullanıcının geçişleri aşama aşama gözlemlemesini sağlar. Bu geçişlerin nasıl olacağını, hareket zamanlama fonksiyonları ile belirleyebiliriz. Yani geçiş hızı; sabit (hızlanma veya yavaşlama yok), hızlanan, hızlı başlayıp yavaşlayan, yavaş başlayıp hızlanan ve sonlara doğru tekrar yavaşlayan, basamaklar halinde ilerleyen vs geçişler tanımlayabiliriz.

Öncelikle geçiş komutunun kullanışını ve zamanlama fonksiyonunun nerede ve nasıl kullanıldığına göz atarak başlayalım.




Makale

CSS ile Taranan Yazı Renginin Değiştirilmesi


CSSAktif sayfayı menüde gösterme isimli makalemizde sayfamıza eklediğimiz detaylardan ve önemlerinden bahsetmiştik.

Bu makalemizde bu detaylardan tarama ve taranan yazıların renk değişimlerine değineceğiz. Çoğu kullanıcı, özellikle bir yazıyı okurken, okuduğu kısmı fare ile tarayarak okumasının daha kolay olmasını hedefler. Bildiğiniz gibi tarayıcıların standart tarama rengi mavi, taranan yazı ise beyazdır. Bu renkleri CSS ile kolaylıkla değiştirebilir, sayfamızın standartların dışına çıkmasını sağlayabiliriz.

Bunun için ::selection seçicisinden yararlanacağız.





Video

CSS ve 3.boyut (2)


CSS11. videomuzda CSS 3 boyut özelliklerinden yararlanarak nasıl 3 boyutlu çokgenlerin yapılabileceğinden bahsetmiştik. Bu videomuzda da 3 boyut özelliklerinin farklı kullanım alanlarından birine göz atarak 3 boyutlu bir sayfa geçiş uygulaması tasarlayacağız. Her zaman olduğu gibi uygulamamızda kullandığımız içerik yerine resim, video gibi kendi içeriklerinizi rahatlıkla ekleyebilirisiniz.

Tasarlanan uygulamamızı bilgisayarınıza indirmek için burayı tıklayınız.






Makale

CSS ile Aktif Sayfayı Menüde Gösterme


CSSTasarımlarımıza görsel detaylar katmak, hem tasarımlarımızın daha güzel görünmesini sağlarken hem de tasarımlarımızı sıradanlıktan kurtaran etkenlerden biridir.

Bu makalemizde bu detaylardan biri olan aktif sayfaya ait butonun diğer butonlardan daha farklı görünmesi için gerekli düzenlemeleri yapacağız. Bu hem kullanıcıya hangi sayfada olduğunu gösterecek hem de aynı sayfayı menüden yenilemesini engelleyecektir.

Bunun için farklı iki yöntem kullanabiliriz. İlki standart menü yaratmak için kullandığımız liste yöntemi, diğeri etiket (label) yöntemi. Bu makalemizde liste yöntemini açıklamaya çalışacağız.





Video

CSS ve 3.boyut


CSSBu videomuzda CSS'de yer alan 3 boyut özelliklerine göz atacağız. 3 boyutlu bir resim geçişi tasarlayıp, bu yapıyla beraber, önceki videolarımızda değindiğimiz kardeş seçicilerden tilda, input radio butonların işaretlenmesine göre yapılacak işlemler için gerekli kodlamaya tekrar değinerek, CSSde yer alan 3 boyut komutlarını da öğrenmiş olacağız.

Videoda tasarladığımız örneği buraya tıklayarak bilgisarınıza indireblirsiniz. (Dosya 10 tane büyük resim içerdiğinden boyutu yaklaşık 9MBdir)






Örnek

CSS Buton Efekt Uygulaması v1.0


CSSBu uygulamamızda, tamamen CSSTR tarafından hazırlanmış 39 buton efektine yer vermeye çalıştık. İstediğiniz efekti seçip, kodlama kısmından efektin nasıl yapıldığını görebilir veya direkt kopyala-yapıştır ile sisteminize ekleyebilirsiniz. İlerleyen zamanlarda yeni efektler içeren güncellemelerimiz olacak.

Uygulamamız henüz çok yeni, sonraki versiyonlarda tespit edilen hatalar düzeltilecek ve tamamen kullanıcının isteği doğrultusunda yeni bir uygulama hazırlanacak. Bu açıdan fark ettiğiniz hataları bildirirseniz buna göre düzeltmeler yapabiliriz. Teşekkürler.





Video

Tüm cihazlara uyumlu web site tasarımı (Bölüm3)


CSSTüm cihazlara uyumlu web site tasarımının bu son videosunda daha önce tasarladığımız şablon ve menü sistemine içeriklerimizi ekleyeceğiz. İçerik eklemesinden sonra da uyumluluk için bazı işlemleri yapıp, gerekli testlerimizi yine bu videomuzda tekrardan yapacağız. Bu videomuzda özellikle resim ve videoların uyumluluğu için bazı ayarlamalar üzerinde çalışacağız.







Video

Tüm cihazlara uyumlu web site tasarımı (Bölüm2)


CSS8. videonun devamı niteliğindeki bu videomuzda cep telefonu ve tabletlere yönelik bir menü tasarlayacağız. Bu sayede web sitemizin küçük ekranlarda da düzenli görüntülenmesini sağlayacağız. Bu videomuzda da gerekli testleri yapacağız, özellikle kardeş seçicilerden (sibling selectors) yararlanacağız.







Sayfalar: 123

Abone Ol


Abone ol, yeni içeriklerden anında haberdar ol.

 


İçerik Arama



Sitemize destek vermek için aşağıdaki reklama tıklayabilirsiniz.


Yazı Hizalama




Son Eklenenler


Filtreler