img { width: 150px; height: 100px; border: 1px solid #000; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established …
Tag Archives: css
Codrops CSS Reference
An extensive CSS reference with all the important properties and info to learn CSS from the basics Extensive reference sporting clear explanations, examples, live demos (using Codrops’ Playground), CSS compatibility tables (provided by Can I use…), etc.. The fact that Sara Soueidan wrote a lot of these articles gives away that they’re very – very! …
CodyHouse
CSS Grid Layout 2014 Recap
Two posts on CSS Grid Layout: one covering the changes in the spec during 2014, and another one talking about the implementation details in Blink and Webkit. CSS Grid Layout 2014 Recap: Implementation Status → CSS Grid Layout 2014 Recap: Specification Evolution → Related: CSS3 Grid Layout Module, an Introduction → Automatic Placement when using …
3D First Person Shooter … with CSS
With CSS transforms we can’t define arbitrary shapes using a set of points, we’re stuck with HTML elements which are always rectangular and have two dimensional properties such as top, left, width and height to determine their position and size. In many ways this makes dealing with 3D easier, as there’s no complex math to …
(ab)using CSS3’s :nth-child() selector to invent new ones
When combining :nth-child() with some other pseudo selectors, one can actually create new types of selectors. “:nth-of-m-child” selector /** * This selector will select the third element in a row, * if it is also the third to last element … thus selecting * the 3rd child in a row of 5 elements */ span:nth-child(3):nth-last-child(3) …
Continue reading “(ab)using CSS3’s :nth-child() selector to invent new ones”
Flexbox adventures
Up until reading Flexbox Adventures I hadn’t really given much thought to how flexbox grow exactly works. If you do want to know: Available space = (Container size – Flex-basis siblings total). Flex Item size = Basis + ((Available space / Total Grow nums) * Individual grow num). A recommended read. Flexbox adventures → When …
CSS Specificity Graph Generator
The Specificity Graph
The Specificity Graph is a very simple model for diagrammatically assessing the overall health of your codebase in terms of specificity—a way of looking at an entire project’s CSS and highlighting any potentially troublesome areas of higher-than-ideal specificity. We can then use this snapshot to refactor and rearchitect old projects into a better shape, or …
Huxley – Catching visual regressions in Web applications.
This content is quite old. You might want to check out this modern way of visual diffing, using Puppeteer instead Watches you browse, takes screenshots, tells you when they change. First you record a basic flow and take screenshots in between. Afterwards, when you’ve done some changes, you can let the flow play back again, …
Continue reading “Huxley – Catching visual regressions in Web applications.”