CSS karmaşık bir dil olmasa da, öğrenmeye başladığımda bazı kısımları benim için bir muammaydı. Örneğin, birden çok kutu gölgesi veya arka plan görüntüsü niteliğini birleştirmek. Bu yüzden bu oyun alanlarını(playgrounds ) CSS ile çalışmayı daha kolay ve verimli hale getirmek için tasarlandı.
HTML/CSS bilginiz yeterli olduğunda kendi websititenizi tasarlamak için bu aşağıdaki sitelerden indireceğiniz yüzlerce farklı HTML5 şablon/template’ları kullanabilirsiniz.
PHP UTF8 de Ucwords gibi bu tür çevirilerde yalnızca i -> İ dönüşümünde problem yaşanmaktadır, tabii ikisi de I’dan ı’ya ve i’den İ’ye. Bunu çözmek için aşağıdaki fonksiyonu kullanabilirsiniz.
Geçen gün bu blog için yaptığım arşiv sayfasında sitedeki tüm başlıkları listelemiştim, aklıma arşiv sayfasına girenlerin sayfa içerisinde listelenmiş başlıklar içerisinde arama yapabilmesi fikri geldi ve hemen jQuery’ye sarıldım ve yaptım. Tabii ki paylaşıp bu deneyimi de arşivlemek istedim.
Websitelerine dark mode(kodu mod – karanlık modu) görünümü kaznadırmak ve dark mode hakkında birkaç yazı eklemiştim;
- Websitesine kolayca dark mode eklemek
- JavaScript ile dark mode sorgulamak
- HTML ile görsellerde dark mode seçeneği
- Chrome, Opera ve Firefox Dark modu
AMP sayfalarına da dark mode seçeneği eklemek mümkün, nasıl yapacağımızı ve örnek paylaşacağım.
box-shadow: CSS’de yaygın kullanılan bilinen bir gölgelendirme tekniği, standart görsellerde ve keskin kenarlı elemanlarda çok işe yarıyor. Ancak şeffaf görseller ve yuvarlak veya değişik şekille kenarlıklara sahip elemanlar için pek kullanışlı olmadığı için onun yerine
drop-shadow filtresini kullanabilirsiniz.
Bazen bir html etiketi içerisinde yazıların(metin) uzunlukları tutarlı olmayabilir ve kaotik bir durum oluşur, belli ölçülerden taşar vs.
Bunu aşmak için ilgili etiket içerisindeki metnin uzunluğunu sınırlamak tasarımcıları rahatlatır, bunu genelde backend de yapmak gibi bir eğilim vardır ancak buna hiç gerek yok çünkü CSS ile de bu yapılabilir.
Ben web uygulamalarında eğer bir şey CSS ile yapılabiliyorsa onun için ek JavaScript yazmanın gereksiz olduğunu düşünenlerdenim. Modern tarayıcıların tamamının desteklediği CSS ile birçok şey artık yapılabiliyor, buna bir örnek de
scroll-behavior: smooth;.
Online kod yazıp, test edip ve paylaşılabilen uygulamaları paylaşacağım, en çok kullanılan ve bilinenleri Codepen ve Jsfiddle ancak daha yetenekli ve farklı özellikleri olan alternatiflerini de listeme dahil edeceğim, umarım işinize yarar.
Daha önce dark mode hakkında bir yazı eklemiştim, “Javascript ile siteyi ziyaret eden cihazın karanlık modu(koyu mod) kulanıp kullanmadığını sorulamak“. Bu yazımda herhangi bir web sitesine veya uygulamaya cihazın kullandığı modu da göz önünde bulundurarak çalışan dark mode seçeneği eklemeyi göstereceğim.
WEb geliştirme için ücretsiz ve kaliteli kaynakların bir listesini arıyorsanız doğru yere geldiniz, burada en iyi ve yüksek kaliteli web geliştirme için ücretsiz kullanabileceğiniz kaynak siteleri listeleyeceğim.
Eğlenceli bir API, bir uygulamada veya web sitesinde rastgele kedi ve köpek göreli gösterebilmeyi sağlıyor.
Sayfadaki linklerden bazılarının çalışmasını istemiyorsanız aşağıdaki
jQuery ve
CSS ile yapmış olduğum örneklerden birini kullanabilirsiniz. Bu yöntem önyüzde bazen kullanıcıların tıklamaması istenen ama görünen şeyler için kullanılabilir.
Bildiğiniz gibi 2021 itibariyle “Adobe Flash artık yok“, tamamen yok yani hiçbir güncel web tarayıcısı flash çalıştırmayacak. Şimdiye kadar sayfalara güvenlik izni verdiğinizde görünebiliyordu ancak artık hiçbir şekilde gösterilmeyecek.
CSS’de Flexbox kullanmayı seviyorum ve bu harika bir şey, önceden birçok farklı CSS kuralı yazarken Flexbox ile sadece bir satırda istediğim görüntüyü alabiliyorum.
Burada Joy Shaheb’in paylaşmış olduğu “FlexBox Cheat Sheets in 2021 || CSS 2021” makalesini paylaşmak istedim umarım işinize yarar.