Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Görselleri ve SVG İkonları Stillemek: img Reset'i, object-position, image-rendering, fill, stroke ve currentColor
Görsellerin altındaki boşluk img'nin inline olmasından gelir; display: block, max-inline-size: 100% ve block-size: auto'dan oluşan reset bu boşluğu kaldırır, oranı korur ve width/height attribute'larıyla yer ayırmayı bozmaz. Yazı object-position ile odak noktasını, image-rendering ve image-orientation'ı, inline SVG'de fill, stroke ve currentColor'ı, Bookstore'un tek sprite'lık ikon setini ve dark mode'da light-dark() ile logo rengini ölçümlerle anlatır.
Transform'lar: translate, rotate, scale, Bağımsız Transform Property'leri, transform-origin ve 3D
Transform function'ları soldan sağa uygulanır ve her biri bir sonrakinin koordinat sistemini değiştirdiği için sıra sonucu değiştirir; bağımsız translate, rotate ve scale property'leri ise yazım sırasından bağımsız olarak hep bu sırayla ve transform'la birleşerek uygulanır. Yazı transform-origin'i, SVG'de transform-box'ı, layout'a etkisizliği ve Bookstore'da kapak hover'ı, 3D kapak çevirme ve sepet ikonunu ölçümlerle anlatır.