Websitelerine dark mode(kodu mod – karanlık modu) görünümü kaznadırmak ve dark mode hakkında birkaç yazı eklemiştim;
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;.
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.
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.
CSS seçicileri nedir? CSS’de seçiciler, web sayfalarımızdaki stil vermek istediğimiz HTML öğelerini seçmek için kullanılan kalıplardır. Mesleki olmayan terimlerle ifade edersek; seçiciler bir DOM öğesini alıp ona stil uygulamak için kullanılır.
Web sayfalarında görselleri boyutlandırdığımızda eğer en/boy oranı aynı değil ise görsel çok kötü şekilde görünebilir. Bunu engellemek için ya en boy oranına göre bir boyut seçmek gerekiyor ya da vereceğim bu CSS örneğinde olduğu gibi “object-fit: cover;” etiketini kullanarak sorunsuz kullanabiliriz.
Benim gibi 80’lerde doğmuş biriyseniz muhtemelen eski albümleri gömmüşsünüzdür ve o albümler içerisinde fotoğraflarınız vardır. Fiziksel bir albümü içerisinde var olan fotoğraf nesneleri ile elinde tutmanın olduğu zamanlar.
Bu yazıda tasarımcılar için ücretsiz kullanabilecekleri 50 araç ve kaynak listesini paylaşacağım. Hepsi ücretsiz ve harika.
Bugün CSS’de yeni bir şey daha öğrendim, scroll-margin. Modern tarayıcıların tümünde sorunsuz çalışıyor.
Bir süre önce üzerinde çalıştığım bir web sitesi projesinde bazı özel şekillere ihtiyacım oldu, elbette eski nesil bir metotla değil de bunu yeni nesil bir metotla yapmayı istedim, böylece CSS clip-path ile tanıştım.