Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Styling Images and SVG Icons: the img Reset, object-position, image-rendering, fill, stroke and currentColor
The gap under an image comes from img being inline; a reset of display: block, max-inline-size: 100% and block-size: auto removes it, keeps the ratio and still lets the width/height attributes reserve space. The post measures object-position for the focal point, image-rendering and image-orientation, fill, stroke and currentColor in inline SVG, Bookstore's icon set from a single sprite, and logo colors with light-dark() in dark mode.
Transforms: translate, rotate, scale, Individual Transform Properties, transform-origin and 3D
Transform functions apply from left to right and each one changes the coordinate system of the next, so their order changes the result; the individual translate, rotate and scale properties always apply in that fixed order, whatever order you write them in, and combine with transform. The post covers transform-origin, transform-box in SVG, why transforms do not affect layout, and a cover hover, a 3D cover flip and a cart icon in Bookstore, with measurements.